גרום לאפליקציות של עמודים בודדים לעבוד עם קוראי מסך

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

אחד הפתרונות הוא ליצור הודעה על בסיס כותרת הדף, ולמנף אזור חי של ARIA כדי להודיע ​​במפורש, באמצעות הודעה מועילה, כי נטען תצוגה חדשה. ראשית צור פונקציה שנקראת בעת עדכון viewContent. AngularJS מספק אירוע $ viewContentLoaded למטרה זו. בקוד הבקר, הקשיבו לאירוע והתקשרו לפונקציה (ב- CoffeeScript):

app.controller 'PageController', ($ scope, $ location, $ http) -> $ scope. $ on '$ viewContentLoaded', announce_view_loaded

בפונקציה announce_view_loaded, עדכן את כותרת הדף והודיע ​​על ההודעה. בעוד שמסגרות של עמודים בודדים אינן מעדכנות אוטומטית את כותרות העמודים, שמירת כותרת העמוד מסונכרנת עם התצוגה הנוכחית משפרת את הבנת המשתמשים את התצוגה.

אחת הדרכים לעשות זאת היא להשתמש במאפיין נתונים אי שם בתצוגה כדי לאחסן את כותרת התצוגה:

document.title = $ ('[data-viewtitle]'). נתונים 'viewtitle'

כעת צור הודעה באמצעות כותרת הדף המעודכנת, והודיע ​​עליה:

$ .announce (document.title + ', תצוגה טעונה')

$ .announce () היא פונקציית jQuery המשתמשת באזור חי יחיד ולא גלוי כדי להכריז על תוכן. גישה זו מסייעת לפשט את מאמצי הקוד והניפוי באגים בהשוואה לשימוש אד-הוק באזורים חיים. עם זאת, יש לזכור כמה שיטות עבודה מומלצות.

ראשית, צור אזור חי 'קריין' יחיד בדף שלך כדי להכריז על תוכן באמצעות aria-live = "מנומס | אסרטיבי". אל תשתמש באיזורים חיים אחרים אחרים, כולל תפקידים אזוריים חיים (למשל role = "alert | timer | log"). דוגמה לאזור חי:

div aria-live = "מנומס" id = "הכרוז"> (יוכרז טקסט שנוסף או עודכן כאן) / div>

שנית, נקה את תוכן האזור החי זמן קצר לאחר עדכון התוכן. זה מונע ממשתמשים להיתקל בהודעות ישנות.

לבסוף, כמו בכל טכניקת נגישות, השתמש ב- $ .announce () בצורה נבונה. יש להשתמש בו רק לצורך העברת עדכוני ממשק משתמש משמעותיים.

מילים: פטריק פוקס

פטריק פוקס הוא מנהל הטכנולוגיה של ממשק האינטרנט ברשת Razorfish באוסטין. מאמר זה הופיע במקור בגיליון 271 של המגזין נט.

אהבתי את זה? תקרא את זה!

• מדריך המעצב לנגישות דיגיטליות
• גופני התסריט בחינם הטובים ביותר
• בחירת גופני גרפיטי בחינם