

( (a11y) Accessible Rich Internet Applications 1.1)
זאת "שפה" נוספת אשר מורכבת מאוסף של מאפיינים אשר נשתלים בתוך תגיות ה HTML. בעזרתם אנחנו מחדדים את המשמעות האלמנטים ומצבם בדף האינטרנט. שפה זו מספקת גשר בין תוכנות קוראות מסך המשמשים את האנשים עם מוגבלויות לבין ה- DOM.
לדוגמה, להוסיף בר התקדמות נגיש שמודיע למשתמש עיוור כמה זמן נשאר לתוכן להטען או פעולה להסתיים. דוגמה נוספת היא הוספת פקדים שאינם נכתבים בעזרתHTML סטנדרטי.
WAI-ARIA מאפשר לך להגדיר משמעות לאזורים של דף אינטרנט. אלה יכולים להיות תפריטים, תוכן עיקרי, תוכן המשני, באנרים, מידע, וכן הלאה.
כל כך פשוט להשתמש ב WAI-ARIA. השפה בנויה משני סוגי מאפיינים ROLE שהוא מציין תפקיד. בעזרת ROLE נוכל להגדיר "תפקיד" לאלמנט ב-DOM. למשל נוכל להגדיר DIV ככפתור או כפריט ברשימה. המאפיין השני הוא ARIA-* . מאפיין זה הוא ממעשה הגדרת המצב של הROLE. לדוגמה אם הגדרנו DIV כצ'קבוקס אנחנו צריכים לספק גם האם הוא מסומן או לא.
מוסיפים את שתי המאפיינים לתגית בHTML. התחביר הנכון נכתב כך:
<div role=”some role” aria-*=”some state”></div>
חשוב להזהר ולהגדיר נכון את WAI-ARIA אחרת אנחנו פוגעים ברמת הנגישות וביכולת של תוכנות קוראות מסך להשתמש ונתח את הדף נכון.
הערות:
קיימים 5 חוקים המגדירים מתי נכון ורצוי להשתמש ב- WAI-ARIA. יש להקפיד ככל שאפשר על חוקים אלו.
במידה וקיימת תגית HTML עדיף להשתמש בה מאשר ליצור אלמנט לדוגמה במקום להשתמש בDIV ולהגדירו ככותרת
<div role=”heading” aria-level=”2"> text </div>
השתמשו בתגית המתאימה
<h2> text </h2>
למעט בשלושה מקרים:
אין לשנות את הגדרות של האלמנטים בעזרת חוקי 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.
Bona @ 2017. All rights reserved. | Designed by Colorlib