מבוא לעץ הנגישות
דמיינו שאתם בונים ממשק משתמש למשתמשים של קורא מסך בלבד. כאן לא צריך ליצור ממשק משתמש חזותי בכלל, אלא רק לספק מספיק מידע שקורא המסך יוכל להשתמש בו.
מה שאתם יוצרים הוא סוג של API שמתאר את מבנה הדף, בדומה ל-DOM API, אבל אתם יכולים להסתפק בפחות מידע ובפחות צמתים, כי הרבה מהמידע הזה שימושי רק לתצוגה חזותית. הוא יכול להיראות בערך כך.
זה בעצם מה שהדפדפן מציג לקורא המסך. הדפדפן לוקח את עץ ה-DOM ומשנה אותו לצורה שמועילה לטכנולוגיה מסייעת. אנחנו קוראים לעץ הזה עץ הנגישות.
אפשר לדמיין את עץ הנגישות כמו דף אינטרנט ישן משנות ה-90: כמה תמונות, הרבה קישורים, אולי שדה וכפתור.
סריקה חזותית של דף כמו במקרה הזה נותנת לכם חוויה דומה למה שמשתמש בקורא מסך יקבל. הממשק קיים, אבל הוא פשוט וישיר, בדומה לממשק של עץ נגישות.
עץ הנגישות הוא הרכיב שרוב הטכנולוגיות המסייעות פועלות איתו. התהליך מתנהל בערך כך:
- אפליקציה (הדפדפן או אפליקציה אחרת) חושפת גרסה סמנטית של ממשק המשתמש שלה לטכנולוגיה מסייעת באמצעות API.
- הטכנולוגיה המסייעת יכולה להשתמש במידע שהיא קוראת דרך ה-API כדי ליצור ממשק משתמש חלופי. לדוגמה, קורא מסך יוצר ממשק שבו המשתמש שומע ייצוג מדובר של האפליקציה.
- הטכנולוגיה המסייעת יכולה גם לאפשר למשתמשים לבצע אינטראקציה עם האפליקציה בדרך אחרת. לדוגמה, רוב קוראי המסך מספקים הוקים שמאפשרים למשתמשים לדמות בקלות קליק בעכבר או נגיעה באצבע.
- הטכנולוגיה המסייעת מעבירה את כוונת המשתמש (כמו "לחיצה") בחזרה לאפליקציה דרך ה-API להטמעת תכונות נגישות. לאחר מכן, האפליקציה אחראית לפרש את הפעולה בצורה מתאימה בהקשר של ממשק המשתמש המקורי.
בדפדפני אינטרנט יש שלב נוסף בכל כיוון, כי הדפדפן הוא למעשה פלטפורמה לאפליקציות אינטרנט שפועלות בתוכו. לכן הדפדפן צריך לתרגם את אפליקציית האינטרנט לעץ נגישות, ולוודא שהאירועים המתאימים מופעלים ב-JavaScript על סמך פעולות המשתמש שמגיעות מהטכנולוגיה המסייעת.
אבל כל זה באחריות הדפדפן. התפקיד שלנו כמפתחי אתרים הוא פשוט להיות מודעים לכך שזה קורה, ולפתח דפי אינטרנט שמנצלים את התהליך הזה כדי ליצור חוויה נגישה למשתמשים שלנו.
כדי לעשות את זה, אנחנו מוודאים שהסמנטיקה של הדפים שלנו מבוטאת בצורה נכונה: אנחנו מוודאים שהרכיבים החשובים בדף כוללים את התפקידים, המצבים והמאפיינים הנכונים של הנגישות, ושאנחנו מציינים שמות ותיאורים נגישים. לאחר מכן, הדפדפן יכול לאפשר לטכנולוגיה המסייעת לגשת למידע הזה כדי ליצור חוויה מותאמת אישית.
סמנטיקה ב-HTML מקורי
דפדפן יכול להפוך את עץ ה-DOM לעץ נגישות כי לחלק גדול מה-DOM יש משמעות סמנטית משתמעת. כלומר, ה-DOM משתמש ברכיבי HTML מקוריים שמוכרים על ידי דפדפנים ופועלים באופן צפוי במגוון פלטפורמות. לכן, הנגישות של רכיבי HTML מקוריים כמו קישורים או כפתורים מטופלת באופן אוטומטי. אנחנו יכולים לנצל את הנגישות המובנית הזו על ידי כתיבת HTML שמבטא את הסמנטיקה של רכיבי הדף שלנו.
עם זאת, לפעמים אנחנו משתמשים ברכיבים שנראים כמו רכיבים מקוריים אבל הם לא. לדוגמה, ה"כפתור" הזה הוא לא כפתור בכלל.
אפשר ליצור אותו ב-HTML בכמה דרכים. אחת מהן מוצגת בהמשך.
<div class="button-ish">Give me tacos</div>
כשלא משתמשים ברכיב של לחצן אמיתי, לקורא המסך אין דרך לדעת על מה הוא נחת. בנוסף, נצטרך לעשות עבודה נוספת של הוספת tabindex כדי שמשתמשים שמשתמשים רק במקלדת יוכלו להשתמש בו, כי כפי שהוא מקודד עכשיו, אפשר להשתמש בו רק עם עכבר.
אפשר לתקן את זה בקלות על ידי שימוש ברכיב button רגיל במקום div.
שימוש ברכיב מקורי גם חוסך לנו את הצורך לטפל באינטראקציות עם המקלדת. ואל תשכחו שאתם לא חייבים לוותר על האפקטים החזותיים המרשימים רק בגלל שאתם משתמשים ברכיב מקורי. אתם יכולים לעצב רכיבים מקוריים כדי שהם ייראו כמו שאתם רוצים, ועדיין לשמור על הסמנטיקה וההתנהגות המשתמעות.
ציינו קודם שקוראי מסך יקריאו את התפקיד, השם, המצב והערך של רכיב. שימוש ברכיב הסמנטי הנכון מאפשר לכלול את התפקיד, המצב והערך, אבל צריך גם לוודא ששם הרכיב יהיה ניתן לגילוי.
באופן כללי, יש שני סוגים של שמות:
- תוויות גלויות, שמשמשות את כל המשתמשים כדי לשייך משמעות לרכיב, וגם
- חלופות טקסט, שמשתמשים בהן רק כשאין צורך בתווית חזותית.
ברכיבים ברמת הטקסט, אנחנו לא צריכים לעשות שום דבר, כי לפי ההגדרה יהיה בהם תוכן טקסט כלשהו. אבל ברכיבי קלט או בקרה, ובתוכן חזותי כמו תמונות, צריך לוודא שאנחנו מציינים שם. למעשה, הוספת טקסט חלופי לכל תוכן שאינו טקסט היא הפריט הראשון ברשימת המשימות של WebAIM.
אחת הדרכים לעשות זאת היא לפעול לפי ההמלצה "לשדות קלט בטפסים יש תוויות טקסט משויכות". יש שתי דרכים לשייך תווית לרכיב בטופס, כמו תיבת סימון. כל אחת מהשיטות גורמת לטקסט של התווית להפוך גם ליעד ללחיצה על תיבת הסימון, וזה שימושי גם למשתמשים בעכבר או במסך מגע. כדי לשייך תווית לרכיב, אפשר:
- מציבים את רכיב הקלט בתוך רכיב תווית
<label>
<input type="checkbox">Receive promotional offers?
</label>או
- משתמשים במאפיין
forשל התווית ומפנים אלidשל הרכיב
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
כשהתווית של תיבת הסימון מוגדרת בצורה נכונה, קורא המסך יכול לדווח שהרכיב הוא תיבת סימון, שהיא מסומנת ושהשם שלה הוא "רוצה לקבל מבצעים לקידום מכירות?".
