Aplicațiile cu o singură pagină reprezintă o provocare semnificativă de accesibilitate atunci când vine vorba de comunicarea modificărilor de vizualizare. Fără o reîmprospătare a paginii, cititoarele de ecran nu preiau aceste modificări importante ale interfeței de utilizare, lăsând confuzi și ignoranți utilizatorii cu deficiențe de vedere.
O soluție este să creați un mesaj bazat pe titlul paginii și să utilizați o regiune live ARIA pentru a anunța în mod explicit, printr-un mesaj util, că s-a încărcat o vizualizare nouă. Mai întâi creați o funcție care se numește atunci când viewContent este actualizat. AngularJS oferă un eveniment $ viewContentLoaded în acest scop. În codul controlerului, ascultați evenimentul și apelați o funcție (în CoffeeScript):
app.controller 'PageController', ($ scope, $ location, $ http) -> $ scope. $ pe '$ viewContentLoaded', announce_view_loaded
În funcția announce_view_loaded, actualizați titlul paginii și anunțați mesajul. În timp ce cadrele cu o singură pagină nu actualizează automat titlurile paginilor, păstrarea titlului paginii sincronizată cu vizualizarea curentă îmbunătățește înțelegerea utilizatorilor de vizualizare.
O modalitate de a face acest lucru este să utilizați un atribut de date undeva în vizualizare pentru a stoca titlul vizualizării:
document.title = $ ('[data-viewtitle]'). data 'viewtitle'
Acum creați un mesaj folosind titlul actualizat al paginii și anunțați-l:
$ .announce (document.title + ', vizualizare încărcată')
$ .announce () este o funcție jQuery care folosește o singură regiune live nevizibilă pentru a anunța conținut. Această abordare ajută la simplificarea codului și a eforturilor de depanare în comparație cu utilizarea ad hoc a regiunilor active. Cu toate acestea, există câteva bune practici de reținut.
Mai întâi, creați o singură regiune live „anunțator” în pagina dvs. pentru a anunța conținut folosind aria-live = "politicos | asertiv". Nu utilizați alte regiuni active, inclusiv roluri de regiuni live (de exemplu, rol = "alert | cronometru | jurnal"). Un exemplu de regiune live:
div aria-live = "polite" id = "crainic"> (Textul adăugat sau actualizat aici va fi anunțat) / div>
În al doilea rând, ștergeți conținutul regiunii live la scurt timp după actualizarea conținutului. Acest lucru împiedică utilizatorii să dea peste mesaje vechi.
În cele din urmă, la fel ca în cazul oricărei tehnici de accesibilitate, utilizați $ .announce () judicios. Ar trebui să fie utilizat numai pentru comunicarea actualizărilor semnificative ale UI.
Cuvinte: Patrick Fox
Patrick Fox este director de tehnologie UI Web la Razorfish din Austin. Acest articol a apărut inițial în numărul 271 al revistei net.
I-a plăcut asta? Citiți acestea!
- Ghidul proiectantului pentru accesibilitatea digitală
- Cele mai bune fonturi script gratuite
- Selecție gratuită de fonturi graffiti
