קריטריון 2.5.3: תווית בשם רמה A

פרטי הקריטריון

מה דורש קריטריון 2.5.3?

הקריטריון דורש שרכיבי ממשק אינטראקטיביים שיש להם תווית טקסטואלית גלויה על המסך, יכילו את אותו טקסט גם בשם הנגיש שלהם (accessible name). השם הנגיש הוא המידע שקורא מסך מקריא ושמשמש את תוכנות בקרת קול להפעלת רכיבים.

הבעיה הנפוצה: מפתחים כותבים aria-label שאינו מכיל את הטקסט הגלוי. לדוגמה, כפתור המציג "שלח" אך עם aria-label="הגש טופס" - משתמש בקרת קול שיאמר "לחץ שלח" לא יוכל להפעיל אותו כי השם הנגיש הוא "הגש טופס".

• הטקסט הגלוי צריך להופיע בתוך השם הנגיש - לא חייב להיות זהה, אך חייב להיכלל.
• עדיף שהטקסט הגלוי יהיה התחילה של השם הנגיש (מאפשר הפעלה מהירה יותר בקרת קול).
• הקריטריון חל רק על רכיבים עם תווית גלויה - רכיבים שהשם שלהם נגזר ממקור אחר (כגון aria-labelledby) ממשיכים לפי כלל ה-accessible name calculation.

למי זה עוזר?

• משתמשי בקרת קול (כגון Dragon NaturallySpeaking) שמפעילים רכיבים בממשק על-ידי אמירת שמם - הם רואים את הטקסט הגלוי ומצפים שאמירתו תפעיל את הרכיב.
• משתמשי קורא מסך שלמדו לצפות שהשם הנגיש יתאים למה שנראה על המסך.
• משתמשים עם לקויות קוגניטיביות שמסתמכים על עקביות בין מה שנראה לבין מה שנשמע.

איך עומדים בקריטריון?

• כשמוסיפים aria-label לרכיב עם טקסט גלוי - ודאו שה-aria-label מכיל את הטקסט הגלוי.
• כשמשתמשים ב-aria-labelledby - ודאו שהיעד כולל את הטקסט הגלוי.
• לכפתורי אייקון ללא טקסט - הוסיפו שם נגיש מתאר, אך לא נדרש שיכיל טקסט גלוי (כי אין טקסט גלוי).
• בדקו כל מקום שבו aria-label שונה מהטקסט הנראה בממשק.

איך בודקים?

• בדיקה עם כלי מפתח: בדקו את ה-accessibility tree בכלי מפתח של הדפדפן - השם הנגיש של כל רכיב אינטראקטיבי צריך לכלול את הטקסט הגלוי.
• בדיקה עם קורא מסך: נווטו לכפתורים וקישורים, ובדקו שמה שמוקרא מכיל את הטקסט הנראה.
• חיפוש בקוד: חפשו aria-label ו-aria-labelledby ובדקו שהם מכילים את הטקסט הגלוי.
• כלים אוטומטיים כגון axe מזהים חלק מהמקרים, אך לא את כולם - נדרשת גם בדיקה ידנית.