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

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

*** הפוסט בכתיבה ועדין לא גמור ( נכון ל-17.8.2016 לסה"נ ) ***

 

טכניקות נגישות

טכניקות נגישות כלליות

 

  • הקישור הראשון בדף צריך להיות "דלג לתוכן"
    והוא צריך להוביל ישירות לעוגן (#) של התוכן
    זה לא חייב להיות גלוי , מותר לשים class שמסתיר את זה ,
  • דוגמא :
<a href="#content">דלג לתוכן</a>
  • אל תגביל את המשתמש בזמן – שיוכל לסיים מה שהוא רוצה לעשות.  לדוגמא – באתר מכרזים, שמנגנון הניצחון יקבע לפי ההצעה הטובה ביותר ולא לפי זמן.
    דוגמא נוספת – משחקי מחשב – לאפשר הוספת זמן
  • תן אפשרות להפסיק רענון אוטומטי – אם אתה מרענן אוטומטית את הדף \ חלק בדף, אתה צריך לספק לגולש אפשרות לעצור את הרענון.
    החריג היחיד – הוא במקרים של "חירום" – כמו למשל ההתראות שפיקוד העורף סיפק עבור נפילות של טילים בצוק איתן – במקרה כזה, לא צריך לאפשר לגולש להפסיק את הרענון.
  • תן אפשרות לרענן חלק בדף ( למשל קישור שמבצע רענון של מצב המניות \ חדשות וכדומה )
  • צריך לספק תחליף לכל דבר שהוא לא טקסט
    אני מסביר זאת בפירוט בהמשך, אך בכל מקרה העיקרון הוא שאתה צריך לקחת בחשבון שיש אנשים שלא מסוגלים לראות : תמונות, וידאו, אנימציות, קאפצאה , ולכן תספק לכל אלו תחליף בטקסט
    כאשר – בקטע הזה, המינימום שאתה צריך – זה לתת תיאור קצר שמסביר למשתמש שיש פה תמונה שמציגה משהו.
    אבל עדיף – לתת תיאור מלא, למשל – עבור וידאו, לתת תמליל מלא של הוידאו בתוך תגית הוידאו.
  • להודיע למשתמש מה הולך לקרות כתוצאה מפעולה שהוא יעשה בטופס \ בממשק לפני שזה מתרחש
    דוגמא  –
    יש לנו שאלות שבו כל פעם שעונים נכונה על שאלה מסויימת – אוטומטית המשתמש מועבר לשאלה הבאה .
    אז צריך להסביר לפני השאלה הראשונה שזה מה שהולך לקרות.דוגמא 2 – יש לנו מקום שבו בוחרים את שפת האתר באמצעות כפתורי רדיו  – אז בהסבר שיופיע לפני כפתורי הרדיו נכתוב בצורה ברורה שהשפה הולכת להשתנות.
  • אם משלבים באתר גם Components כמו JSP  או ActiveX , אז צריך לדאוג שהם יעבדו מול ה-Accessibility API ( כלומר מאפייני ARIA, roles ועוד )
    כדי שתוכנות שמסייעות לאנשים מוגבלים יוכלו להתחבר למידע.
  • חובה לוודא שאלמנטים בדף נקראים היטב על ידי עזרים של נגישות
    בעיקרון – התקן מציין שמי שכותב HTML תקין לפי התקן אז הוא יעמוד בזה בקלות
    יש כמה דברים בסעיף זה – שצריך להזכיר אותם:

    • נניח ויש תמונה שמשמשת ככפתור לחיץ – זה בעייתי, כי קורא מסך לא יבין במה מדובר
      לעומת זאת – אם נהפוך את התמונה לכפתור שיכלול Value ואת שם הכפתור – אז קורא מסך כן יוכל לקרוא את זה ולתת לגולש העיוור תיאור שמסביר שזה כפתור שנקרא….(הערך שכתבת במאפיין value) – קישור לדוגמא לכפתור שמוגדר נכון
  • כל מידע שמוצג בצבע – צריך להציג אותו גם עם הסבר במילים
    דוגמא -יש טופס עם שדות חובה  והם מסומנים באדום
    בנוסף  לייד כל שדה חובה מסומנת כוכבית אז המשפט בתחילת הטופס צריך לומר "השדות הדרושים מופיעים בצבע אדום וגם מסומנים ב- * כוכבית"נקודה לשים לב – הסימן כוכבית הוא דורש תשומת לב לגודל – כי לא כל קוראי המסך מתייחסים אליו ולא כל המשתמשים כבדי ראיה – שמים לב לכוכבית, בגלל הגודל שלה.
  • ניגודיות – ישנה נוסחה שקובעת מה "יחס הניגודיות" בין צבע הרקע לצבע הכתב. המטרה היא לקהל על כבדי ראיה.
    • בגדול – צריך לשמור על יחס 4.5:1
    • עבור טקסט גדול -אפשר גם יחס 3:1
    • אם קהל היעד הוא כבדי ראיה, או שרמת הנגישות הנדרשת היא AAA – אז נחוץ יחס של 7:1

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

  • מקלדת:לוודא שאפשר להגיע לכל מקום בדף עם המקלדת ( בעיקר Tab ) .
    לוודא שאין "מלכודות מקלדת" בדף – כלומר שאין מקום מסוים שאם נכנסים אליו – אז אי אפשר לצאת ממנו באמצעות המקלדת בלבד.
    לא לדרוש קצב הקלדה מסוים
  • אפשר להבין מה המשמעות של כל קישור מתוך הטקסט של הקישור עצמו
    לדוגמא :
    במשפט הבא – אפשר להבין מתוך ההקשר שהקישור מוביל אל הכתבה …
    המאמר בעיתון הזה מאפיין את הכותב.
  • השתמש בכותרות של HTML כדי לתת כותרת ( ולא רק הדגשה של כתב באמצעות CSS  )
  • תן פתרון טכני שמאפשר לראות כל פעם איפה הפוקוס של המקלדת
    כלומר שעוברים בין אלמנטים בדף באמצעות טאב – אז אפשר לראות ויזואלית על המסך איפה אנחנו נמצאים. (קישור עם דוגמא ל- CSS ודוגמא ל- JS כדי להציג ויזואלית היכן הפוקוס )
  • לסדר את התוכן ב-DOM כך שיהיה תואם לסדר שלו על המסך – זה תקף בעיקר ב-2 עניינים:
    • לוודא שאם עשיתם עיצוב CSS הוא תואם לסדר שמופיע ב-Html, כדי שמי שמשתמש ב"קורא מסך" יוכל להבין את הסדר  – למשל נניח ויש רשימת של פריטים בקטלוג , ובאמצע יש תמונה, ואחריה תיאור של התמונה. ובאמצעות Css דאגנו שהתיאור של התמונה יבוא מתחתיה – אז צריך לוודא שגם ב-Html התיאור של התמונה הוא אחרי התמונה המתאימה ( ולא לפניה, למרות שמבחינה טכנית זה אפשרי כמובן ) .
    • בערבוב של שפות , למשל אנגלית בתוך משפט בעברית, צריך להשתמש בתגיות שמאפשרות ל"קורא מסך" להבין שהשפה התחלפה
      דוגמא :

      <p>The title says "<span lang="he" 
      dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p>

טכניקות נגישות שנוגעות לניווט

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

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

טכניקות נגישות שנוגעות ל-Meta ול-Header

  • בתגית Html הפותחת, צריך להכניס מאפיין שפה ( סעיף 3.1.1 )
  • <html lang="fr">
  • צריך לשים תגית title שמתארת באמת מה מציג הדף

טכניקות נגישות – מידע שמתעדכן אוטומטית

  • תאפשר לגולש לשלוט בעדכון – כלומר – לעצור אותו, לבצע עדכון, וכדומה.

טכניקות נגישות – תמונות

  • תשתמש ב-alt  על כל תמונה
  • אם התמונה היא חסרת משמעות – למשל חלק מהרקע של האתר – אז תשים עבורה alt="" רייק.

טכניקות נגישות – אנימציות / הבהובים / דברים זזים

  • אפשר למשתמש להפסיק כל דבר שזז ( אנימציה \ וידאו \ פלאש \ סרגל חדשות , משהו זז)
    צריך ליידע את המשתמש באיזה מקש להשתמש כדי לעצור.
    אם לדוגמא אנחנו מציגים קישור למצגת בתוך Modal, אז אפשר לתת תיאור בתחתית ה-Modal שאומר "לחץ על מקש הרווח כדי לעצור" .
    יש חריגים כאן – בסעיף 2.2.2
    דוגמא לסרגל חדשות שיש בו כפתור עצירה
  • אל תגביל את המשתמש בזמן – שיוכל לסיים מה שהוא רוצה לעשות.  לדוגמא – באתר מכרזים, שמנגנון הניצחון יקבע לפי ההצעה הטובה ביותר ולא לפי זמן.
    דוגמא נוספת – משחקי מחשב – לאפשר הוספת זמן
  • הבהוב :
    להגביל הבהוב עד 3 פעמים בשניה.
    רכיב מהבהב בכל מקרה לא יותר מ-5 שניות
    לתת שליטה על עצירת ההבהוב
    סעיף מיוחד עבור הבהוב אדום – במידה ויש לכם משהו כזה – צריך לוודא שעומדים בסעיף כאן

טכניקות נגישות – סרטונים / אודיו

  • סרטונים – לשים כתוביות
    הדרכה על הוספת כתוביות לסרטונים ב-YouTube
  • צריך לספק משהו במקום הוידאו, עבור אנשים שלא יכולים לראות את הוידאו ( עוורים ) – הפתרון המקובל הוא לשים את התמליל של הוידאו בתוך תגית הוידאו.
    אפשר לראות דוגמא לתמליל של הוידאו בתוך תגית וידאו – כאן.
  • בסרטונים –אם יש קטע בסרט, שמובן מהצפיה, אבל לא מובן למי שרק קורא את הכתוביות –אז צריך להוסיף אודיו או כתוביות שמסבירות את מה שמתרחש.נניח ובסרטון יש אבא ובת שמנהלים שיחה ותוך כדי השיחה מתחילה שריפה מאחורי גבם – אז אדם עיוור שרק קורא את הכתוביות לא יראה את השריפה ולא יבין מדוע בסצינה הבאה הם בורחים.כדי לפתור את זה – צריך לשים כתוביות או קטע שמע שמסביר שמתחילה שריפה.
  • תיאור שמע או חלופה למדיה = התיאור הלא ברור הזה בעצם אומר כך :
    אם יש וידאו שרואים בעיניים בוידאו אבל זה לא מובן למי שרק מקשיב לאודיו של הוידאו , למשל עיוור.
    אז צריך לספק אפשרות טכנית לעוד "רצועת אודיו" שמסבירה מה הולך על המסך.
    אבל יש אפשרות נוספת  – חלופה למדיה : שזה בעצם טקסט שמתאר בדיוק את התוכן של הוידאו
    דוגמא – אם יש סרטון הדרכה באתר, שבו יש מדריך שמסביר ומראה ביחד, אז אפשר לספק אחרי / לפני הוידאו – הסבר כתוב במילים, שמסביר את אותו דבר שהוסבר בוידאו.
  • להפסיק אוטומטית קטע אודיו שמתנגן לבד אחרי 3 שניות או פחות.
    בכל מקרה של יותר מ-3 שניות אודיו, חייבים לאפשר לשלוט באודיו – כלומר להנמיך, לעצור וכדומה.

טכניקות נגישות – גרפים

  • צריך לתת תיאור של משמעות הגרף, למשל אם הגרף מראה שבחודש תשרי המכירות היו גדולות יותר מאשר בחשוון – אז התיאור של הגרף יהיה "המכירות בתשרי עלו על המכירות בחשוון".

טכניקות נגישות  – טפסים

  • תשתמש ב-Lables כדי להסביר למשתמש מה למלא בכל שדה
  • וולידציות – אם הגולש טועה – צריך להסביר לו באיזה שדה ספציפית הוא טעה, ומה הטעות
    צריך גם לספק דוגמא לתיקון ( אלא אם כן זה יוצר בעיית אבטחה ).
  • עבור דברים פיננסים או משפטיים – צריך לעמוד בלפחות אחד מתנאים :
    • הפעולה צריכה להיות הפיכה – כלומר אם הוא ירצה הוא יוכל לבטל זאת
      או
    • שהנתונים שהוא הקליד יבדקו – ואם ימצאו שגיאות – הוא יוכל לתקן
      או
    • שלפני שהוא מבצע את השמירה\שליחה – יהיה עמוד שבו הוא יוכל לסקור את כל מה שהוא מילא, ולאשר סופית
  • אם אתה דורש בשדה מסוים שיקלידו רק בפורמט מסויים –
    אז תספק דוגמא או הסבר לפורמט הרצוי.
  • אם  סדר השדות במעבר באמצעות tab שונה מאשר הסדר שבו צריך למלא אותם
    אז להשתמש ב tabindex עבור השדות \ הפקדים – כך שהסדר בו צריך למלא את השדות – יהיה הסדר הנכון ב tabindex
  • טריק – בכל אלמנט בתוך הטופס שאינו שדה – בדרך כלל הטאב לא עוצר בו, אבל – אם נשים בו tabindex="0"   אז זה יגרום לכך שבמעבר טאב – המשתמש יעצור על זה
    זה אידיאלי עבור הוראות, כמו למשל תגיות p בתוך הטופס שבהם אומרים למשתמש דברים כמו "מינימום 6 תווים" וכדומה ( קישור לדוגמא עם טאב אינדקס אפס ).
  • לא לשנות תוכן של אלמנט שמקבל פוקוס
  • לא לעשות משהו בלתי צפוי כתוצאה ממילוי דברים בטופס אלא אם כן הודעת למשתמש על זה
    • דוגמא טרוייאלית ביותר – יש טופס על המסך, וכדי לשמור אותו – צריך לשים כפתור Submit עם המילה "שמור" – זה כבר עונה על הסעיף הזה בתקן
    • למשל – יש לך שדה שאם ממלאים בו ערך מסוים – אז אתה אוטומטית פותח טופס מודאלי למילוי עוד כמה פרטים – במקרה זה צריך לכתוב משפט שאומר למשתמש שזה מה שהולך לקרות.
    • אל תגרום להעברה לדף אחר כתוצאה מבחירת ערך בדרופ דאון.

 

 

גכ

עוד פעולות נגישות שצריך לבצע אם מנגישים לרמה  AAA :

  • וידאו :
    מתורגמן לשפת הסימנים בשידור חי
  • אודיו :
    אם יש קולות רקע במקביל לדיבור, למשל מוזיקת רקע תוך כדי שהקריין מסביר – אז צריך לתת אפשרות להשתיק את קולות הרקע,
    ובכל מקרה צריך להקפיד שקולות הרקע יהיו לפחות 20 דציבלים פחות מהדיבור. ( סעיף 1.4.7 )
  • עבור כל ביטוי מיוחד \ מקצועי וכדומה – יש לתת קישור להסבר או להשתמש בתגיות של "הגדרות" dl/dt וכדומה
  • להוסיף "פירורי לחם" בעמודי האתר – כלומר מקום כלשהוא בעמוד שאומר למשתמש איפה הוא נמצא בתוך האתר,
  • לתת קישור לעזרה בכל דף – והעזרה צריכה להיות רלוונטית עבור הדף .
  • לתת אפשרות להקראה אוטומטית של תוכן האתר
  • מתרגם לשפת הסימנים עבור וידאו
  • לתת מנגנון טכני שיפרש ראשי תיבות או קיצורים
  • הכלל שחל על דברים פיננסים או משפטיים ברמה AA – אז ברמה AAA הוא חל על הכל, כלומר בכל טופס, צריך לספק אחד מ-3 אפשרויות – אפשרות לבטל , אפשרות לתקן לאחר שנמצאו שגיאות, ודף סקירה שמציג את התוכן לאישור סופי לפני שמירה.
  • גם אם משתמש יצא מה-Session בטעות, צריך לתת לו אפשרות לחזור ולהמשיך מחדש מאותה נקודה – בלי למלא שוב פעם את הנתונים

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *