מבוא ל-ARIA

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

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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

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

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

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

<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.

עץ הנגישות הרגיל של DOM.
עץ הנגישות המורחב של ARIA.

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

חשוב להבין שאין צורך להגדיר מחדש את סמנטיקה של ברירת המחדל. ללא קשר לשימוש בו, לרכיב <input type="checkbox"> סטנדרטי של HTML אין צורך במאפיין 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.

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