תפקיד הסמנטיקה בניווט בדפים
למדתם על מחירים, סמנטיקה ועל האופן שבו טכנולוגיות מסייעות משתמשות בעץ הנגישות כדי ליצור חוויית משתמש חלופית למשתמשים שלהן. כפי שאפשר לראות, כתיבת HTML סמנטית ועשירה מאפשרת לכם לשפר את הנגישות במאמץ קטן מאוד, כי לרכיבים סטנדרטיים רבים יש גם את הסמנטיקה וגם את ההתנהגות התומכת מובנית.
בשיעור הזה נדון בסמנטיקה פחות מובנת שחשובה מאוד למשתמשים בקורא מסך, במיוחד בנוגע לניווט. בדף פשוט עם הרבה אמצעי בקרה אבל לא הרבה תוכן, קל לסרוק את הדף כדי למצוא את מה שדרוש לכם. אבל בדף עמוס בתוכן, כמו ערך ויקיפדיה או אתר אגרגטור של חדשות, לא מעשי לקרוא את כל המידע מההתחלה ועד הסוף; נדרשת דרך יעילה לנווט בתוכן.
לעתים קרובות, למפתחים יש את התפיסה המוטעית ששימוש בקוראי מסך הוא איטי ומייגע, או שכל מה שמוצג במסך צריך להיות ניתן להתמקד בו כדי שקורא המסך יוכל למצוא אותו. בדרך כלל זה לא המצב.
לרוב, משתמשים בקוראי מסך נעזרים ברשימת כותרות כדי לאתר מידע. ברוב קוראי המסך יש דרכים פשוטות לבודד ולסרוק רשימה של כותרות דפים. זוהי תכונה חשובה שנקראת רוטור. נראה איך אפשר להשתמש בכותרות HTML בצורה יעילה כדי לתמוך בתכונה הזו.
שימוש יעיל בכותרות
קודם כול, נזכיר נקודה שציינו קודם: סדר ה-DOM חשוב, לא רק מבחינת סדר המיקוד אלא גם מבחינת סדר הקריאה של קורא המסך. כשתנסו קוראי מסך כמו VoiceOver, NVDA, JAWS ו-ChromeVox, תגלו שרשימה הכותרות פועלת לפי סדר DOM ולא לפי הסדר החזותי.
זה נכון לגבי קוראי מסך באופן כללי. קוראי מסך מקיימים אינטראקציה עם עץ הנגישות, ועץ הנגישות מבוסס על עץ ה-DOM. לכן, הסדר שקורא המסך תופס מבוסס ישירות על סדר ה-DOM. לכן, חשוב יותר מתמיד ליצור מבנה כותרות מתאים.
ברוב הדפים עם מבנה תקין, רמות הכותרות מוצבות כדי לציין קשרים בין הורה-ילד בין בלוקים של תוכן. רשימת המשימות של WebAIM מתייחסת שוב ושוב לשיטה הזו.
- 1.3.1 אזכורים "תגי עיצוב סמנטיים משמשים להקצאת כותרות"
- בקטע 2.4.1 מוזכר מבנה הכותרות כטכניקה לעקיפת קטעי תוכן
- בקטע 2.4.6 מוסבר איך לכתוב כותרות שימושיות
- 2.4.10 מציין ש"קטעי תוכן מסוימים מוקצים באמצעות כותרות, במקרים הרלוונטיים"
לא כל הכותרות צריכות להיות גלויות במסך. למשל, Virgin משתמשת בשיטה שמציבה כותרות מסוימות מחוץ למסך כדי שהן יהיו נגישות רק לקוראי מסך ולטכנולוגיות מסייעת אחרות.
<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.
הקוראים יכולים להשתמש בתכונת החוגה של קורא המסך (דרך קלה לבודד ולסרוק רשימה של כותרות דפים) כדי לגשת לרשימת קישורים בדף. לפעמים, כמו ב-wiki, יש קישורים רבים, כך שהקוראים עשויים לחפש מונח בתוך הקישורים. כך ניתן להגביל את ההיטים לקישורים שמכילים בפועל את המונח, ולא לכל חזרה של המונח בדף.
התכונה הזו שימושית רק אם קורא המסך יכול למצוא את הקישורים וטקסט הקישור משמעותי. לדוגמה, ריכזנו כאן כמה דפוסים נפוצים שגורמים לכך שקשה למצוא קישורים.
- תגי עוגן ללא מאפייני
href. מטרות הקישור האלה משמשות לעתים קרובות באפליקציות של דף יחיד, והן גורמות לבעיות בקוראי מסך. אפשר לקרוא מידע נוסף במאמר הזה בנושא אפליקציות בדף יחיד. - לחצנים שמופעלים באמצעות קישורים. כתוצאה מכך, קורא המסך מפרש את התוכן כקישור והפונקציונליות של הלחצן נעלמת. במקרים כאלה, צריך להחליף את תג האנקור בלחצן אמיתי ולתת לו את הסגנון המתאים.
- תמונות שמשמשות כתוכן של קישור. לפעמים קוראי מסך לא יכולים להשתמש בתמונות מקושרות שנחוצות. כדי להבטיח שהקישור יוצג בצורה תקינה לטכנולוגיה מסייעת, צריך לוודא שהתמונה כוללת טקסט של המאפיין
alt.
טקסט קישור לא טוב הוא בעיה נוספת. טקסט שניתן ללחוץ עליו, כמו 'מידע נוסף' או 'לחיצה כאן', לא מספק מידע סמנטי על היעד של הקישור. במקום זאת, כדאי להשתמש בטקסט תיאורי כמו 'מידע נוסף על עיצוב רספונסיבי' או 'המדריך הזה בנושא קנבס' כדי לעזור לקוראי המסך לספק הקשר משמעותי לגבי קישורים.
הרוטור יכול גם לאחזר רשימת אמצעי בקרה בטופס. בעזרת הרשימה הזו, הקוראים יכולים לחפש פריטים ספציפיים ולעבור אליהם ישירות.
שגיאה נפוצה של קוראי מסך היא לגבי ההגייה. לדוגמה, קורא מסך יכול לבטא את Udacity כ-oo-dacity, או לקרוא מספר טלפון כמספר שלם גדול או להשתמש באותיות רישיות כאילו מדובר בראשי תיבות. מעניין לציין שמשתמשים בקוראי מסך כבר רגילים למוזר הזה ולוקחים אותו בחשבון.
חלק מהמפתחים מנסים לשפר את המצב הזה על ידי הצגת טקסט לקורא המסך בלבד, שמפוענח באופן פונולוגי. הנה כלל פשוט לגבי איות פונולוגי: אל תעשו את זה, זה רק מחמיר את הבעיה. לדוגמה, אם משתמש משתמש בצג בריל, האיות של המילה יהיה שגוי ויגרום לבלבול נוסף. קוראי מסך מאפשרים לאיית מילים בקול, לכן משאירים את הקורא לשלוט בחוויה ולהחליט מתי צריך לעשות זאת.
הקוראים יכולים להשתמש בלחצן הרוטור כדי לראות רשימת ציוני דרך. הרשימה הזו עוזרת לקוראים למצוא את התוכן הראשי ואת קבוצת הרכיבים של הנקודות החשובות לניווט שמסופקים על ידי רכיבי הנקודות החשובות ב-HTML.
ב-HTML5 נוספו כמה רכיבים חדשים שעוזרים להגדיר את המבנה הסמנטי של הדף, כולל header, footer, nav, article, section, main ו-aside. האלמנטים האלה מספקים במיוחד רמזים מבניים בדף, בלי לאלץ סגנון מובנה כלשהו (שצריך לעשות בכל מקרה באמצעות CSS).
אלמנטים מבניים סמנטיים מחליפים כמה בלוקים של div שחוזרים על עצמם, ומספקים דרך ברורה ותיאורי יותר להביע באופן אינטואיטיבי את מבנה הדף, גם לכותבים וגם לקוראים.