תהיתם פעם איך טכנולוגיה מסייעת, כמו קורא מסך, יודעת מה להודיע למשתמשים? התשובה היא שהטכנולוגיות האלה מסתמכות על מפתחים שמסמנים את הדפים שלהם ב-HTML סמנטי. אבל מה זה סמנטיקה, ואיך קוראי מסך משתמשים בה?
סכומים וסמנטיקה
לפני שמתחילים לסמנטיקה, כדאי להבין מונח נוסף: סכומים. כל אובייקט מציע למשתמש הזדמנות לבצע פעולה כלשהי. דוגמה קלאסית לקנקן התה:
אין צורך במדריך הפעלה של קנקן תה זה. במקום זאת, העיצוב הפיזי שלו מאפשר למשתמש לתפעל אותו. יש לו ידית, ובגלל שראיתם בעולם אובייקטים אחרים עם נקודות אחיזה דומות, אפשר להסיק איך צריך להרים אותו ולתפעל אותו.
כשאנחנו בונים ממשקי משתמש גרפיים, אנחנו משתמשים ב-CSS כדי להוסיף הרשאות ויזואליות לממשק המשתמש. לדוגמה, אפשר להטיל צללית וגבול על הלחצן כדי שייראה כמו לחצן אמיתי בעולם האמיתי.
אבל אם המשתמש לא יכול לראות את המסך, לא יוצגו לו אפשרויות ויזואליות כאלה. לכן חשוב לוודא שממשק המשתמש בנוי באופן שיכול להעביר את אותן האפשרויות האלה לטכנולוגיה המסייעת. החשיפה הלא-ויזואלית של אפשרויות האלמנט בממשק המשתמש נקראת הסמנטיקה שלו.
שימוש ב-HTML סמנטי
הדרך הקלה ביותר להעביר סמנטיקה נכונה היא להשתמש ברכיבי HTML עשירים מבחינה סמנטית.
באמצעות CSS ניתן לסגנן את הרכיבים <div> ו-<button> כך שיציגו את אותם אפשרויות חזותיות, אבל שתי החוויות שונות מאוד כאשר משתמשים בקורא מסך.
<div> הוא רק רכיב קיבוץ כללי, כך שקורא מסך מכריז רק על תוכן הטקסט של <div>.
מקרא ל<button> כ"לחצן", אות ברור הרבה יותר למשתמשים שיש להם אפשרות אינטראקציה איתו.
הפתרון הפשוט ביותר לבעיה הזו, ולרוב גם הטוב ביותר, הוא להימנע לגמרי מאמצעי בקרה אינטראקטיביים מותאמים אישית.
לדוגמה, מחליפים <div> שפועל כמו לחצן ב-<button> בפועל.
מאפיינים סמנטיים ועץ הנגישות
באופן כללי, לכל רכיב HTML יש כמה מהמאפיינים הסמנטיים הבאים:
- תפקיד או סוג
- שם
- ערך (אופציונלי)
- state (אופציונלי)
תפקיד רכיב מתאר את הסוג שלו, לדוגמה, "לחצן", "קלט" או אפילו
"קיבוץ" לפריטים כמו div ו-span.
השם של אלמנט הוא התווית המחושבת שלו. בדרך כלל, קוראי מסך מקריאים את שם האלמנט ולאחר מכן את התפקיד שלו, למשל 'הרשמה, לחצן'. האלגוריתם
שמגדיר את שם האלמנט. למשל, אם יש תוכן
טקסט בתוך האלמנט, האם יש לו מאפיינים כמו title
או placeholder, אם האלמנט משויך לאלמנט <label> בפועל ואם יש לאלמנט מאפייני ARIA כמו
aria-label ו-aria-labelledby.
לחלק מהרכיבים עשויים להיות ערך. לדוגמה, יכול להיות של-<input type="text">
ערך שמשקף את מה שהמשתמש הקליד בשדה הטקסט.
לרכיבים מסוימים עשויים להיות גם state, שמשקף את הסטטוס הנוכחי שלהם.
לדוגמה, רכיב <select> יכול להיות במצב מורחב או מכווץ, בהתאם להיקף פתוח או סגור.
עץ הנגישות
לגבי כל צומת ב-DOM, הדפדפן קובע אם הצומת 'מעניין' מבחינה סמנטית ומוסיף אותו לעץ הנגישות. כשטכנולוגיה מסייעת, כמו קורא מסך, מספקת למשתמש ממשק משתמש חלופי, לרוב היא עושה זאת בהליכה בעץ הנגישות.
בעזרת כלי הפיתוח של Chrome אפשר לבדוק את המאפיינים הסמנטיים של רכיב ולבחון את המיקום שלו בעץ הנגישות.
השלבים הבאים
אחרי שיודעים קצת על סמנטיקה ואיך היא עוזרת לנווט בקורא מסך, אי אפשר שלא לבחון את הדפים שנוצרים בצורה שונה. בקטע הבא ניקח צעד לאחור ונשקול כיצד ניתן להשתמש בקווי מתאר של הדף כולו באמצעות כותרות וציוני דרך אפקטיביים.