נגישות (a11y)

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

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

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

שילוב של אמצעי בקרה נגישים בממשק המשתמש

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

אמצעי בקרה רגילים

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

WAI-ARIA באמצעי בקרה בהתאמה אישית

Web Accessibility Initiative – Accessible Rich Internet Applications‏ (WAI-ARIA) היא מפרט שמאפשר להפוך את אמצעי הבקרה של ממשק המשתמש לנגישים לקוראי מסך באמצעות קבוצה סטנדרטית של מאפייני DOM. המאפיינים האלה מספקים לקורא המסך מידע על הפונקציה ועל המצב הנוכחי של אמצעי הבקרה בדף אינטרנט.

כדי להוסיף תמיכה ב-WAI-ARIA לאמצעי בקרה מותאמים אישית, צריך לשנות את רכיבי ה-DOM של התוסף כך שיכללו מאפיינים שבהם Chrome משתמש כדי להפעיל אירועים במהלך האינטראקציה של המשתמש. קוראי המסך מגיבים לאירועים האלה ומתארים את הפונקציה של הפקדים. מאפייני DOM שצוינו על ידי WAI-ARIA מסווגים לתפקידים, מצבים ומאפיינים.

<div role="toolbar">

המאפיין aria-activedescendant מציין איזה צאצא של סרגל הכלים מקבל את המיקוד כשסרגל הכלים מקבל את המיקוד. הקוד tabindex="0" מציין שהמיקוד בסרגל הכלים מופיע לפי סדר המסמכים.

עיינו במפרט המלא של סרגל כלים לדוגמה שבהמשך:

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

אחרי שמוסיפים ל-DOM של אמצעי הבקרה תפקידים, מצבים ומאפיינים של WAI-ARIA, Google Chrome מעביר את האירועים המתאימים לקורא המסך. מכיוון שתמיכת WAI-ARIA עדיין נמצאת בתהליך פיתוח, יכול להיות ש-Google Chrome לא יוצר אירוע לכל מאפיין WAI-ARIA, ויכול להיות שקוראי המסך לא יזהו את כל האירועים שנוצרים.

במדריך המהיר המצגת של Dave Raggett מ-WWW2010 מוסבר איך מוסיפים פקדים של WAI-ARIA לפקדים מותאמים אישית.

התמקדות באמצעי בקרה מותאמים אישית

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

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

element.tabIndex = 0

element.focus();

ההגדרה tabIndex = -1 מסירה את הרכיב מרצף הטאבים, אבל עדיין מאפשרת לרכיב לקבל את המיקוד של המקלדת באופן פרוגרמטי.

תמיכה בגישה למקלדת

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

ניווט

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

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

קיצורי דרך

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

קוד פשוט לטיפול במקלדת ב-JavaScript יכול להיראות כך: שימו לב איך המאפיין WAI-ARIA‏ aria-activedescendant מתעדכן בתגובה לקלט של המשתמש כדי לשקף את הלחצן הפעיל הנוכחי בסרגל הכלים.

 function optionKeyEvent(event) {
  var tb = event.target;
  var buttonid;

  ENTER_KEYCODE = 13;
  RIGHT_KEYCODE = 39;
  LEFT_KEYCODE = 37;
  // Partial sample code for processing arrow keys.
  if (event.type == "keydown") {
    // Implement circular keyboard navigation within the toolbar buttons
    if (event.keyCode == ENTER_KEYCODE) {
      ExecuteButtonAction(getCurrentButtonID());
      // getCurrentButtonID defined elsewhere
    } else if (event.keyCode == event.RIGHT_KEYCODE) {
      // Change the active toolbar button to the one to the right (circular).
      var buttonid = getNextButtonID();
      // getNextButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else if (event.keyCode == event.LEFT_KEYCODE) {
      // Change the active toolbar button to the one to the left (circular).
      var buttonid = getPrevButtonID();
      // getPrevButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else {
      return true;
    }
    return false;
  }
}

<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
     onkeydown="return optionKeyEvent(event);"
     onkeypress="return optionKeyEvent(event);">
  <img src="buttoncut" role="button" alt="cut" id="button1">
  <img src="buttoncopy" role="button" alt="copy" id="button2">
  <img src="buttonpaste" role="button" alt="paste" id="button3">
</div>

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

מתן תוכן נגיש

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

טקסט

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

כדי לבדוק את הגמישות של ממשק המשתמש של התוסף, כדאי לבצע את הבדיקה של 200%: אם גודל הטקסט או התצוגה הממוגדלת של הדף מוגדלים ב-200%, האם עדיין אפשר להשתמש בהם?

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

צבעים

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

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

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

צליל

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

תמונות

מומלץ לספק טקסט חלופי מידעתי לתמונות.

<img src="img.jpg" alt="The logo for the extension">

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

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

מידע נוסף

מידע נוסף על נגישות ב-Chrome זמין בערוץ A11ycasts ובמסמכי העזרה הטכניים בנושא נגישות ב-Chromium.