סמנטיקה וניווט בתוכן

תפקיד הסמנטיקה בניווט בדפים

Alice Boxhall

Dave Gash

Meggin Kearney

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

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

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

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

שימוש יעיל בכותרות

קודם נחזור על נקודה קודמת: סדר DOM חשוב, לא רק עבור סדר המיקוד, אלא הסדר של קורא המסך. במהלך ניסויים עם קוראי מסך כמו VoiceOver, NVDA, JAWS ו-ChromeVox, יופיעו רשימת הכותרות הבאה את הסדר של ה-DOM ולא את הסדר החזותי.

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

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

• 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 שחוזרים על עצמם, לספק דרך ברורה ותיאורית יותר כדי לבטא את מבנה הדף באופן אינטואיטיבי הן לכותבים וגם לקוראים.