יצירת כפתור נגיש נשמעת כמו הדבר הכי פשוט באתר, ובכל זאת כפתורים הם מהליקויים הנפוצים שאני מוצא בבדיקות. הסיבה: הרבה כפתורים הם בכלל לא כפתורים בקוד. אלה div או span שמישהו עיצב, ועכבר יכול ללחוץ עליהם. מקלדת וקורא מסך לא יכולים.
כפתור או קישור?
| כפתור | קישור | |
|---|---|---|
| מה הוא עושה | פעולה בעמוד: שליחה, פתיחה, סגירה, הוספה לסל | מעבר לעמוד או למקום אחר |
| מה קורא המסך אומר | "כפתור" | "קישור" |
| איך מפעילים במקלדת | Enter או רווח | Enter |
| תגית HTML | <button> | <a href> |
הכלל: אם זה מוביל לכתובת אחרת, זה קישור. אם זה עושה משהו, זה כפתור. משתמש קורא מסך מחליט מה לעשות לפי מה שהוא שומע, אז ההבדל חשוב.
5 כללים ליצירת כפתור נגיש
- תגית button אמיתית. היא מקבלת פוקוס, מופעלת ב-Enter וברווח, ומוכרזת ככפתור, בלי קוד נוסף.
- שם נגיש. כפתור עם טקסט, השם שלו הוא הטקסט. כפתור שהוא רק אייקון (X, פח, חץ) צריך aria-label, למשל "סגירת החלון". tooltip עם title לא מספיק, כי לא כל קוראי המסך מקריאים אותו.
- פוקוס נראה לעין. מסגרת ברורה כשמגיעים אליו ב-Tab. לא מוחקים את ה-outline בלי להחליף אותו במשהו בולט.
- מצב מוכרז. כפתור שפותח תפריט מכריז אם התפריט פתוח (aria-expanded). כפתור מתג מכריז אם הוא לחוץ.
- גודל וניגודיות. יעד לחיצה שאפשר ללחוץ עליו גם ברעד או בנייד, וגבול או רקע שנראים מול הרקע.
הכפתורים באתר שלכם עוברים את הבדיקה?
נבדוק את הרכיבים באתר ונחזיר רשימה עם תיקון לכל אחד.
הבדיקה של 30 שניות
הניחו את העכבר בצד. הגיעו לכפתור עם Tab: רואים איפה הפוקוס? לחצו Enter, ואחר כך רווח: הכפתור עובד? אם יש לכם קורא מסך, האזינו: אתם שומעים שם ברור ואת המילה "כפתור"? כפתור שנכשל באחד מאלה נכנס לרשימת הרכיבים הלא נגישים באתר. אותו היגיון חל גם על כפתור "דלג לתוכן", שמוסבר במנגנון מעקף בלוקים.
לצוותי פיתוח ועיצוב אנחנו מעבירים הדרכות על רכיבים כאלה, כדי שהם ייבנו נכון מההתחלה. לבדיקה ולתיקון באתר קיים, ראו את עמוד הנגשת אתרים.
שאלות נפוצות על יצירת כפתור נגיש
מה ההבדל בין כפתור לקישור?
כפתור מבצע פעולה בעמוד. קישור מוביל לכתובת אחרת.
אפשר לעצב div ככפתור?
אפשר, אבל אז צריך להוסיף לו בעצמכם פוקוס, הפעלה מהמקלדת ותפקיד. עדיף להשתמש ב-button.
מה כותבים ב-aria-label של כפתור X?
את הפעולה, למשל "סגירת החלון". לא "X".
title מספיק לכפתור אייקון?
לא. לא כל קוראי המסך מקריאים אותו, ובמקלדת ובמסך מגע לא רואים אותו.
איך בודקים כפתור?
מגיעים אליו ב-Tab, מפעילים ב-Enter וברווח, ומאזינים עם קורא מסך.
מומחה להנגשת אתרי אינטרנט וקצין הגנת פרטיות מוסמך (DPO). מעל 9 שנות ניסיון בליווי ארגונים לעמידה בתקנות הנגישות, ת"י 5568 ובחוק הגנת הפרטיות.
חושבים שהאתר שלכם חשוף?
אל תישארו עם התחושה. שלחו כתובת אתר ונחזור אליכם עם תמונת מצב ראשונית, בלי התחייבות.