הסתרת תוכן מטכנולוגיה מסייעת
ARIA מוסתרת
שיטה חשובה נוספת לשיפור החוויה של משתמשים בטכנולוגיה מסייעת היא להבטיח שרק חלקים רלוונטיים בדף ייחשפו לטכנולוגיה מסייעת. יש כמה דרכים לוודא שקטע ב-DOM לא ייחשף לממשקי API של נגישות.
קודם כול, כל דבר שמוסתר באופן מפורש מה-DOM לא ייכלל בעץ הנגישות. לכן כל דבר שיש לו סגנון CSS visibility:
hidden
או display: none
או שיש בו מאפיין HTML5 hidden
יוסתר גם ממשתמשים של טכנולוגיה מסייעת.
עם זאת, רכיב שלא מוצג באופן חזותי אבל לא מוסתר באופן מפורש עדיין נכלל בעץ הנגישות. אחת מהשיטות הנפוצות היא הוספת 'טקסט של קורא מסך בלבד' לרכיב שממוקם במיקום מוחלט מחוץ למסך.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
כמו כן, כפי שראינו, אפשר לספק טקסט של קורא מסך בלבד באמצעות מאפיין aria-label
, aria-labelledby
או aria-describedby
שמפנה לרכיב שמוסתרות במקרים אחרים.
למידע נוסף על יצירת טקסט מסוג "קורא מסך בלבד", קרא את המאמר הזה של WebAIM בנושא שיטות להסתרת טקסט.
לבסוף, באמצעות המאפיין aria-hidden
יש מנגנון להחרגת תוכן מטכנולוגיה מסייעת שאינו מוסתר מבחינה חזותית.
החלת המאפיין הזה על רכיב מסירה בפועל אותו ואת כל הצאצאים שלו מעץ הנגישות. החריגים היחידים הם רכיבים שאליהם קיימת הפניה באמצעות המאפיין aria-labelledby
או aria-describedby
.
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
לדוגמה, אפשר להשתמש ב-aria-hidden
אם יוצרים ממשק משתמש מודאלי שחוסם את הגישה לדף הראשי. במקרה כזה, משתמש שאינו רואה יכול לראות שכבת-על שקופה למחצה שמציינת שכרגע לא ניתן להשתמש ברוב הדף, אבל יכול להיות שמשתמש בקורא מסך עדיין יוכל לחקור חלקים אחרים בדף. במקרה הזה, כדי שתוכלו ליצור את מלכודת המקלדת כפי שמוסבר מוקדם יותר, אתם צריכים לוודא גם שחלקי הדף שלא נכללים בהיקף הנדרש הם aria-hidden
גם כן.
עכשיו, אחרי שהבנתם את העקרונות הבסיסיים של ARIA, איך הם פועלים עם הסמנטיקה של HTML מקומי, ואיך אפשר להשתמש בהם כדי לבצע ניתוחים גדולים למדי בעץ הנגישות, כמו גם לשנות את הסמנטיקה של רכיב אחד, נראה איך אפשר להשתמש בו כדי להעביר מידע רגיש לזמן.
aria-live
aria-live
מאפשר למפתחים לסמן חלק בדף כ'פעיל', בכך שצריך להעביר את העדכונים למשתמשים באופן מיידי, ללא קשר למיקום הדף, ולא אם הם רק חוקרים את החלק הזה בדף. כשלרכיב יש מאפיין aria-live
, החלק בדף שמכיל אותו ואת הצאצאים שלו נקרא אזור פעיל.
לדוגמה, אזור פעיל יכול להיות הודעת סטטוס שמופיעה כתוצאה מפעולה של משתמש. אם ההודעה חשובה מספיק כדי למשוך את תשומת הלב של המשתמש, חשוב מספיק להפנות את תשומת הלב של המשתמש
של הטכנולוגיה המסייעת אליה על ידי הגדרת המאפיין aria-live
. השוואה לגרסה הרגילה של div
<div class="status">Your message has been sent.</div>
עם המקבילה ה "חיה".
<div class="status" aria-live="polite">Your message has been sent.</div>
למאפיין aria-live
יש שלושה ערכים מותרים: polite
, assertive
ו-off
.
aria-live="polite"
מורה לטכנולוגיה מסייעת להתריע למשתמש על השינוי הזה אחרי שהוא מסיים את מה שהוא עושה כרגע. טוב להשתמש בו במקרים שבהם משהו חשוב אבל לא דחוף, ומתייחס לרוב השימושים ב-aria-live
.aria-live="assertive"
מורה לטכנולוגיה המסייעת להפסיק את הפעילות ולהתריע למשתמש על השינוי באופן מיידי. היא מיועדת רק לעדכונים חשובים ודחופים, כמו הודעת סטטוס כמו "אירעה שגיאה בשרת והשינויים שלך לא נשמרו. יש לרענן את הדף" או עדכונים לשדה להזנת קלט כתוצאה מפעולה ישירה של המשתמש, כמו לחצנים בווידג'ט של תצוגת שלבים.aria-live="off"
מורה לטכנולוגיה המסייעת להשעות זמניתaria-live
הפרעות.
יש כמה טריקים שנועדו לוודא שהאזורים החיים שלכם פועלים כמו שצריך.
קודם כול, סביר להניח שהאזור aria-live
שלכם יוגדר בטעינה הראשונית של הדף.
זהו כלל לא קשה, אבל אם נתקלתם בבעיות באזור aria-live
, יכול להיות שזו הבעיה.
שנית, קוראי מסך שונים מגיבים באופן שונה לסוגים שונים של שינויים. לדוגמה, אפשר להפעיל התראה בקוראי מסך מסוימים
על-ידי החלפת הסגנון hidden
של רכיב צאצא מ-true ל-false.
מאפיינים אחרים שפועלים עם aria-live
עוזרים לדייק את מה שמועבר למשתמש כשהאזור הפעיל משתנה.
הערך aria-atomic
מציין אם צריך להחשיב את כל האזור כשלם של כשמעבירים עדכונים. לדוגמה, אם בווידג'ט של תאריך שמכיל יום, חודש ושנה יש aria-live=true
ו-aria-atomic=true
, והמשתמש משתמש בפקד צעד כדי לשנות את הערך של החודש בלבד, התוכן המלא של הווידג'ט של התאריך יוקרא שוב. הערך של aria-atomic
יכול להיות true
או false
(ברירת המחדל).
aria-relevant
מציין אילו סוגי שינויים יש להציג למשתמש.
אפשר להשתמש בחלק מהאפשרויות האלה בנפרד או כרשימת אסימונים.
- תוספות, כלומר כל אלמנט שמוסיפים לאזור הפעיל הוא משמעותי. לדוגמה, אם מוסיפים טווח ליומן קיים של הודעות סטטוס, המשתמש יקרא את הטווח (בהנחה שהשדה
aria-atomic
היהfalse
). - text, כלומר תוכן הטקסט שמוסיפים לכל צומת צאצא הוא רלוונטי. לדוגמה, אם משנים את המאפיין
textContent
בשדה טקסט מותאם אישית, הטקסט שהשתנה יוקרא למשתמש. - הסרות, כלומר, צריך להעביר למשתמש את ההסרה של טקסט או צמתים של צאצאים.
- הכול. כלומר, כל השינויים רלוונטיים. עם זאת, ערך ברירת המחדל של
aria-relevant
הואadditions text
. כלומר, אם לא מציינים את הפרמטרaria-relevant
, המשתמש יעדכן את המשתמש בכל הוספה של רכיב, וזה כנראה מה שאתם רוצים.
לבסוף, aria-busy
מאפשרת לטכנולוגיה המסייעת להתעלם באופן זמני משינויים ברכיב, למשל בזמן טעינה. אחרי שהכול מוכן, צריך להגדיר את aria-busy
ל-FALSE כדי לנרמל את פעולת הקורא.