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