הנגשת אתרים – פרק שלישי – ניווט מקלדת

הנגשת אתרים – פרק שלישי – ניווט מקלדת

אחרי הפסקה ארוכה מאד, וגם אתר חדש, בואו נתקדם עוד בנושא הנגשת אתרים אינטרנט. והפעם – ניווט מקלדת.

מי מנווט באמצעות המקלדת?

  1. בעלי מוגבלות פיזית שאינם יכולים להשתמש בעכבר כדי לנווט באתר. הם רואים את העמוד ונעזרים במקלדת כדי להגיע אל הרכיבים השונים בו.
  2. קוראי מסך – כשמשתמשים בקורא מסך ניתן לנווט אמנם באמצעות העכבר/אצבע במסך מגע, אבל פשוט יותר לנווט באמצעות מקש הטאב כדי לדעת מה יש בעמוד. מי שמשתמש בקורא מסך הם הרי מי שלא מסוגל לראות את האתר שלנו, ולכן הוא גם לא יודע מה יש בכל מקום בעמוד. ניווט מקלדת אמור להביא אותו לכל אחד מהחלקים בעמוד למרות שהוא לא רואה אותו.

מה הסדר של ניווט המקלדת ואיך זה בעצם קורה?

ניווט מקלדת מתרחש במחשב עם מקלדת באמצעות המקש tab כדי להתקדם, ושיתוב של shift+tab על מנת לחזור אחורנית לרכיב הקודם. אם תהיו בעמוד אינטרנטי כלשהו, ותתחילו ללחוץ על tab שוב ושוב – תוכלו לראות שאתם עוברים מרכיב אחד לשני, בין האלמנטים שמקבלים פוקוס. הסדר שלפיו הפוקוס עובר – הוא הסדר של האלמנטים בHTML. כלומר – גם אם נראה לנו בעין, באמצעות קוד CSS, שרכיב X נמצא לפני רכיב Y – כל עוד Y נכתב בHTML לפני X – הפוקוס יגיע אליו קודם. זו נקודה שחשוב לתת עליה את הדעת כשמפתחים את העמוד, כדי לפתח את העמוד בסדר הגיוני כבר ברמת הHTML, וכך הפוקוס יעבור בסדר הגיוני ולא נצטרך סקריפטים שיעבירו את הפוקוס במצורה מלאכותית, או לחילופין אישור של אנשי נגישות שהסדר מאושר למרות שאינו תואם את הניראות. במכשירי מובייל, מעבר הטאב מתבצע כארש מצב נגישות מופעל, באמצעות החלקה ימינה/שמאלה על המסך (swipe). ישנם דגשים מיוחדים לגבי הפוקוס במובייל, שלפעמים עובד קצת שונה מאשר במחשב. נרחיב על כך בפרק שיידון בקורא מסך.

אילו אלמנטים של HTML מקבלים פוקוס?

ישנם אלמנטים של HTML, שכאשר נעשה בהם שימוש – הם באופן אוטומטי מסוגלים לקבל פוקוס. האלמנטים הם: button, input, textarea, select, וכן תגית לינק (a) שיש לה href שאינו ריק. חשוב מאד להשתמש באלמנטי הHTML הנכונים לכל רכיב בעמוד, כדי שההתנהגות הרצויה תבוא כבר built in יחד עם הרכיב ולא נצטרך לבצע התאמות. בעיקר כדאי וחשוב להקפיד להשתמש בתגית button לאלמנטים קליקביליים שמחוללים פעולה בעמוד עצמו (ואינם קישור לעמוד אחד, שאז נשתמש בתגית a). זה יחסוך לנו כאב ראש רב. לדוגמה, כשיש לנו סקריפט של לחיצה על כפתור (click על button או input) – כשלוחצים עם המקלדת על enter – אוטומטית האירוע קורה, בדיוק כמו כאשר לוחצים עם העכבר. אבל אם נשתמש בdiv לדוגמה, ועליו יהיה האירוע המדובר – זה לא יקרה אוטומטית בלחיצת enter של המקלדת, אלא צריך להוסיף אירוע keydown/keyup וכדו', כדי להחיל את האירוע גם בלחיצת מקלדת. פירוט נוסף בהמשך. הערה חשובה – כל הגדרות הCSS אינן משפיעות על ניווט המקלדת, למעט אחת. כשיש לאלמנט כלשהו את ההגדרה display: none – הפוקוס לא יגיע אליו. לכן כשנרצה להסתיר אלמנט מהתצוגה, אך כן תהיה לו משמעות מבחינת הפוקוס (לדוגמה כשנרצה לעצב checkbox באמצעות שימוש בlabel עצמו ולא בcheckbox) – כדי להסתיר את האלמנט מקבל הפוקוס ניתן הגדרות כמו height: 0; width: 0; position: absolute; visibility: hidden. כל ההגדרות הללו יחד יסדרו בדיוק את מה שאנחנו צריכים. האלמנט קיים מבחינת ניווט מקלדת וקורא המסך, אך הגולש לא רואה אותם מבחינה ויזואלית. אז אנחנו כבר יודעים איך נכון לבנות רכיבים חדשים, אבל מה אם אנחנו רוצים להנגיש אתר קיים ולא רוצים לשנות את הרכיבים הHTMLיים שלו כדי לא לשבש את הנראות?

