אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » נגישות אינטרנט » ניווט באמצעות מקלדת ו-accesskey

ניווט באמצעות מקלדת ו-accesskey

רן בר-זיק דצמבר 16, 2013 6:54 pm אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
נגישות אינטרנט

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד