בניית אתרים: איך תהפוך את האתר שלך למונגש?

בניית אתרים

תוכן עניינים

אנשים עם לקות ראייה לא יקנו באינטרנט במקום שבו אתר אינטרנט לא מיועד עבורם. כתוצאה מכך, העסק מפסיד לקוחות ורווחים. עקבו אחר מספר כללים ותוכלו להפוך את האתר שלכם לכלל יותר וידידותי יותר לכולם.

ליותר מ-2.7 מיליון אנשים באוקראינה יש צורה כלשהי של מוגבלות, כולל לקות ראייה. אנשים אלו משתמשים גם באינטרנט, אך זקוקים לעזרים נוספים, כגון קורא מסך.

אנשים עם ליקויי ראייה זמניים עשויים גם להיאלץ להשתמש בטכנולוגיה מסייעת, או לדרוש את התאמה של האתר לצרכיהם הספציפיים. אם לא, זה מבטל אפילו יותר משתמשים.

יחד עם זאת, רוב האתרים או האפליקציות לנייד שנוצרו באוקראינה אינם מיועדים לנגישים. הסיבה לכך היא שהמפתחים לא לקחו בחשבון את הצרכים של כל מגוון המשתמשים, כולל אנשים עם ליקויי ראייה.

מהן הבעיות הנפוצות ביותר במהלך פיתוח ועיצוב האתר, וכיצד הופכים את השימוש בפלטפורמה שלכם לנוח עבור משתמשים לקויי ראייה? אספנו כמה מהטיפים שהציג המומחה רוסלן איסקוב במהלך הסדנה "איך הופכים עבודה מכילה בעולם הדיגיטלי?" מאורגן על ידי UNDP באוקראינה בתמיכת משרד הטרנספורמציה הדיגיטלית של אוקראינה ב-10 באוגוסט 2021.

כללים אלה יעזרו לך להימנע מטעויות הנגישות הנפוצות ביותר ולהפוך את האתר שלך לנגיש יותר.

1. ראשית – הדבר החשוב ביותר

נניח שלדף יש חלק מרכזי עם התוכן הראשי, יחד עם עמודות שמאל וימין. אתה צריך לעשות את זה כך שהפוקוס ייפול תחילה במרכז, ולאחר מכן לעמודות השמאלית והימנית. כך המשתמשים יוכלו להגיע לתוכן הראשי מהר יותר.

כבר בשלב העיצוב, כדאי לברר כיצד ינוע סמן המקלדת בדף האינטרנט. קבע וציין את הסדר שבו הסמן עובר בין אלמנטים, ואת סדר האלמנטים בפריסת העמוד.

2. "ראייה ברורה"

יש לך ראייה טובה? כעת זכור כיצד חלק מהאתרים כמעט בלתי אפשריים לצפייה בסמארטפון באור שמש בהיר.

טקסט אפור על רקע שחור אינו רעיון טוב. משתמשים בעלי רמות ראייה נמוכות מאוד, כמו גם "עיוורון צבעים" (כלומר חוסר יכולת להבחין בשילובי צבעים מסוימים), מתקשים, ולפעמים בלתי אפשריים, לקרוא טקסט כאשר צבעו אינו שונה מאוד מצבע הרקע.

ודא שיש רמת ניגודיות מספקת בין הטקסט לרקע. ישנן טכניקות המאפשרות לחשב את רמת הניגודיות באמצעות נוסחה וכך להעריך האם רמה זו מספקת או לא.

כמו כן, השאר מספיק מקום פנוי בין הבלוקים והרכיבים הבודדים של דף האינטרנט כדי שהם לא "יתמזגו" זה בזה.

3. תמונות ש"מדברות"

משתמש עיוור לא יכול לראות את מה שמוצג בתמונה. קורא המסך יכול להודיע ​​למשתמש שיש תמונה בדף האינטרנט, אך הוא אינו מסוגל לזהות ולתאר אותה בעצמו.

אתה יכול (וצריך) להוסיף מה שנקרא טקסט חלופי לכל תמונה בדף האינטרנט שלך. טקסט כזה אינו מוצג חזותית, אך קורא המסך קורא אותו כך שמשתמש עיוור יוכל לדעת מה מתואר בתמונה, בתרשים או בתרשים.

הטקסט האלטרנטיבי צריך להסביר בקצרה ובאופן הולם את המהות של מה שמתואר. לדוגמה, "אישה המשתמשת במחשב נייד עם Windows 10 ו-OneDrive."

הימנע מהמילים "תמונה" ו"תמונה" בטקסט החלופי – קורא המסך יזהה את נוכחותו של אלמנט גרפי בעצמו וידווח על כך.

4. הסתר את הלא חשוב