המאפיין tabindex

אם רוצים להחיל התנהגות "כפתורית" על אלמנט HTML שאינו מקבל פוקוס כברירת מחדל – ניתן להשתמש במאפיין tabindex. קצת הסבר מילולי כדי להקל על הזכירה – המילה tabindex מורכבת משתי מילים, טאב – עם לחצן הטאב מנווטים מאלמנט אחד למשנהו, ו- index – מיקום/סדר הופעה. כלומר – המאפיין הזה מסוגל לשלוט על המיקום של האלמנט המסויים בסדר הניווט של הטאב לאורך העמוד. tabindex זהו מאפיין של HTML (ולא של CSS), ויש לו שלוש אפשרויות של ערכים שהוא יכול לקבל:
  • -1 – אם יש אלמנט שאמור לקבל פוקוס כברירת מחדל, למשל איזשהו כפתור, ואנחנו לא רוצים שהפוקוס יגיע אליו, מכל סיבה שלא תהיה (אפילו באופן זמני). במקרה הזה יש לתת לאותה אלמנט HTMLי את מאפיין tabindex=-1 וזה יגרום שבמעבר הטאב נדלג עליו.
  • 0 – אם יש אלמנט שלא אמור לקבל פוקוס ואנחנו רוצים שיקבל פוקוס בכל אופן (כמו שדברנו למעלה בפוסט הזה) צריך להוסיף לאותו אלמנט HTMLי את ההגדרה tabindex=0. כעת כשנעבור עם ניווט מקלדת ונגיע לאותו אלמנט – הוא יקבל פוקוס כאילו הוא היה כפתור אמיתי.
  • ערך מספרי כלשהו – כאשר יש לנו רכיב שחשוב לנו שהפוקוס יגיע אליו ראשון (לדוגמה access keys) – ניתן לתת לו tabindex עם מספר כלשהו ואז הפוקוס יגיע אליו דבר ראשון. שימו לב – אם יש כמה אלמנטים עם אותו מספר בtabindex – הפוקוס יגיע אליהם אחד אחרי השני לפי הסדר הHTMLי שלהם. רק אחרי שהפוקוס יסיים את סבב האלמנטים עם tabindex שגדול מ0 – הוא יעבור על האלמנטים האחרים שאמורים לקבל פוקוס בעמוד. חשוב למעט בהגדרה הזו עד כמה שניתן, ולהשתמש בה ממש רק למה שחובה ואין ברירה אחרת, כי אחרת – כל הניווט בעמוד ייהפוך למסורבל מאד ובלתי אפשרי לתחזוקה. נכנסתי פעם לפרויקט שהיה בנוי בצורה כזו, וזה היה סיוט שלא נגמר, עם סקריפט שחישב לכל האלמנטים tabindex כדי שהפוקוס יגיע אליהם בסדר הגיוני.

מלכודת מקלדת

מלכודת מקלדת זהו מצב שבו הפוקוס נתקע באיזשהו רכיב מבלי יכולת להמשיך הלאה. זה קרה לי לדוגמה ברכיב סליידר שהיו עליו סקריפטים נוספים. מתישהו הפוקוס פשוט נתקע בסוף הסליידר ולא המשיך הלאה בעמוד. חשוב להמנע מהמצבים האלה, ולפתור אותם במידה וקרו כך שהניווט ילך מתחילת העמוד ועד סופו. ישנו מקום אחד שבו חשוב שכן תהיה מלכודת מקלדת. זהו פופאפ. תוכלו לקרוא עוד בפוסט על פופאפ מונגש. כדי לסדר את זה – כותבים סקריפט שמזהה לחיצת מקלדת על האלמנטים ה"פוקוסאבילים" האחרון והראשון. באחרון בודקים שמדובר בtab, ואם כן – מחזירים את הפוקוס לאלמנט הראשון, ואם מדובר באלמנט הראשון – מוודאים שמדובר בshift+tab = ניווט אחורה שתוציא מהמלכודת, ואז נחזיר את הפוקוס לאלמנט האחרון. כך הניווט "לכוד" בתוך קבוצת אלמנטים מוגדרת ולא יוצא החוצה. בניווט במובייל זה מעט יותר מסובך. נרחיב בעז"ה בפרק שידון במובייל.

