קריטריון 4.1.2: שם, תפקיד, ערך רמה A

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

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

הקריטריון מחייב שלכל רכיב ממשק משתמש (User Interface Component) יהיו שלושה מרכיבים חשופים לטכנולוגיות מסייעות כגון קוראי מסך:

• שם (Name) - זיהוי טקסטואלי של הרכיב שמאפשר להבין מה הוא. למשל: "שם מלא", "שלח טופס", "פתח תפריט". השם הנגיש עשוי להגיע מתווית גלויה, מ-aria-label, מ-aria-labelledby או מהקשר HTML מתאים.
• תפקיד (Role) - הסוג הסמנטי של הרכיב: כפתור, תיבת סימון, תפריט, קישור וכדומה. כאשר משתמשים ברכיבי HTML סטנדרטיים (<button>, <input>, <a>) התפקיד מוגדר אוטומטית. לרכיבים מותאמים אישית יש לציין תפקיד ב-ARIA.
• ערך ומצב (Value / State) - המצב הנוכחי של הרכיב: מסומן או לא מסומן, פרוש או מכווץ, לחוץ, נבחר, מושבת. כל שינוי במצב חייב להיות מועבר לממשק הנגישות באופן אוטומטי.

הדרישה חלה גם על רכיבים מותאמים אישית שנבנו באמצעות <div>, <span> או רכיבי Web Components - כאשר אין סמנטיקה מובנית, יש לספקה באמצעות ARIA.

למי זה עוזר?

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

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

• השתמשו ברכיבי HTML סמנטיים (<button>, <input>, <select>, <a>) - הם חושפים תפקיד אוטומטית.
• שייכו כל שדה טופס לתווית נגישה: <label for="..."> מחובר לשדה, או aria-label, או aria-labelledby.
• לכפתורי אייקון ללא טקסט גלוי - הוסיפו aria-label שמתאר את הפעולה (למשל aria-label="סגור").
• לרכיבים מותאמים אישית שנבנו עם <div> - הגדירו role מתאים ואמצעי מחוות מקלדת, וציינו מצבים ב-aria-checked, aria-expanded, aria-selected וכדומה.
• ודאו שכל שינוי מצב (פתיחה, סגירה, סימון) מעדכן גם את תכונת ARIA המתאימה - לא רק את המראה החזותי.
• הימנעו משימוש ב-aria-hidden="true" על רכיבים שניתן לקבל להם פוקוס - הם יהפכו לבלתי נגישים.

איך בודקים?

• קורא מסך (NVDA + Firefox, VoiceOver + Safari): נווטו בין רכיבי הממשק והקשיבו - האם מוקרא שם, תפקיד ומצב עדכני לכל רכיב?
• בדיקת עץ נגישות: בדפדפן Chrome פתחו DevTools, לשונית Accessibility - בדקו שכל רכיב חושף Name ו-Role.
• כלים אוטומטיים (axe, WAVE) מזהים רכיבים ללא שם נגיש, role חסר ב-ARIA widgets, ו-label חסר לשדות טופס.
• בדיקה ידנית: לכל רכיב אינטראקטיבי - בדקו שיש לו שם ברור, שהתפקיד הסמנטי נכון ושמצבו משתנה בממשק הנגישות כאשר המשתמש מבצע פעולה.