התפקיד של הסמנטיקה בניווט בדפים
למדתם על תכונות מובנות, סמנטיקה ואיך טכנולוגיות מסייעות משתמשות בעץ הנגישות כדי ליצור חוויית משתמש חלופית למשתמשים שלהן. כפי שאפשר לראות, כתיבת 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>
באפליקציות מורכבות, זו יכולה להיות דרך טובה להציג כותרות כשהעיצוב החזותי לא דורש כותרת גלויה או שאין בו מקום לכותרת כזו.
אפשרויות ניווט אחרות
דפים עם כותרות טובות עוזרים למשתמשים בקוראי מסך לנווט, אבל יש רכיבים אחרים שבהם הם יכולים להשתמש כדי לנוע בדף, כולל קישורים, פקדים בטופס ומאפייני ARIA.
הקוראים יכולים להשתמש בתכונה 'רוטור' של קורא המסך (דרך קלה לבודד ולסרוק רשימה של כותרות דפים) כדי לגשת לרשימת הקישורים בדף. לפעמים, כמו בוויקי, יש הרבה קישורים, ולכן הקורא עשוי לחפש מונח בתוך הקישורים. כך ההיטים מוגבלים לקישורים שמכילים את המונח בפועל, ולא לכל מופע של המונח בדף.
התכונה הזו שימושית רק אם קורא המסך יכול למצוא את הקישורים וטקסט הקישור משמעותי. לדוגמה, ריכזנו כאן כמה דפוסים נפוצים שגורמים לכך שקשה למצוא קישורים.
- תגי עוגן ללא מאפייני
href. מטרות הקישור האלה משמשות לעתים קרובות באפליקציות של דף יחיד, והן גורמות לבעיות בקוראי מסך. מידע נוסף זמין במאמר הזה על אפליקציות של דף יחיד. - לחצנים שמופעלים באמצעות קישורים. כתוצאה מכך, קורא המסך מפרש את התוכן כקישור והפונקציונליות של הלחצן נפגעת. במקרים כאלה, צריך להחליף את תג האנקור בלחצן אמיתי ולתת לו את הסגנון המתאים.
- תמונות שמשמשות כתוכן של קישור. לפעמים קוראי מסך לא יכולים להשתמש בתמונות מקושרות שנדרשות. כדי להבטיח שהקישור יוצג בצורה תקינה לטכנולוגיה מסייעת, צריך לוודא שהתמונה כוללת טקסט של המאפיין
alt.
טקסט קישור לא טוב הוא בעיה נוספת. טקסט שניתן ללחוץ עליו, כמו 'מידע נוסף' או 'לחיצה כאן', לא מספק מידע סמנטי על היעד של הקישור. במקום זאת, כדאי להשתמש בטקסט תיאורי כמו 'מידע נוסף על עיצוב רספונסיבי' או 'המדריך הזה בנושא קנבס' כדי לעזור לקוראי המסך לספק הקשר משמעותי לגבי קישורים.
הרוטור יכול גם לאחזר רשימת אמצעי בקרה בטופס. בעזרת הרשימה הזו, הקוראים יכולים לחפש פריטים ספציפיים ולעבור אליהם ישירות.
שגיאה נפוצה בקרב קוראי מסך היא שגיאה בהגייה. לדוגמה, קורא מסך עשוי להקריא את המילה 'Udacity' כ'oo-dacity', או לקרוא מספר טלפון כמספר שלם גדול, או לקרוא טקסט באותיות רישיות כאילו הוא ראשי תיבות. באופן מעניין, משתמשי קורא מסך רגילים למאפיין הזה ומביאים אותו בחשבון.
חלק מהמפתחים מנסים לשפר את המצב הזה על ידי הצגת טקסט לקורא המסך בלבד, שמפועם באופן פונולוגי. הנה כלל פשוט לגבי איות פונולוגי: אל תעשו את זה, זה רק מחמיר את הבעיה. לדוגמה, אם משתמש משתמש בצג בריל, האיות של המילה יהיה שגוי ויגרום לבלבול נוסף. קוראים מסך מאפשרים להקריא מילים באיות, לכן כדאי לאפשר לקורא לשלוט בחוויית השימוש שלו ולהחליט מתי זה נחוץ.
הקוראים יכולים להשתמש בלחצן הרוטור כדי לראות רשימת ציוני דרך. הרשימה הזו עוזרת לקוראים למצוא את התוכן הראשי ואת קבוצת הרכיבים של הניווט שמסומנים ברכיבי ARIA.
ב-HTML5 נוספו כמה רכיבים חדשים שעוזרים להגדיר את המבנה הסמנטי של הדף, כולל header, footer, nav, article, section, main ו-aside. האלמנטים האלה מספקים במיוחד רמזים מבניים בדף, בלי לאלץ סגנון מובנה כלשהו (שצריך לעשות בכל מקרה באמצעות CSS).
רכיבים מבניים סמנטיים מחליפים כמה בלוקים של div שחוזרים על עצמם, ומספקים דרך ברורה ותיאורית יותר להביע באופן אינטואיטיבי את מבנה הדף, גם לכותבים וגם לקוראים.