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