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