נגישות לתמיכה

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

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

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

שילוב בקרות נגישות של ממשק המשתמש

אם המשתמשים לא יכולים לגשת לפקדי ממשק המשתמש, הם לא יכולים להשתמש בתוסף. הדרך הקלה ביותר ליצור ממשק משתמש נגיש היא להשתמש בפקד 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 לפקדים מותאמים אישית, ראו מצגת של דייב רג'ט מ-WWW2010.

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

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

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

element.tabIndex = 0

element.focus();

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

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

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

ניווט

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

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

קיצורי דרך

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

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

 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="button1">
  <img src="buttonpaste" role="button" alt="paste" id="button1">
</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.