עץ הנגישות

מבוא לעץ הנגישות

Alice Boxhall

Dave Gash

Meggin Kearney

נניח שאתם מפתחים ממשק משתמש רק למשתמשים בקורא מסך. כאן אין צורך ליצור ממשק משתמש חזותי בכלל, אלא רק לספק מספיק מידע שקורא המסך יכול להשתמש בו.

מה שאתם יוצרים הוא מעין API שמתאר את מבנה הדף, ל-DOM API, אבל אפשר להתחמק עם פחות מידע ופחות צמתים, כי הרבה מהמידע הזה שימושי רק להצגה חזותית. הוא יכול להיראות בערך כך.

זה למעשה מה שהדפדפן מציג לקורא המסך. שהדפדפן לוקח את עץ ה-DOM ומשנה אותו לצורה שמועילה טכנולוגיה מסייעת. אנחנו מתייחסים לעץ החדש הזה בתור הנגישות עץ.

אפשר להמחיש את עץ הנגישות כך שנראה קצת כמו דף אינטרנט ישן משנות ה-90: כמה תמונות, הרבה קישורים, אולי שדה ולחצן.

סריקה חזותית של דף כמו במקרה הזה נותנת לך חוויה שדומה לזו מה היה מקבל משתמש בקורא מסך. הממשק קיים, אבל הוא פשוט ישירה, בדומה לממשק עץ הנגישות.

עץ הנגישות הוא המקום שבו רוב הטכנולוגיות המסייעות נמצאות באינטראקציה. זרימה קדימה, בערך כך.

1. אפליקציה (הדפדפן או אפליקציה אחרת) חושפת גרסה סמנטית של ממשק משתמש לטכנולוגיה מסייעת באמצעות ממשק API.
2. הטכנולוגיה המסייעת עשויה להשתמש במידע שהיא קוראת דרך ה-API כדי ליצור מצגת חלופית של ממשק משתמש למשתמש. לדוגמה, קורא מסך יוצר ממשק שבו המשתמש שומע דיבור ייצוג בווקטור של האפליקציה.
3. הטכנולוגיה המסייעת עשויה גם לאפשר למשתמש ליצור אינטראקציה עם האפליקציה בדרך אחרת. לדוגמה, רוב קוראי המסך מספקים קטעי הוק (hooks) שמאפשרים משתמש כדי לדמות בקלות לחיצות על העכבר או הקשה באצבע.
4. הטכנולוגיה המסייעת מעבירה את כוונת המשתמש (למשל "קליק") אל את האפליקציה באמצעות ממשק ה-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>

כשתיבת הסימון מסומנת בצורה נכונה, קורא המסך יכול לדווח על זה לרכיב יש תפקיד של תיבת סימון, הוא במצב מסומן ונקרא 'קבלה' שוברי פרסום?".