דגשים ומושגים בבדיקת נגישות לאתר אינטרנט

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

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

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

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

תקנה הנמצאת בחוק ובתקן הישראלי אבל חלק מ-WCAG 2.0 היא החובה להוסיף הצהרת נגישות באתר.

להלן מספר מושגים חשובים בהנגשת אתר:

פוקוס מקלדת

עבור אנשים רואים אשר משתמשים בניווט מקלדת חשוב לסמן היכן נמצא הפוקוס של המקלדת. מרכיב המקבל פוקוס בשימוש במקלדת צריך לקבל אפקט ויזואלי (קריטריון 2.4.7). ניתן לעשות זאת ע"י הגדרת CSS בקישורים כותרות וכד'. לדוגמא:a:focus{ border: 1px solid red; }

טקסט נסתר\לקורא מסך בלבד

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

. scn-reader-only {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px;
overflow: hidden; padding: 0; position: absolute; width: 1px;
}

באתרים שמשתמשים ב-bootstrap מוגדרת מראש מחלקה כזו בשם "sr-only".

להסתיר אלמנטים מקורא מסך

לפעמים צריך להסתיר אלמטים מקורא מסך ומניווט מקלדת, לדוגמא לינק שחוזר על עצמו מספר פעמים ואין צורך שיוקרא שוב ושוב. את זאת ניתן להשיג ע"י הוספת aria-hidden="true" לאלמנט שרוצים להסתיר.

הנגשת וידאו

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

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

הנגשת וידאו כוללת:

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

לקריאה נוספת על הנגשת וידאו

בכל מקרה כאשר מטמעים וידאו בעמוד באמצעות iframe חשוב להוסיף title עם תיאור, כותרת לתוכן ב-ifrmae.

הצהרת נגישות

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

ניגודיות

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

יש מגוון כלים לבדיקת ניגודיות:

האתר webaim

התוכנה Colour Contrast Analyser

התקן הישראלי דורש לעמוד ברמה AA:

ניגודיות ביחס של 4.5:1 לטקסט וטקסט גדול 3:1.

טקסט גדול מוגדר כטקסט שגדול מ-24 פיקסל (18pt) או טקסט מודגש שגדטל מ-18.6 פיקסל (14pt).

הנגשת טפסים

לכל שדה בטופס, לכלinput , צריך להיות label המשוייך לו באמצעות התכונה for, שהערך שלה הוא ה-id של ה-input.
<label for=”fname” >שם*</label> <input id="fname" name="fname" required="" type="text">אפשרות נוספת היא קינון של השדה בתוך תגית ה-label:
<label for=”fname” >שם*<input id="fname" name="fname" required="" type="text"></label>

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

לקריאה נוספת על הנגשת טפסים

הנגשת טפסים אתר webaim

היררכיית כותרות

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

הנגשת פופ-אפ (modal)

כאשר יש חלון קופץ (פופ-אפ או modal) צריך לשמור על מספר כללים על מנת שהחלון יהיה נגיש:

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

https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html
https://bitsofco.de/accessible-modal-dialog/

תפרטי נגישות

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

לקריאה נוספת:

מחזירים אותם הביתה עכשיו!