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