תוויות וקשרים של ARIA

שימוש בתוויות ARIA ליצירת תיאורי רכיבים נגישים

אליס בוקסהול

דייב גאש

מגין קירני

Labels (תוויות)

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

תווית ARIA

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

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

ARIA-labeledby

aria-labelledby מאפשר לנו לציין את המזהה של רכיב אחר ב-DOM כתווית של רכיב.

זה דומה לשימוש ברכיב label, עם כמה הבדלים עיקריים.

1. ניתן להשתמש ב-aria-labelledby בכל אלמנט, לא רק ברכיבים שניתן להוסיף להם תווית.
2. אלמנט label מתייחס למה שהוא מתייג, אבל הקשר מתבטל במקרה של aria-labelledby – הדבר שמסומן בתווית מתייחס למה שמסומן בתווית.
3. ניתן לשייך רק אלמנט תווית אחד לאלמנט שניתן לתווית, אבל ל-aria-labelledby יש אפשרות להשתמש ברשימה של IDREFs כדי ליצור תווית מכמה רכיבים. התווית תשורשר לפי הסדר של מזהי ה-IDREF.
4. אפשר להשתמש ב-aria-labelledby על מנת להפנות לרכיבים מוסתרים, אחרת לא יופיעו בעץ הנגישות. לדוגמה, אפשר להוסיף span מוסתר ליד האלמנט שרוצים להוסיף לו תווית, ולהפנות אליו באמצעות aria-labelledby.
5. עם זאת, מאחר ש-ARIA משפיעה רק על עץ הנגישות, aria-labelledby לא מספק את ההתנהגות המוכרת של לחיצה על תוויות כתוצאה מהשימוש ברכיב label.

חשוב לציין ש-aria-labelledby מבטל את כל מקורות השמות האחרים של רכיב. לדוגמה, אם לאלמנט יש גם aria-labelledby וגם aria-label, או aria-labelledby ו-HTML מקורי label, התווית aria-labelledby תמיד מקבלת עדיפות.

מערכות יחסים

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

המפרט של ARIA כולל שמונה מאפיינים של קשרים. שישה מהרכיבים האלה, aria-activedescendant, aria-controls, aria-describedby, aria-labelledby ו-aria-owns, מפנים לרכיב אחד או יותר כדי ליצור קישור חדש בין הרכיבים בדף. ההבדל בכל אחד מהמקרים הוא המשמעות של הקישור והאופן שבו הוא מוצג למשתמשים.

בעלות אריה

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

ARIA-Activeצאצא

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

אריה מתוארת על ידי

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

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

אריה-פוזינסט ואריה-setsize

שאר מאפייני הקשר הם מעט שונים ופועלים יחד. aria-posinset ('מיקום בקבוצה') ו-aria-setsize ('גודל הקבוצה') קשורים להגדרת קשר בין רכיבים אחים בקבוצה, כמו רשימה.

במקרים שבהם אי אפשר לקבוע את גודל הקבוצה לפי הרכיבים שקיימים ב-DOM, למשל כשנעשה שימוש ברינדור עצל כדי למנוע הצגה של כל רשימה גדולה ב-DOM בבת אחת – aria-setsize יכול לציין את גודל הקבוצה בפועל ו-aria-posinset יכול לציין את מיקום הרכיב בקבוצה. לדוגמה, בקבוצה שעשויה להכיל 1,000 רכיבים, אפשר לומר שלרכיב מסוים יש aria-posinset של 857 למרות שהוא מופיע קודם ב-DOM, ואז להשתמש בטכניקות HTML דינמיות כדי להבטיח שהמשתמש יוכל לעיין ברשימה המלאה לפי דרישה.