משתמשים ב-HTML סמנטי לניצחון קל במקלדת

שימוש באלמנטים הנכונים של 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.