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