זיהוי בסיסי של כפתורים וקישורים
- סוג הרכיב – כפתור, קישור
- כאשר לחצן מוגדר באופן לא תיקני, טכנולוגיות מסייעות לא יידעו לזהות את סוג הרכיב
- כאשר כפתור כולל תווית, טכנולוגיות מסייעות יידעו לזהות את התווית
- טכנולוגיות מסייעות לנגישות מסוגלות לזהות קישורים הכוללים טקסט המתאר את הקישור ב href או כטקסט חלופי לתמונת קישור.
מקרים שבהם לחצנים אינם מזוהים לטכנולוגיות מסייעות
- כאשר כפתורים וקישורים שהוגדרו כ div או span
- הם אינם מזוהים לטכנולוגיות מסייעות
- ניתן להגדיר אותם ככפתורים או קישורים סטנדרטיים
- או לחלופין להשתמש בטכניקות ARIA מתאימות כגון aria-label או role=link או role=button
מקרים שבהם אלמנט אחד מזוהה עם שני תפקידים
- לעיתים נוהגים להגדיר לחצנים ככפתורים וכקישורים וזה עשוי לבלבל משתמשי טכנולוגיות מסייעות. כך שאם משתמש בתוכנה לשליטה קולית, מבקש ללחוץ על קישור, התוכנה לא בהכרח תדע לבצע את הפעולה שכן הלחצן הוא גם קישור וגם כפתור.
- לכן כאשר כפתור נועד לבצע פעולה כגון פתיחת פופאפ, ביצוע פעולת רכישה, שליחה וכד', יש להגדיר את הלחצן ככפתור button
- כאשר לחצן משמש להעברה לעמוד חדש, או שלחיצה עליו משנה את תוכן העמוד, נהוג להגדיר כקישור
- לעיתים ישנם אייקונים מסוג קישורים כגון אייקונים לרשתות חברתיות. במקרים אלו ניתן להגדיר להם aria-label כך שהם יהיו מזוהים ככפתורים לטכנולוגיות מסייעות.
עוד דגשים על כפתורים
- לכל הכפתורים הכוללים טקסט, לרבות פריטים בתפריט שהוגדרו ככפתורים, כגון "המשך", "כן", יש לוודא ששם הכפתור לטכנולוגיה מסייעת לא יכלול מלל נוסף למעט זה המוצג בטקסט הכפתור. לדוגמה, הטקסט בכפתור מוצג כ"כן" ובנוסף מוסיפים טקסט נסתר רק למשתמשי תוכנות קוראות מסך, עם מלל נוסף כגון "לחיצה על ENTER תעביר לשלב הבא".
- הטקסט בכפתור צריך לעמוד ביחס ניגוד מינימום בין צבע טקסט לצבע רקע
- לכפתורים אין להגדיר טקסט נסתר נוסף. קיימת כוונה טובה של מתכנתים להוסיף מידע עודף, אשר לדעתם יסייע למשתמשי תוכנות קוראות מסך. לדוגמה "לחץ ENTER לסגירת החלון". אין בכך צורך מאחר ומשתמשי תוכנות קוראות מסך המגיעים לכפתורים אלו שיש להם תווית "סגור" יודעים את משמעות הכפתור והתווית בדוגמה זו -סגור.
- כפתורים שהם אייקונים ללא טקסט, שכוללים תמונה או תווים ב Unicode, כגון כפתור "סגור", "מחיקה", נהוג להסתיר את התמונה עם alt ריק ו span עם המאפיין aria-hidden=tru שעוטף תווים גראפיים ב Unicode ולהגדיר ב aria-label עם שם קצר ותכליתי בתווית
- כפתור שיש לו שני מצבים "נבחר ולא נבחר. לדוגמה כאשר מוצגות מס' תוספות לבחירה והמשתמש יכול לבחור יותר מאפשרות אחת, ניתן להגדיר עם מפרט aria-pressed
- כפתור לא פעיל נהוג להגדיר עם מפרט aria-disabled או ב html סטנדרטי
- אין להסתיר כפתורים פונקציונליים באמצעות aria-hidden)
- תפעול כפתורים צריך להתאפשר בלחיצת ENTER ומקש הרווח – כלומר, לא להגביל את המימוש למצב אחד
- כל מרכיב אינטראקטיבי לרבות כפתורים (קישורים ופקדי טפסים נוספים), צריכים לקבל אפקט ויזואלי. הפוקוס הוויזואלי יתקבל רק כאשר משתמש מקלדת (עם וללא קורא מסך) יגיע למרכיב אינטראקטיבי. כלומר האפקט הוויזואלי יהיה רק בניווט מקלדת.
- 4.7 Focus Visible AA
- a11y_styled_form_controls
- כפתורים הניתנים להרחבה וכיווץ יש להגדיר עם מפרט aria-expanded
- הניווט בין כל הכפתורים והמרכיבים הפעילים והאינטראקטיביים כגון קישורים צריך להיות בהתאם לסדר בו הם מוצגים על גבי המסך.
הפניות
Using the link role – Accessibility | MDN