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

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

אליס בוקסהול

דייב גאש

מגין קירני

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 כדי לנרמל את פעולת הקורא.