שימוש בתוויות ARIA ליצירת תיאורי רכיבים נגישים
Labels (תוויות)
ב-ARIA יש כמה מנגנונים להוספת תוויות ותיאורים לרכיבים. למעשה, ARIA היא הדרך היחידה להוסיף טקסט עזרה או תיאור נגיש. עכשיו נבחן את המאפיינים שבהם נעשה שימוש ב-ARIA כדי ליצור תוויות נגישות.
תווית ARIA
aria-label
מאפשר לנו לציין מחרוזת שתשמש כתווית הנגישה.
הפעולה הזו מבטלת מנגנון אחר של תוויות נייטיב, כמו רכיב label
. לדוגמה, אם ב-button
יש גם תוכן טקסט וגם aria-label
, המערכת תשתמש רק בערך aria-label
.
אפשר להשתמש במאפיין aria-label
אם יש לכם סימון חזותי כלשהו
למטרת האלמנט, כמו לחצן שמשתמש בגרפיקה במקום בטקסט, אבל עדיין צריך להבהיר את המטרה הזו לכל מי שאין לו גישה
לאינדיקטור הוויזואלי, למשל לחצן שמשתמש רק בתמונה כדי לציין את מטרתו.
ARIA-labeledby
aria-labelledby
מאפשר לנו לציין את המזהה של רכיב אחר ב-DOM כתווית של רכיב.
זה דומה לשימוש ברכיב label
, עם כמה הבדלים עיקריים.
- ניתן להשתמש ב-
aria-labelledby
בכל אלמנט, לא רק ברכיבים שניתן להוסיף להם תווית. - אלמנט
label
מתייחס למה שהוא מתייג, אבל הקשר מתבטל במקרה שלaria-labelledby
– הדבר שמסומן בתווית מתייחס למה שמסומן בתווית. - ניתן לשייך רק אלמנט תווית אחד לאלמנט שניתן לתווית, אבל ל-
aria-labelledby
יש אפשרות להשתמש ברשימה של IDREFs כדי ליצור תווית מכמה רכיבים. התווית תשורשר לפי הסדר של מזהי ה-IDREF. - אפשר להשתמש ב-
aria-labelledby
על מנת להפנות לרכיבים מוסתרים, אחרת לא יופיעו בעץ הנגישות. לדוגמה, אפשר להוסיףspan
מוסתר ליד האלמנט שרוצים להוסיף לו תווית, ולהפנות אליו באמצעותaria-labelledby
. - עם זאת, מאחר ש-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 דינמיות כדי להבטיח שהמשתמש יוכל לעיין ברשימה המלאה לפי דרישה.