הסתרת תוכן מפני טכנולוגיה מסייעת
הסתרת ARIA
שיטה חשובה נוספת בכוונון עדין של החוויה טכנולוגיות שבהן משתמשים מוודאים שרק חלקים רלוונטיים בדף חשופים לטכנולוגיה מסייעת. יש כמה דרכים להבטיח שקטע של ה-DOM לא נחשפים לממשקי API לנגישות.
ראשית, כל מה שמוסתר באופן מפורש מה-DOM לא ייכלל
בעץ הנגישות. לכן כל דבר שסגנון ה-CSS שלו הוא visibility:
hidden
או display: none
או שנעשה בו שימוש במאפיין hidden
של HTML5 יהיה גם כן
מוסתר ממשתמשים בטכנולוגיה מסייעת.
עם זאת, רכיב שלא מוצג מבחינה חזותית אך לא מוסתר באופן מפורש עדיין נכללות בעץ הנגישות. אחת מהשיטות הנפוצות היא להוסיף "טקסט בקורא מסך בלבד" ברכיב שנמצא במיקום מוחלט מחוץ למסך.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
כמו כן, כפי שראינו, ניתן לספק טקסט של קורא מסך בלבד באמצעות
aria-label
, aria-labelledby
או aria-describedby
שמפנים אל
שהיה מוסתר בדרך אחרת.
ראה מאמר זה של Webהחלת טכניקות להסתרה טקסט לקבלת מידע נוסף על יצירת 'קורא מסך בלבד' טקסט.
לבסוף, ARIA מספק מנגנון להחרגה של תוכן
בטכנולוגיה שאינה מוסתרת מבחינה חזותית, באמצעות המאפיין 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
. השוואה פשוטה עם 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
מציין אילו סוגי שינויים צריך להציג למשתמש.
יש אפשרויות שאפשר להשתמש בהן בנפרד או כרשימת אסימונים.
- תוספות: כלומר, כל רכיב שנוסף לאזור הפעיל הוא
משמעותית. לדוגמה, הוספת span ליומן קיים של סטטוס
משמעותן של הודעות היא שהמרווח יוכרז למשתמש (בהנחה שה
ש
aria-atomic
היהfalse
). - text, כלומר, תוכן הטקסט שמתווסף לכל צומת צאצא הוא
רלוונטיות. לדוגמה, שינוי המאפיין
textContent
של שדה טקסט מותאם אישית תקרא למשתמש את הטקסט שהשתנה. - הסרות, כלומר ההסרה של טקסט או צמתים צאצאים יועברו למשתמש.
- all – כלומר כל השינויים רלוונטיים. אבל ערך ברירת המחדל של
aria-relevant
הואadditions text
, כלומר אם לא מצייניםaria-relevant
הדף יעדכן את המשתמש לגבי כל הוספה לרכיב, וזה מה שהכי סביר שתרצו.
לבסוף, aria-busy
מאפשר לך להודיע לטכנולוגיה המסייעת
מתעלמים באופן זמני משינויים ברכיב, כמו למשל בזמן טעינה של פריטים. פעם אחת
הכל קיים, יש להגדיר את aria-busy
כ-False כדי לנרמל
פעולת הקורא.