ניווט אינטואיטיבי

בגדול משמעות המושג היא שהניווט באתר לא יהיה באופן עקום, אלא בצורה הגיונית, לפי הסדר, ובלחיצה על מקשים שטבעי שהם אלו שיביאו אותנו הלאה. ישנם לפעמים רכיבים באתר, שמתבקש בהם ניווט באמצעות מקשים אחרים על המסך ולא דווקא מקש טאב, בד"כ מדובר על הלחצנים למעלה/למטה וימינה/שמאלה. לדוגמה, בגלל שקשה לעצב תיבת select של HTML, הרבה פעמים מתכתנים יוצרים באמצעות HTML מבנה דומה באמצעות למשל UL-LI או מבנה דומה (תהיה הרחבה בעז"ה בפוסט נפרד על איך לבצע את זה), עם איזשהו כפתור שפותח וסוגר. בselect אמיתי לחיצה למעלה ולמטה מנווטת בין האפשרויות (options) של הselect, לעומת זאת כאשר מדובר על UL-LI שבתוך כל LI נמצא כפתור שעליו למעשה יש את האירוע של הקליק – הדפדפן שלנו יודע שיש קבוצת כפתורים אחד אחרי השני, אך הוא לא יודע לזהות אותם כרכיב אחד שניווט פנימי בו אמור להתבצע גם בלחצנים למעלה/למטה. דוגמא נוספת ואף יותר נפוצה – תפריטים. כשיש לנו תפריט עם רמה שניה, כשהרמה השניה נפתחת מתחת לקישור שברמה הראשונה – אך מתבקש שלחיצה על הכפתורים למעלה ולמטה תנווט בין הקישורים, וכן אם לאחד הפריטים ברמה השניה יש גם תת תפריט משלו – רמה שלישית, והרמה השלישית הזו נפתחת למשל בצד שמאל של הרמה השניה – אך מתבקש כשחושבים על זה – להוסיף שכשעומדים עם הפוקוס על הקישור בעל הרמה השלישית – אירוע לחיצה על מקש שמאל שפותח את הרמה השלישית שלו. הוספת סקריפטים לניווט אינטואיטיבי, ככל הידוע לי, אינה חובה כל עוד ניתן לגשת בקלות לכל הרמות ולכל הרכיבים באמצעות טאב, אך יהיה יפה לחשוב טיפונת מעבר ולבצע גם את זה.

חיווי פוקוס

כזכור, חלק מהמשתמשים בניווט מקלדת הם אנשים שרואים אך לא יכולים לנווט עם העכבר. עבורם אנחנו צריכים לתת חיווי ויזואלי כלשהו לאלמנט המפוקס, וכך הגולש ידע בדיוק על איזה אלמנט הוא נמצא כרגע. בעת פוקוס על אלמנט – נוסף לו איזשהו סטייל שנועד להדגיש אותו ולהראות לגולש "אתה נמצא כאן". כברירת מחדל, לכל דפדפן יש את החיווי שלו לפוקוס. החיווי נעשה באמצעות הגדרת הCSS שנקראת outline. היא מוסיפה מסגרת מסביב לאלמנט (ובניגוד לborder – אינו תופס מקום על חשבון האלמנט כך שלא נגרמת קפיצה בעת פוקוס). בחלק מהדפדפנים, פיירפוקס למשל, הoutline הינו קו דק מידי וברכיבים מסויימים כמעט אינו נראה. במצבים כאלה ניתן בקלות לדרוס את ברירת המחדל של הדפדפן ולהדגיש אותו יותר. בגלל שכל גולש רואה את הפוקוס הזה, למשל כשאני פותחת וסוגרת דרופדאון – לא נרצה לתת איזשהו פוקוס בולט מידי, כדי לא לכער את העיצוב של האתר, לכן כשיש לאלמנט אפקט מעבר עכבר – כדאי לתת בפוקוס את אותו האפקט ולהסיר את הoutline. ככלל, כדאי כשכותבים בCSS הגדרות ל:hover, לשרשר בסלקטור של הCSS גם :focus ובכך לחסוך עבודה מיותרת בשלב הנגשת האתר. לדוגמא:
#mylink:hover, #mylink:focus{
    color: red;
}
דוגמאות נוספות לחיווי פוקוס:
  • Underline
  • החלפת צבע הרקע
וכן הלאה. אם הגדרות הפוקוס פוגעות בנראות מאד – ניתן להוסיף כפתור מיוחד בheader שמשמעותו תהיה "שימוש בניווט מקלדת", ורק למי שלחץ עליו יופיעו החיוויים המשמעותיים (בדומה לכפתור לניגודיות צבעים גבוהה).

