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

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

Alice Boxhall

Dave Gash

Meggin Kearney

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