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