שימוש ברכיבי ה-HTML הסמנטיים הנכונים יאפשר לכם לענות על רוב צורכי הגישה שלכם למקלדת או על כולם. כלומר, פחות זמן להתעסק עם tabindex,
ויותר משתמשים מרוצים!
תמיכה במקלדת בחינם (וחוויות טובות יותר בנייד)
יש כמה אלמנטים אינטראקטיביים מובנים עם סמנטיקה מתאימה ותמיכה במקלדת. רוב המפתחים משתמשים בהם:
בנוסף, רכיבים עם המאפיין contenteditable משמשים לפעמים להזנת טקסט חופשי.
קל להתעלם מהתמיכה המובנית במקלדת שמובנית ברכיבים האלה.
לפניכם כמה אלמנטים לדוגמה. במקום להשתמש בעכבר, נסו להפעיל אותו באמצעות המקלדת. אפשר להשתמש ב-TAB (או ב-SHIFT +
TAB) כדי לעבור בין הפקדים, ולהשתמש במקשי החיצים ובמקשי החיצים כמו ENTER ו-SPACE כדי לשנות את הערכים שלהם.
אם יש לכם טלפון בהישג יד, אפשר לראות שהרבה פעמים לרכיבים המובנים האלה יש אינטראקציות ייחודיות בנייד. לנסות לשחזר את האינטראקציות האלה בנייד בעצמנו – הוא הרבה עבודה. זו סיבה טובה נוספת להשתמש ברכיבים מובנים כשאפשר.
שימוש ב-button במקום ב-div
דפוס נפוץ נגד נגישות הוא להתייחס לאלמנט לא אינטראקטיבי, כמו div או span, כלחצן על ידי הוספת handler של קליקים אליו.
עם זאת, כדי שלחצן יהיה נגיש, הלחצן צריך:
- לאפשר מיקוד באמצעות המקלדת
- התמיכה בתהליך השבתה
- תמיכה במקשים
ENTERאוSPACEכדי לבצע פעולה - הקראה תקינה על ידי קורא מסך
לחצן div לא כולל אף אחד מהדברים האלה. המשמעות היא שתצטרכו לכתוב קוד נוסף כדי לשכפל את מה שהאלמנט button נותן לכם בחינם!
לדוגמה, לרכיבי button יש טריק מגניב שנקרא *הפעלת קליקים סינתטיים*. אם מוסיפים handler 'לחיצה' ל-button, הוא יפעל כשהמשתמש ילחץ על ENTER או על SPACE. לחצן div לא כולל את התכונה הזו, כך שתצטרכו לכתוב קוד נוסף כדי להאזין לאירוע keydown, לבדוק שקוד המפתח הוא ENTER או SPACE, ואז להריץ את ה-handler של הקליקים. אאוץ'!
זה הרבה עבודה נוספת!
משווים את ההבדל בדוגמה הזו. TAB כדי לשלוט בהם ולהשתמש ב-ENTER וב-SPACE כדי לנסות ללחוץ עליהם.
אם יש לחצנים של div באתר או באפליקציה הקיימים, כדאי להחליף אותם ברכיבי button. קל לעצב את button וליהנות מהטבות נגישות!
קישורים לעומת לחצנים
דפוס נפוץ נוסף הוא להתייחס לקישורים כאל לחצנים על ידי צירוף התנהגות JavaScript אליהם.
<a href="#" onclick="// perform some action">
גם הלחצנים וגם הקישורים תומכים בהפעלה מסוימת של קליקים סינתטיים. אז במה כדאי לבחור?
- אם לחיצה על האלמנט תבצע פעולה בדף, צריך להשתמש ב-
<button>. - אם לחיצה על הרכיב תנווט את המשתמש לדף חדש, תוכל להשתמש ב-
<a>. כולל אפליקציות אינטרנט בדף יחיד שטוענות תוכן חדש ומעדכנים את כתובת ה-URL באמצעות History API.
הסיבה לכך היא שלחצנים וקישורים מוקראים באופן שונה על ידי קוראי מסך. שימוש ברכיב הנכון עוזר למשתמשים בקורא מסך לדעת למה לצפות.
TODO: DevSite - הערכה של חשיבה ובדיקה
שינוי סגנון
קשה לעצב חלק מהרכיבים המובנים, במיוחד <input>.
בעזרת שירות CSS חכם, תוכלו לעקוף חלק מהמגבלות האלה. הפרויקט WTFForms (בשם מצחיק) מכיל גיליון סגנונות לדוגמה שמדגים מספר טכניקות לעיצוב כמה מהאלמנטים המובנים הקשוחים יותר.
השלבים הבאים
השימוש ברכיבי HTML מובנים יכול לשפר משמעותית את הנגישות של האתר ולצמצם משמעותית את עומס העבודה. נסו לעבור על הכרטיסיות באתר וחפשו פקדים שאינם תומכים במקלדת. אם אפשר, כדאי להוציא אותם לחלופות HTML סטנדרטיות.
לפעמים אתם עשויים לגלות רכיב שאין לו אחים ב-HTML.
זה בסדר גמור! בהמשך מוסבר איך להוסיף תמיכה במקלדת לפקדים אינטראקטיביים בהתאמה אישית באמצעות tabindex.