ניווט מקלדת

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

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

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

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

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

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

הסדר שלפיו הפוקוס עובר – הוא הסדר של האלמנטים בHTML. כלומר – גם אם נראה לנו בעין שרכיב X נמצא לפני רכיב Y – כל עוד Y נכתב בHTML לפני X – הפוקוס יגיע אליו קודם. כלומר – גם אם באמצעות CSS שינו את סדר האלמנטים בתצוגה – מה שקובע זה סדר האלמנטים בDOM ולא הסדר שלהם בתצוגה.

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

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

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

ישנם אלמנטים של HTML, שכאשר נעשה בהם שימוש – הם באופן אוטומטי מסוגלים לקבל פוקוס. האלמנטים הם: button, input, textarea, select, תגית לינק (a) שיש לה href שאינו ריק וכן אלמנטים עם tabindex כפי שיפורט בהמשך הפוסט.

❗ חשוב מאד להשתמש באלמנטי הHTML הנכונים לכל רכיב בעמוד, כדי שההתנהגות הרצויה תבוא כבר built in יחד עם הרכיב ולא נצטרך לבצע התאמות. הנושא ההכי הכי בוער וחשוב הוא להקפיד להשתמש בתגית button או a בלבד לאלמנטים קליקביליים שמחוללים פעולה בעמוד. זה יחסוך לנו כאב ראש רב:

• בהנגשה לניווט מקלדת – לחיצה של אנטר על button או a מתנהגת כאילו לחצו על הכפתור עם העכבר, ואין צורך להוסיף הגדרת אירועי מקלדת של keyup/keydown.
• בהפעלת הסקריפטים במובייל, ששם במכשירים מסוימים אירוע של קליק על div לא עובד, אלא רק אירוע של touchstart/touchend.

פירוט נוסף בהמשך.

❗ חשוב מאד נוסף  – כל הגדרות הCSS אינן משפיעות על ניווט המקלדת, למעט אחת. כשיש לאלמנט כלשהו את ההגדרה display: none – הפוקוס לא יגיע אליו. לכן כשנרצה להסתיר אלמנט מהתצוגה, אך כן תהיה לו משמעות מבחינת הפוקוס (לדוגמה כשנרצה לעצב checkbox באמצעות שימוש בlabel עצמו ולא בcheckbox) – כדי להסתיר את האלמנט מקבל הפוקוס ניתן הגדרות כמו height: 0; width: 0; position: absolute; visibility: hidden. כל ההגדרות הללו יחד יסדרו בדיוק את מה שאנחנו צריכים. האלמנט קיים מבחינת ניווט מקלדת וקורא המסך, אך הגולש לא רואה אותם מבחינה ויזואלית.

למשתמשים בBootstrap – תוכלו לתת לאלמנט שלא אמור להופיע על המסך, אבל כל יש לו משמעות את הקלאס sr-only (כלומר – screen readers only – גלוי לקוראי מסך). הוא יעשה את העבודה באופן מושלם.

אז אנחנו כבר יודעים איך נכון לבנות רכיבים חדשים, אבל מה אם אנחנו רוצים להנגיש אתר קיים ולא רוצים לשנות את הרכיבים הHTMLיים שלו כדי לא לשבש את הנראות?

הגדרת tabindex

אם רוצים להחיל התנהגות "כפתורית" על אלמנט HTML שאינו מקבל פוקוס כברירת מחדל – ניתן להשתמש במאפיין tabindex. קצת הסבר מילולי כדי להקל על הזכירה – המילה tabindex מורכבת משתי מילים, טאב – עם לחצן הטאב מנווטים מאלמנט אחד למשנהו, ו- index – מיקום/סדר הופעה. כלומר – המאפיין הזה מסוגל לשלוט על המיקום של האלמנט המסויים בסדר הניווט של הטאב לאורך העמוד. לדוגמה:

<div tabindex="0"></div>

tabindex זהו מאפיין של HTML (ולא של CSS), ויש לו שלוש אפשרויות של ערכים שהוא יכול לקבל:

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

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

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

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

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

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

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

מלכודת מקלדת

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

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

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

חיווי פוקוס

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

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

סיכום

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

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

בהצלחה רבה