ARIA בנגישות: מתי צריך אותה, מה המאפיינים עושים, וממה להיזהר

ARIA בנגישות היא קבוצה של מאפיינים שמוסיפים לקוד HTML כדי להסביר לתוכנה להקראת מסך מה רכיב הוא, מה המצב שלו ומה הוא עושה. למשל: שזה תפריט נפתח, שהוא פתוח עכשיו, או שהכפתור עם האייקון הוא "חיפוש". ARIA לא משנה את מה שרואים על המסך ולא מוסיפה התנהגות. הכלל הראשון שלה: אם יש תגית HTML שעושה את העבודה, משתמשים בה, ולא ב-ARIA.

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

מתי צריך ARIA בנגישות, ומתי לא

• לא צריך: כשיש תגית מתאימה. כפתור הוא button, קישור הוא a, אזור ראשי הוא main, תפריט ניווט הוא nav. הן כבר מוקראות נכון.
• צריך: כשבונים רכיב שאין לו תגית HTML: לשוניות, תפריט נפתח, אקורדיון, חלון קופץ מותאם.
• צריך: כשמצב משתנה בלי טעינת עמוד: תפריט נפתח, שדה עם שגיאה, הודעה שמופיעה.
• צריך: כשלכפתור אין טקסט גלוי, רק אייקון.

המאפיינים הנפוצים, ומה הם עושים באמת

מאפיין	מה הוא עושה	טעות נפוצה
aria-label	נותן שם לרכיב, למשל לכפתור עם אייקון בלבד	לכתוב שם שונה מהטקסט הגלוי, ואז מי שמשתמש בפקודות קוליות לא מצליח להפעיל
aria-labelledby	משתמש בטקסט קיים בעמוד כשם של הרכיב	להפנות ל-id שלא קיים
aria-describedby	מוסיף הסבר, למשל הודעת שגיאה לשדה	להשתמש בו במקום תווית
aria-expanded	אומר אם תפריט או אקורדיון פתוח או סגור	לא לעדכן את הערך כשהמצב משתנה
aria-hidden="true"	מסתיר רכיב מהתוכנה להקראת מסך	להסתיר משהו שאפשר להגיע אליו במקלדת
aria-live / role="alert"	מקריא הודעה שמופיעה בלי שהמשתמש הגיע אליה	להשתמש בו לכל דבר, ואז הכל מוקרא בכל רגע
role="dialog" עם aria-modal	מסמן חלון קופץ	לא להעביר את הפוקוס לחלון ולא להחזיר אותו בסגירה

Landmarks: אזורים בעמוד

מי שמשתמש בתוכנה להקראת מסך יכול לקפוץ בין אזורים בעמוד. האזורים מוגדרים בתגיות, או ב-role כשאין ברירה:

• header (או role="banner"): ראש העמוד.
• nav (role="navigation"): תפריט ניווט. אם יש כמה, נותנים לכל אחד שם.
• main (role="main"): התוכן הראשי. פעם אחת בעמוד.
• footer (role="contentinfo"): כותרת תחתונה עם מידע על האתר.
• role="search": אזור החיפוש.

על התפריט עצמו, ואיך ARIA עוזרת לתפריט נפתח, כתבתי במאמר איך מנגישים תפריטים.

3 מאפיינים שכדאי להיזהר מהם

• role="application". מבטל את רוב קיצורי המקלדת של התוכנה להקראת מסך באזור. מתאים רק לאפליקציה מורכבת שמנהלת את כל המקלדת בעצמה. כמעט אף פעם לא באתר רגיל.
• role="presentation" (או none). מבטל את המשמעות של התגית. בטבלה שמשמשת רק לעימוד זה בסדר. בטבלת נתונים זה מוחק את הכותרות.
• aria-hidden על אזור שלם. אם יש בתוכו קישור או כפתור, המשתמש במקלדת מגיע אליו, והתוכנה להקראת מסך לא אומרת כלום.

וגם שפה

ARIA לא מגדירה שפה. את זה עושה המאפיין lang בתגית html, ובכל קטע בשפה אחרת. בלי זה, התוכנה להקראת מסך מקריאה עברית במבטא אנגלי, או להפך. פירטתי במאמר הגדרת שפת האתר.

שורה תחתונה

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

שאלות נפוצות על ARIA