מנגנון עקיפת בלוקים – מקשי ניווט מקוצר – AccessKeys

עפ"י הנחיות הנגישות יש לתת לגולש אפשרות לדלג על בלוקים בעמוד, ולעבור בלחיצת מקש בין האיזורים. בדרך כלל יש להגדיר access keys לבלוקים הבאים:header, footer, תפריט ראשי, סיידברים, תוכן העמוד, מפת אתר.   מלבד ההפניה למפת האתר שהיא בד"כ קישור – שאר ההפניות הינן anchors לתוכן באותו עמוד. ומובן שניתן, במידה ואנחנו רוצים לקדם איזשהו עמוד או תוכן (למשל טופס הרשמה לרשימת תפוצה), להוסיף קישור אליו במקשי ניווט מקוצר, כדי שגם הגולש בעלת מגבלת התנועה יוכל בקלות וכל רגע לגשת לאותו עמוד/תוכן הדרך לממש: HTML
#footer" accesskey="ת">עבור לפוטר - מקש קיצור ת
CSS
a[accesskey]{
 position: absolute;
 top: -99999px; 
 right: 0px;
 background: #ffffff;
 color: #000000;
 border: 1px solid #000000; 
 display: block; 
 padding: 15px;
}
a[accesskey]:focus{ top: 0px; } הסבר קצר: את הלינקים הללו יש למקם קרוב ככל האפשר לתחילת הbody. ניתן לראות שהוספנו להם tabindex=1, כי אני רוצה שאליהם מעבר הטאבים יתייחס הראשונים. אפשר לראות בCSS שלנו, שלא הגדרנו display: none לקישורים, כדי שמעבר הטאבים לא ידלג עליהם (כמו שכבר נכתב למעלה, הפוקוס לא מגיע לאלמנט שהינו display: none). כדי שבכל זאת לא יראו את הקישורים הללו כשכן צריך – כשהם בפוקוס אנחנו מחזירים אותם לטופ של העמוד, שהם ייצמדו ללמעלה של חלון הדפדפן. ההגדרה accesskey מגדירה מי המקש שיעביר את הגולש אל הקישור של הלינק. כאשר אנחנו מגדירים accesskey, תלוי בדפדפן שממנו גולשים, ניתן לשלב מקש מקלדת כלשהו כמו alt או crtl, + המקש של הקישור שאליו רוצים לעבור, והלחיצה תבצע כאילו לחיצה על הקישור של הניווט המקוצר. כלומר למשל בדוגמה שלמעלה, אם אני רוצה לעבור לתוכן העמוד ואני גולשת בכרום. בכרום accesskeys עובדים בצירוף עם המקש alt. כך שאם אלחץ, לא משנה איפה בעמוד אני אוחזת כרגע, על המקשים alt+ת – הפוקוס יוקפץ לי לפוטר.

דוגמאות

  • הפריימוורק של bootstrap גם עובד די נגיש. הרכיבים של JS שלהם עובדים נחמד מאד עם ניווט מקלדת.
    • פופאפ (נקרא modal אצלם) – אפשר לראות בתוכו את מלכודת המקלדת עובד נפלא.
    • רכיב טאבים – עובד טוב גם בלחיצה (גם לכם זה יקרה אוטומטית אם לכפתורי הטאבים תשתמשו בbutton)
    • אקורדיון – כנ"ל
הנה דוגמא לפלאגין של JS  שעובד טוב מבחינת ניווט מקלדת – slick slider. ניתן לעבור בין השקופיות באמצעות המקלדת בצורה פשוטה ביותר.

סיכום

בסיום העבודה על האתר, יש לעבור על העמודים עם המקלדת בלבד, ולוודא שניתן להגיע לכל מקום באופן מובן וברור, לפי הסדר ההגיוני. שניתן להפעיל כל רכיב ולבצע כל פעולה שהאתר מציע, החל מלחיצה על קישורים, עבור דרך פתיחת התפריט והגעה לכל הרמות שלו בצורה נוחה, המשך למילוי טופס, וכלה באינטראקציה עם ווידג'טים כדוגמת דרופדאונים, אקורדיונים, טאבים וכדו'. אכן, לא לכל הרכיבים קל ופשוט לבצע הנגשה לניווט מקלדת, לפעמים יש צורך בסקריפטים מורכבים ביותר, אבל המחשבה על גולש שגם ככה החיים שלו מורכבים, וזה המקום הקטן שלי לעזור לו – אולי תסייע גם לכם כמו שהיא מסייעת לי…

כתוב/כתבי תגובה