תפקיד הסמנטיקה בניווט בדפים
למדתם על תנאים, סמנטיקה ועל האופן שבו טכנולוגיות מסייעות משתמשות בעץ הנגישות כדי ליצור חוויית משתמש חלופית למשתמשים. אפשר לראות שכתיבה של HTML סמנטי עם הרבה הבעה משפרת את הנגישות הרבה במאמץ קטן, כי לרכיבים רגילים רבים יש גם סמנטיקה וגם התנהגות תומכת.
בשיעור הזה נעסוק בסמנטיקה פחות ברורה, שחשובה מאוד למשתמשים בקורא מסך, במיוחד בכל הנוגע לניווט. בדף פשוט עם הרבה פקדים אבל לא הרבה תוכן, קל לסרוק את הדף כדי למצוא את מה שאתם צריכים. אבל בדף עשיר בתוכן, כמו ערך בוויקיפדיה או אתר אגרגטור של חדשות, לא מעשי לקרוא את כל המידע מלמעלה למטה. אתם צריכים דרך לנווט ביעילות בתוכן.
מפתחים חוששים בדרך כלל שקוראי מסך מעייפים ואיטיים להשתמש בהם, או שקורא המסך צריך להתמקד בכל התוכן במסך כדי שקורא המסך יוכל למצוא אותו. לרוב זה לא נכון.
לרוב, משתמשים בקוראי מסך מסתמכים על רשימה של כותרות כדי לאתר מידע. לרוב קוראי המסך יש דרכים קלות לבודד ולסרוק רשימה של כותרות דפים, תכונה חשובה שנקראת החוגה. כעת נראה כיצד נוכל להשתמש בכותרות HTML באופן יעיל כדי לתמוך בתכונה הזו.
שימוש יעיל בכותרות
קודם נחזור על נקודה קודמת: ענייני סדר DOM, לא רק לסדר המיקוד אלא לסדר של קורא המסך. כשעורכים ניסויים בקוראי מסך כמו VoiceOver, NVDA, JAWS ו-ChromeVox, רשימת הכותרות מופיעה לפי סדר ה-DOM ולא לפי הסדר החזותי.
הדבר נכון לגבי קוראי מסך באופן כללי. מכיוון שקוראי מסך מקיימים אינטראקציה עם עץ הנגישות ועץ הנגישות מבוסס על עץ ה-DOM, הסדר שקורא המסך קולט מבוסס לכן ישירות על סדר ה-DOM. כלומר, מבנה מתאים של כותרת חשוב יותר מתמיד.
ברוב הדפים הבנויים היטב, רמות הכותרת מוצבות כדי לציין קשרים של הורה-ילד בין בלוקי תוכן. רשימת המשימות של WebAIM מתייחסת שוב ושוב לשיטה הזו.
- 1.3.1 אזכור של 'תגי עיצוב סמנטיים משמשים לסיווג כותרות'
- 2.4.1 מאזכרת את מבנה הכותרת כשיטה לעקיפת בלוקים של תוכן
- 2.4.6 מפרט כמה פרטים על כתיבת כותרות שימושיות
- 2.4.10 מגדיר "קטעי תוכן בודדים מוקצים באמצעות כותרות, היכן שהדבר מתאים".
לא כל הכותרות צריכות להיות גלויות במסך. ויקיפדיה, למשל, משתמשת בטכניקה שמציבה כותרות מסוימות מחוץ למסך בכוונה תחילה כדי להפוך אותן לנגישות רק לקוראי מסך ולטכנולוגיות מסייעות אחרות.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
באפליקציות מורכבות, זו דרך טובה לכלול כותרות אם אין צורך בעיצוב חזותי או שיש בו מקום להצגת כותרת.
אפשרויות ניווט נוספות
דפים עם כותרות טובות עוזרים למשתמשים בקורא מסך לנווט, אבל יש רכיבים נוספים שאפשר להשתמש בהם כדי לנווט בדף, כולל קישורים, פקדי טפסים וכתובות יעד.
הקוראים יכולים להשתמש בחוגה של קורא המסך (דרך קלה לבודד ולסרוק רשימה של כותרות דפים) כדי לגשת לרשימת קישורים בדף. לפעמים, כמו בוויקי, קיימים קישורים רבים, ולכן הקורא עשוי לחפש מונח בתוך הקישורים האלה. פעולה זו מגבילה את ההיטים לקישורים שמכילים בפועל את המונח, ולא לכל מופע של המונח בדף.
התכונה הזו מועילה רק אם קורא המסך יכול למצוא את הקישורים, ולטקסט הקישור יש משמעות. לדוגמה, הנה כמה דפוסים נפוצים שמקשים על איתור קישורים.
- תגי עוגן ללא מאפייני
href. יעדי הקישור האלה משמשים לעיתים קרובות באפליקציות של דף יחיד, והם גורמים לבעיות בקוראי מסך. קראו עוד במאמר הזה על אפליקציות בדף יחיד. - לחצנים שמוטמעים עם קישורים. הפעולות האלה גורמות לקורא המסך לפרש את התוכן כקישור, והפונקציונליות של הלחצן אבדה. במקרים כאלה, צריך להחליף את תג העוגן בלחצן אמיתי ולעצב אותו בהתאם.
- תמונות שמשמשות כתוכן של קישורים. לפעמים אי אפשר להשתמש בתמונות מקושרות
לקוראי מסך. כדי להבטיח שהקישור ייחשף באופן תקין לטכנולוגיה מסייעת, צריך לוודא שבתמונה יש טקסט של מאפיין
alt.
טקסט לא טוב של קישור הוא בעיה אחרת. טקסט שניתן ללחוץ עליו כמו "למידע נוסף" או "לחצו כאן" אינו מספק מידע סמנטי לגבי המיקום של הקישור. במקום זאת, כדאי להשתמש בטקסט תיאורי כמו "למידע נוסף על עיצוב רספונסיבי" או "לצפייה במדריך הזה על קנבס" כדי לעזור לקוראי המסך לספק הקשר משמעותי לגבי קישורים.
החוגה יכולה גם לאחזר רשימה של בקרות טופס. באמצעות הרשימה הזו, קוראים יכולים לחפש פריטים ספציפיים ולעבור אליהם ישירות.
שגיאה נפוצה בקוראי מסך היא הגייה. לדוגמה, קורא מסך יכול לבטא את "Udacity" כ-"oo-dacity", לקרוא מספר טלפון כמספר שלם גדול או לקרוא טקסט באותיות רישיות כאילו זה ראשי תיבות. באופן מעניין, משתמשים בקורא מסך רגילים למדי לתופעה הזו ולוקחים אותה בחשבון.
חלק מהמפתחים מנסים לפתור את הבעיה על ידי הצגת טקסט שמאוית באופן פונטי, לקורא מסך בלבד. הנה כלל פשוט לאיות פונטי: לא לעשות את זה; הוא רק מחמיר את הבעיה! לדוגמה, אם המשתמש משתמש בצג ברייל, האיות של המילה לא יהיה נכון, וזה עלול להוביל לבלבול נוסף. קוראי מסך מאפשרים לאיית מילים בקול, כך שחשוב להשאיר את הקריאה לקורא לשלוט בחוויה שלהם ולהחליט מתי יש צורך.
הקוראים יכולים להשתמש בחוגה כדי להציג רשימת יעדים. הרשימה הזו עוזרת לקוראים למצוא את התוכן העיקרי וקבוצת ציוני דרך לניווט שסופקו על ידי רכיבים של תגי HTML.
ל-HTML5 נוספו כמה רכיבים חדשים שעוזרים להגדיר את המבנה הסמנטי של הדף, כולל header, footer, nav, article, section, main ו-aside. האלמנטים האלה מספקים באופן ספציפי רמזים מבניים בדף, בלי לאלץ סגנון מובנה (צריך לעשות זאת עם CSS בכל מקרה).
אלמנטים מבניים סמנטיים מחליפים בלוקים div מרובים שחוזרים על עצמם, ומספקים דרך ברורה ותיאורית יותר לבטא באופן אינטואיטיבי את מבנה הדף, גם למחברים וגם לקוראים.