הבסיס לwai-aria

(  (a11y) Accessible Rich Internet Applications 1.1)

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

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

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

כוחה של שפת ARIA היא

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

איך להשתמש ב- WAI-ARIA

כל כך פשוט להשתמש ב WAI-ARIA. השפה בנויה משני סוגי מאפיינים ROLE  שהוא מציין תפקיד. בעזרת ROLE נוכל להגדיר "תפקיד" לאלמנט ב-DOM. למשל נוכל להגדיר DIV ככפתור או כפריט ברשימה. המאפיין השני הוא ARIA-* . מאפיין זה הוא ממעשה הגדרת המצב של הROLE. לדוגמה אם הגדרנו DIV כצ'קבוקס אנחנו צריכים לספק גם האם הוא מסומן או לא.

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

<div role=”some role” aria-*=”some state”></div>

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

הערות:

• "*" מסמלת המשך למאפיין.
• לא תמיד תהיה מאפיין ARIA-*.
• חלק מחוקי ה ARIA נדרשים במצבים מסוימים לשינוי דינמי. במידה ולכך יש להשתמש בהם בעזרת JS

 

כללי שימוש ב- WAI-ARIA

קיימים 5 חוקים המגדירים מתי נכון ורצוי להשתמש ב- WAI-ARIA. יש להקפיד ככל שאפשר על חוקים אלו.

כלל ראשון

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

<div role=”heading” aria-level=”2"> text </div>

השתמשו בתגית המתאימה

<h2> text </h2>

למעט בשלושה מקרים:

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

כלל שני

אין לשנות את הגדרות של האלמנטים בעזרת חוקי ARIA מעבר למה שנועדו. לדוגמה: להפוך תגית כותרת H1 לכפתור. ניתן להשתמש בהגדרות קרובות או דומות מבחינת החוקי ה ARIA. לדוגמה

<h1 role=”button”>some text </h1>

למעשה הכותרת הופכת להיות כפתור כאילו כתבתי את הקוד בצורה הבאה:

<button>some text</button>

מבחינה טכנית, תוכנות קוראות מסך תתייחס לכותרת ככפתור. WAI-ARIA לא ישנו את מראהו או תפקודו אבל מבחינת תוכנות קוראות מסך מדובר בכפתור שניתן ללחוץ עליו. WAI-ARIA לא מוסיפה אפשרות ללחיצה כפי שיש לתגית BUTTON (את זה משיגים בעזרת JS). WAI-ARIA לא תוסיף חיווי האם הכפתור לחוץ או לא. משתמש בתוכנת קוראת מסך יבין שמודבר בכפתור לכל דבר ועניין.

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

כלל שלישי

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

כלל רביעי

אסור לגרום לאלמנטים ל"להעלם" מהמסך בעזרת חוקי ARIA. (נלמד בהמשך). לדוגמה למה שאסור

<button role="presentation">press me</button>
או       
<button aria-hidden="true">press me</button>

הכלל הוא האם האלמנט אינו גלוי לכולם, אז ניתן להעלים.

כלל חמישי

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

 

• הנגשת קוד