אחד מהכללים החשובים ביותר של נגישות היא מתן אפשרות לניווט מלא באתר באמצעות מקלדת בלבד. איך עושים את זה? כפי שכמעט כל ילד יודע, ניתן לנווט באמצעות tab ו Shift+tab. אתם יכולים לעשות את זה עכשיו באתר זה – פשוט תלחצו על tab ותראו שאתם עוברים בין הקישורים השונים באתר.
איך עשיתי את זה? לא הייתי צריך לשנות דבר. הדפדפן מאפשר לעבור בין הקישורים השונים ואלמנטי ה-input באופן אוטומטי באמצעות המקלדת. כל מה שצריך זה להשתמש ב-Tab, ב-Shift+tab ובמקש enter כדי להפעיל את האלמנט. Tab בעצם מפעיל לנו אירוע שנקרא Focus. מדובר באירוע שלא רבים מכירים (וחבל) אבל הוא נתמך במלואו על ידי דפדפנים וכל מי שבונה אתר המותאם לנגישות חייב להכיר ולהשתמש בו. הפוקוס הוא אירוע שמופעל כאשר אני עובר עם Tab על אלמנט ו'הפוקוס' נמצא עליו. לחיצה על enter תפעיל את אירוע ה onclick.
אישור ויזואלי לפוקוס
למרות שדפדפנים מפעילים את אלמנט הפוקוס באופן אוטומטי לכל קישור ולכל input ולכאורה אם אני מנגיש את האתר אין לי מה לשבור את הראש על ניווט באמצעות מקלדת – אני עומד בתקן A. אבל אם אני רוצה לעמוד גם בתקן AA חובה עלי ליצור אישור ויזואלי למשתמש על כך שהוא יצר פוקוס על אלמנט מסוים. כך למשל, אם אני אלחץ על Tab באתר הזה, אני אראה מסגרת עדינה סביב כל אלמנט שהפוקוס הוא עליו.
איך מייצרים את האינדקציה הויזואלית? די בקלות – הנה מה שעשיתי:
a:focus {
outline: 1px solid grey;
}
שימו לב שהשתמשתי ב-outline. זו תכונה שדומה ל-border, אבל בניגוד ל-border היא לא משפיעה על גודל האלמנט – וכך נמנעות כל מיני 'קפיצות' מרגיזות בגובה האלמנט שעושים עליו פוקוס או באלמנטים שמכילים אותו. בנוסף, אם יש לי כבר border, שהיא תכונה נפוצה הרבה יותר מ-outline, אז אין לי בעיות של אוברייד ובלגנים.
חובת שימוש בפוקוס בסקריפטים
אם אתם כותבים סקריפטים – חובה להתחשב גם באלו שמשתמשים במקלדת לניווט ואם יש לכם אירוע שמופעל על ידי mouse over, להוסיף גם אירוע של focus. ב-jQuery עושים את זה כך:
$( "#foo" ).bind( "hover focus", function() {
//whatever
});
חובה לעשות את ההתאמה הזו אם אתם רוצים לעמוד בתקן A. זה בסך הכל דורש התאמה פשוטה.
access key
זה כבר לא משהו שמחייב בתקן, אבל נחמד לדעת ולהוסיף – אפשר להוסיף לקישורים חשובים תכונה בשם accesskey והיא מאפשרת לנו דילוג מיידי אל הקישור החשוב באמצעות המקלדת. דוגמה? תלחצו על alt+4 באתר זה (אם אתם משתמשים בכרום) – מיד תראו שהפוקוס עובר אל אלמנט החיפוש. אם תלחצו על alt+1 – תגיעו מיד אל העמוד הראשי. alt+S (שימו לב שה-S גדולה) יקפיץ אתכם אל התוכן הראשי במאמר. איך עשיתי את זה? הוספתי לקישור לעמוד הראשי ולקישור 'אל המאמר' שמאפשר לדלג אל התוכן המרכזי את תכונת ה-accesskey והמספר הרלוונטי. תקן HTML5 מאפשר לי להוסיף את התכונה הזו גם לאלמנטים שהם לא קישורים והוספתי אותה אל שדה החיפוש
<input type="text" placeholder="חפש כאן …" id="s" name="s" class="field" tabindex="1" accesskey="4">
למרות שאין תקן מחייב, בארץ השתרש הנוהג לבחור ב-accesskey לפי איזשהו סטנדרט שנקבע בבריטניה. התקן מפורט בהנחיות הנגישות של איגוד האינטרנט. הנה הטבלה:
| מקש קיצור accesskey | תפקיד בעברית | תפקיד באנגלית |
|---|---|---|
| S | עבור לתוכן העמוד | Skip navigation |
| 1 | עמוד הבית | Home page |
| 2 | מה חדש / חדשות | What's new |
| 3 | מפת אתר | Site map |
| 4 | חיפוש | Search |
| 5 | שאלות ותשובות | (FAQ (Frequently Asked Questions |
| 6 | עזרה | Help |
| 7 | צור קשר/ טופס או תהליך תלונה | Complaints procedure |
| 8 | תנאי שימוש באתר | Terms and conditions |
| 9 | טופס משוב | Feedback form |
| 0 | רשימת מקשי קיצור | Access key details |
באופן עקרוני, אני משתמש בעיקר ב-S,1 ו-4.
איך בודקים את זה?
אני לא הייתי סומך על כלים אוטומטיים שיבדקו שהאתר/אפליקציה שלכם עומדים בכלל הנגישות האולטרא-חשוב הזה. שווה להשקיע חמש דקות בבדיקה עצמית – תזרקו את העכבר ותנווטו בעצמכם עם המקלדת – הצלחתם לעשות את כל הפעולות? להגיע לכל המקומות? מעולה. לא הצלחתם? בדרך כלל מדובר בסקריפט סורר שמטמיע אירוע עכבר (כמו mouseover, hover) ושוכח שיש גם כאלו שמשתמשים ב-focus. הוסיפו את ה-focus ל-bind בסקריפט ופיניטו לה קומדיה. במידה ואתם הולכים לאיבוד עם כל הטאבים – תחשבו על המשתמשים שלכם ותוסיפו אינדקציה ויזואלית (ועל הדרך תעמדו בתקן AA) או אפילו כמה accesskey.