קישורים וכפתורים נגישים
טקסט של קישור צריך להסביר לאן הוא מוביל, גם כשקוראים אותו לבד, כי משתמשי קוראי מסך עוברים על רשימת קישורים בלי ההקשר (סעיף 2.4.4). כפתור צריך שם נגיש שמתאר את הפעולה (4.1.2), גם כשהוא רק אייקון. והכלל הפשוט: קישור מוביל למקום אחר, כפתור עושה פעולה.
נבדק מול המקורות:
בקצרה
- 2.4.4: מטרת הקישור ברורה מהטקסט או מההקשר.
- 4.1.2: לכל רכיב יש שם ותפקיד שתוכנות עזר מזהות.
- קישור (a) לניווט, כפתור (button) לפעולה.
- כפתור אייקון צריך aria-label או טקסט מוסתר.
טקסט קישור
אם העיצוב מחייב "קראו עוד", אפשר להוסיף טקסט שרק קורא מסך שומע, אבל עדיף טקסט ברור לכולם.
| במקום | כותבים |
|---|---|
| לחצו כאן | להורדת טופס ההרשמה (PDF) |
| קראו עוד | קראו עוד על שעות הפתיחה |
| www.example.co.il/prices | המחירון שלנו |
| כאן | תקנון האתר |
כפתורי אייקון
בלי aria-label, קורא מסך יכריז רק "כפתור". אותו דבר בכפתורי סגירה (X), המבורגר, לב ושיתוף.
<button aria-label="חיפוש">
<svg aria-hidden="true">...</svg>
</button>קישור או כפתור?
- מעבר לעמוד אחר, לקובץ או לעוגן בעמוד: קישור.
- שליחת טופס, פתיחת חלון, הוספה לעגלה: כפתור.
- div עם onclick הוא לא כפתור: הוא לא מקבל מיקוד ולא מוכרז. משתמשים ב-button.
טיפ: הכלל הראשון של ARIA: אם יש תגית HTML שעושה את העבודה, משתמשים בה ולא מחקים אותה עם ARIA.
חלון חדש וקבצים
קישור שנפתח בחלון חדש, או שמוריד קובץ, כדאי לסמן בטקסט: "(נפתח בחלון חדש)", "(PDF, 2MB)". כך אף אחד לא מופתע.
שאלות נפוצות
מה רע ב"לחצו כאן"?
ברשימת קישורים של קורא מסך מופיע רק "לחצו כאן", בלי לדעת לאן. גם מנועי חיפוש מבינים פחות.
איך נותנים שם לכפתור שהוא רק אייקון?
עם aria-label על הכפתור, או טקסט מוסתר חזותית בתוכו, ומסמנים את האייקון עצמו aria-hidden.
צריך לסמן קישור שנפתח בחלון חדש?
זה לא חובה מפורשת בת"י 5568, אבל מומלץ, כי פתיחת חלון בלי אזהרה מבלבלת משתמשים רבים.
מקורות
המידע בדף מבוסס על: WCAG 2.0 (W3C, 2008) (נפתח בחלון חדש) · W3C: Using ARIA, הכלל הראשון של ARIA (נפתח בחלון חדש)