נניח שהטקסט שלך באתר מופרד על ידי סרט ורדים – עבור תמונה כזו אתה יכול לציין את הטקסט החלופי המתאים. אבל מצד שני, לדימוי כזה אין משמעות מהותית: הוא ממלא רק תפקיד דקורטיבי ולכן אינו אינפורמטיבי.

עדיף להסתיר תמונה גרפית כזו מטכנולוגיות מסייעות. אז קורא המסך ידלג על פריט זה והמשתמש לא יבזבז את זמנו עליו.

אתה יכול להסתיר לא רק תמונות, אלא גם אלמנטים "לא חשובים" אחרים של דף אינטרנט.

5. לכל דבר יש משמעות

לכל רכיב בדף אינטרנט חייב להיות משמעות סמנטית משלו. המשמעות הסמנטית מאפשרת לך להבין מהו אלמנט מסוים בדף אינטרנט: כפתור, פריט רשימה, קישור או כותרת ברמה מסוימת.

אם, למשל, המעצב בוחר את טקסט הכותרת באופן ויזואלי (גופן גדול יותר) אך אינו מציין את המשמעות הסמנטית המתאימה לו, קורא המסך לא יזהה אותו ככותרת, אלא יתפוס אותו כטקסט רגיל.

ניתן לסמן חלקים בודדים של דף האינטרנט עם ציוני דרך. לאחר מכן, כאשר אתה מגיע לחלק מסוים באתר, קורא המסך יכול לתת לך מידע ספציפי עליו. לדוגמה – שאתה נמצא בתפריט הראשי של האתר, בעמודה השמאלית, בחלק הראשי, או בכותרת העליונה או התחתונה של דף האינטרנט. סימון סמנטי מתאים מספק מידע רב כדי להקל על הניווט.

חשוב לתת לאלמנט את המשמעות הסמנטית הנכונה שלו. יש צורך להבחין, למשל, שמדובר בכפתור, וזהו קישור, ולסמן אותם בהתאם. כפתור הוא אלמנט שמפעיל פעולה מסוימת. ואילו קישור מוביל לעמוד אחר או מקום אחר במסמך הנוכחי.

6. נקה קישורים

הטקסט של כל קישור חייב להיות ייחודי בדף אינטרנט. לדוגמה, אתר עשוי להכיל רשימה של חדשות עם כותרות והודעות, שבסופה יש קישורים "קרא במלואו". קורא המסך מאפשר לך לעבור בין קישורים או אפילו לצפות בכל הקישורים הקיימים בדף האינטרנט בבת אחת. אם הם נקראים זהה, כולם יהיו זהים עבור משתמש קורא המסך, שכן לא ברור לאיזה כותרת וחלק מהאתר הם שייכים.

הטקסט של הקישור חייב גם להגדיר בתמציתיות ובבהירות לאן הוא מוביל. קישור בשם "לחץ כאן" הוא רעיון גרוע.

7. כותרות חשובות

משתמש קורא מסך יכול לעבור בין הכותרות, ברצף, או מיד לכותרת של רמה מסוימת. זה מאפשר להם למצוא במהירות את המידע שהם צריכים בדף אינטרנט.

לכל דף אינטרנט חייב להיות כותרת עליונה אחת ויחידה אחת. כותרת כזו צריכה להיות ממוקמת מיד מול התוכן הראשי של דף האינטרנט. כאשר עוברים לכותרת כזו, המשתמש צופה מיד בתוכן הדרוש ביותר ומדלג על כל "הדברים הנוספים".

קורא המסך גם מאפשר לך לראות את כל הכותרות של דף האינטרנט בבת אחת. בעזרת קיצור מקשים מסויים, המשתמש יכול לקבל רשימה של כל הכותרות בעמוד, לפי רמתם וההיררכיה שלהם. זה מאפשר לך להבין כיצד המידע מאורגן באתר.

8. מקלדת בלבד

משתמשים לקויי ראייה אינם יכולים לראות מצביע עכבר. ולכן הם אינם יכולים להשתמש בשיטה זו של אינטראקציה עם דף האינטרנט. אבל לזכור את מיקומם של המקשים במקלדת, למעשה, לא כל כך קשה.

רוצה לבדוק אם האתר שלך נגיש? הנה המבחן הפשוט ביותר עבורך. השבת את העכבר – ואם אינך יכול לבצע פעולה באתר עם המקלדת בלבד, לא עברת את המבחן.

אבל הנה החדשות הטובות: כל אתר יכול להיות נגיש. יחד עם זאת, האתר לא יסבול בשום צורה, והעסק רק ירוויח מכך: אדם עם לקויות ראייה לא ישתמש באתר בלתי נגיש. אתה רוצה להפסיד קונה? זה תלוי בך!

מאמרים נוספים

דילוג לתוכן