שימוש באלמנטים הנכונים של 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 (ששמו מצחיק מאוד) מכיל גיליון סגנונות לדוגמה שמציג כמה שיטות לעיצוב של חלק מהאלמנטים המובנים הקשים יותר.
השלבים הבאים
שימוש ברכיבי HTML מובנים יכול לשפר משמעותית את הנגישות של האתר, ולצמצם באופן משמעותי את עומס העבודה. נסו לעבור בין הכרטיסיות באתר לחפש פקדים שאין בהם תמיכה במקלדת. אם אפשר, מחליפים אותם בחלופות HTML סטנדרטיות.
לפעמים אתם עשויים למצוא רכיב שאין לו מקבילה ב-HTML.
זה בסדר. בהמשך מוסבר איך להוסיף תמיכה במקלדת לפקדים אינטראקטיביים בהתאמה אישית באמצעות tabindex.