הסתרה ועדכון של תוכן

הסתרת תוכן מפני טכנולוגיה מסייעת

Alice Boxhall

Dave Gash

Meggin Kearney

aria-hidden

שיטה חשובה נוספת לשיפור החוויה של משתמשים בטכנולוגיה מסייעת היא לוודא שרק חלקים רלוונטיים של הדף חשופים לטכנולוגיה המסייעת. יש כמה דרכים לוודא שחלק מה-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 שמזכירים את הרכיב שמוסתר.

מידע נוסף על יצירת טקסט 'לקורא מסך בלבד' זמין במאמר של WebAIM בנושא שיטות להסתרת טקסט.

לסיום, 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, החלק בדף שמכיל אותו וצאצאים שלו נקרא אזור פעיל.

לדוגמה, אזור פעיל יכול להיות הודעת סטטוס שמופיעה כתוצאה מפעולה של משתמש. אם ההודעה חשובה מספיק כדי למשוך את תשומת הלב של המשתמשים, חשוב שהיא תפנה אליה את תשומת הלב של משתמשים בטכנולוגיה מסייעת באמצעות מאפיין 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 ליומן קיים של הודעות סטטוס תגרום להודעה על ה-span להופיע למשתמש (בהנחה ש-aria-atomic היה false).
• text: אם מוסיפים תוכן טקסט לכל צומת צאצא הוא רלוונטי. לדוגמה, אם משנים את המאפיין textContent בשדה טקסט מותאם אישית, הטקסט שהשתנה ייקרא למשתמש.
• הסרות, כלומר יש להעביר למשתמש הודעה על הסרת טקסט או צמתים צאצאים.
• all, כלומר כל השינויים רלוונטיים. עם זאת, ערך ברירת המחדל של aria-relevant הוא additions text, כלומר אם לא מציינים את aria-relevant, המשתמש יקבל עדכון על כל הוספה לאלמנט, וזה מה שסביר להניח שתרצו.

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