מבוא ל-ARIA

מבוא ל-ARIA וסמנטיקה של HTML לא מותאם

Alice Boxhall

Dave Gash

Meggin Kearney

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

בשיעור הזה נלמד איך לבטא סמנטיקה ש-HTML לא יכול לבטא להופיע בפני עצמו.

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

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

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

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

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

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA פועל על ידי שינוי והרחבה של עץ הנגישות הסטנדרטי DOM.

למרות ש-ARIA מאפשר לנו לשנות את הנגישות בצורה עדינה (או אפילו קיצונית) עץ עבור כל רכיב בדף, זה הדבר היחיד שהוא משתנה. ARIA לא מרחיבה את ההתנהגות המובנית של הרכיב. זה לא יגרום שניתן להתמקד ברכיב או לתת לו פונקציות event listener במקלדת. זה עדיין חלק משימת פיתוח.

חשוב להבין שאין צורך להגדיר מחדש את ברירת המחדל סמנטיקה. ללא קשר לשימוש בו, קוד HTML רגיל <input type="checkbox"> הרכיב לא צריך מאפיין ARIA נוסף של role="checkbox" כדי והכרזה נכונה.

חשוב גם לציין שלרכיבי HTML מסוימים יש הגבלות על סוג ה-ARIA שניתן להשתמש בהם בתפקידים ובמאפיינים. לדוגמה, יכול להיות שלא יחולו עליו תפקידים או מאפיינים נוספים על רכיב <input type="text"> רגיל.

למידע נוסף, ניתן לעיין במאמר ARIA במפרט HTML אפשר לקבל מידע נוסף.

בואו נראה אילו יכולות נוספות יש ל-ARIA.

מה אפשר לעשות בעזרת ARIA?

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

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

<button aria-label="screen reader only label"></button>

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

    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>

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

    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

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

כשהחלנו את role="checkbox" בדוגמה הקודמת, יידענו את טכנולוגיה מסייעת לכך שהאלמנט צריך לסמן את התיבה דפוס. ש הוא, אנחנו מבטיחים שהוא יהיה במצב מסומן (מסומנת או לא מסומן), ושניתן להחליף את המצב באמצעות העכבר או מקש הרווח, בדיוק כמו רכיב תיבת סימון סטנדרטי ב-HTML.

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

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

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

ב-ARIA יש גם תפקידים של ציוני דרך שמרחיבים את האפשרויות הזמינות ב-HTML5. צפייה עיצוב התפקידים של סימן מסחרי (Landmark) דפוסים לקבלת מידע נוסף.