קריטריון 2.4.4: מטרת הקישור (בהקשר) רמה A
בקצרה
קריטריון 2.4.4 מטרת הקישור (בהקשר) (Link Purpose (In Context), רמה A) דורש שמטרתו של כל קישור תהיה ברורה מתוך טקסט הקישור עצמו או מהקשרו הישיר. קישורים כמו "לחצו כאן" ו"קרא עוד" ללא הקשר מספק אינם עומדים בדרישה. זהו קריטריון מחייב לפי ת"י 5568.
פרטי הקריטריון
| מספר | 2.4.4 |
|---|---|
| שם | מטרת הקישור (בהקשר) (Link Purpose (In Context)) |
| רמה | A |
| גרסה | WCAG 2.0 |
| עיקרון | 2 - ניתן לתפעול (Operable) |
| הנחיה | 2.4 - ניווט |
| מחייב לפי ת"י 5568 | כן |
מה דורש קריטריון 2.4.4?
הקריטריון דורש שמטרת כל קישור תהיה ניתנת לקביעה מתוך טקסט הקישור לבדו, או מתוך ההקשר הישיר שלו. ההקשר הישיר מוגדר כ:
- המשפט שבו הקישור נמצא
- תא הטבלה (
<td>) שבו הקישור מופיע, כולל כותרת העמודה המשויכת אליה - פריט הרשימה שבו הקישור נמצא
- הכותרת (h1-h6) שמעל הקישור (כאשר הם קשורים פרוגרמטית)
בעיות נפוצות: קישורים המכילים רק "לחצו כאן", "כאן", "קרא עוד", "פרטים נוספים" - בלי שהטקסט שסביבם מספק הקשר ברור. גם קישורים זהים שמובילים ליעדים שונים הם בעייתיים.
למי זה עוזר?
משתמשי קורא מסך נוהגים לנווט מקישור לקישור (באמצעות מקש K או רשימת קישורים) מבלי לקרוא את הטקסט שסביבם - לכן טקסט הקישור חייב להיות עצמאי ומשמעותי. הקריטריון מסייע גם לאנשים עם לקויות קוגניטיביות הזקוקים לשמות קישורים ברורים וחד-משמעיים, ולמשתמשים עם ליקויי ראייה הסורקים את הדף חזותית.
איך עומדים בקריטריון?
- כתבו טקסט קישור תיאורי שמסביר לאן הוא מוביל: "לקריאת מדיניות הפרטיות" במקום "לחצו כאן".
- הימנעו מקישורים מרובים עם טקסט זהה המובילים ליעדים שונים באותו עמוד.
- אם נדרש עיצוב קצר (כמו "קרא עוד"), הוסיפו טקסט מוסתר חזותית בתוך הקישור:
<span class="visually-hidden"> על מדיניות הפרטיות</span>. - אפשר להשתמש ב-
aria-labelעל הקישור כדי לספק שם נגיש מלא שונה מהטקסט הנראה. - לקישורי תמונות - ודאו שה-
altמתאר את יעד הקישור ולא רק את תוכן התמונה.
טיפ
בדקו עם כלי "רשימת קישורים" בקורא מסך (ב-NVDA: Insert+F7) - האם כל קישור מובן כשרואים אותו מחוץ להקשר? אם לא - שנו את הניסוח.
איך בודקים?
- בדיקה ידנית: עברו על כל הקישורים בעמוד ובדקו אם כל אחד מובן מתוכו עצמו.
- קורא מסך: פתחו את רשימת הקישורים (NVDA: Insert+F7, JAWS: Insert+F7, VoiceOver: VO+U) ובדקו שכל קישור ברור ברשימה.
- חפשו בקוד את המחרוזות "לחצו כאן", "כאן", "קרא עוד", "פרטים" - וודאו שיש להם הקשר או
aria-labelמספק. - כלים אוטומטיים כמו axe מזהים חלק מהמקרים, אך רוב הבעיות דורשות בדיקה אנושית.
שאלות נפוצות
מה דורש קריטריון 2.4.4?
הקריטריון דורש שמטרתו של כל קישור תהיה ברורה מתוך טקסט הקישור עצמו, או מתוך הקשרו הישיר - כמו הפסקה שבה הוא נמצא, כותרת הרשימה, או תגית td שאליה הוא שייך. קישורים כמו "לחצו כאן" או "קרא עוד" ללא הקשר מספק - אינם עומדים בקריטריון.
מהי רמת הקריטריון 2.4.4?
רמה A - הרמה הבסיסית ביותר. הקריטריון נכלל ב-WCAG 2.0 ולכן הוא מחייב לפי ת"י 5568.
איך מתקנים קישורי "קרא עוד" שאינם עומדים בקריטריון 2.4.4?
ניתן להוסיף טקסט מוסתר חזותית בתוך הקישור עצמו באמצעות span עם class visually-hidden, למשל: "קרא עוד על הנגשת אתרי ממשלה". חלופה נוספת היא שימוש ב-aria-label על הקישור עם תיאור מלא של היעד.
מקורות
- W3C - Understanding SC 2.4.4 Link Purpose (In Context) (w3.org/WAI)
- W3C - How to Meet WCAG (Quick Reference) (w3.org/WAI/quickref)
צריכים לעמוד בקריטריון הזה באתר שלכם?
ראו את המדריך המעשי להטמעה, או בדקו את האתר מול הצ'ק-ליסט.
לצ'ק-ליסט הנגישות