נגישות (a11y)

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

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

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

שילוב פקדים נגישים של ממשק המשתמש

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

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

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

WAI-ARIA בפקדים מותאמים אישית

Web Accessibility Initiative – אפליקציות אינטרנט עשירות ונגישות, 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>

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

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

התמקדות בפקדים מותאמים אישית

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

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

element.tabIndex = 0

element.focus();

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

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

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

ניווט

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

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

קיצורי דרך

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

רכיב handler פשוט של מקלדת 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>

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

אספקת תוכן נגיש

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

טקסט

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

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

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

צבעים

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

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

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

צליל

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

תמונות

הוסיפו טקסט חלופי אינפורמטיבי לתמונות.

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

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

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

מידע נוסף

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