Apps på en side udgør en betydelig tilgængelighedsudfordring, når det kommer til at kommunikere visningsændringer. Uden en sideopdatering opfanger skærmlæsere ikke disse vigtige UI-ændringer, hvilket efterlader synshæmmede brugere forvirrede og uvidende.
En løsning er at oprette en besked baseret på sidetitlen og udnytte en ARIA live-region til eksplicit at meddele, via en nyttig besked, at en ny visning er indlæst. Opret først en funktion, der kaldes, når viewContent opdateres. AngularJS leverer en $ viewContentLoaded-begivenhed til dette formål. I controller-koden skal du lytte til begivenheden og ringe til en funktion (i CoffeeScript):
app.controller 'PageController', ($ scope, $ location, $ http) -> $ scope. $ på '$ viewContentLoaded', announce_view_loaded
I funktionen announce_view_loaded skal du opdatere sidetitlen og annoncere beskeden. Mens enkeltsidesrammer ikke automatisk opdaterer sidetitler, forbedres det, at sidetitlen synkroniseres med den aktuelle visning, forbedrer brugernes forståelse af visningen.
En måde at gøre dette på er at bruge en dataattribut et eller andet sted i visningen til at gemme visningstitlen:
document.title = $ ('[data-viewtitle]'). data 'viewtitle'
Opret nu en besked ved hjælp af den opdaterede sidetitel, og meddel den:
$ .announce (document.title + ', se indlæst')
$ .announce () er en jQuery-funktion, der bruger en enkelt, ikke-synlig live region til at annoncere indhold. Denne tilgang hjælper med at forenkle koden og debugging-indsatsen sammenlignet med ad hoc-brug af levende regioner. Der er dog et par bedste fremgangsmåder at huske.
Opret først en enkelt 'kunngørers' liveregion på din side for at annoncere indhold ved hjælp af aria-live = "høflig | assertiv". Brug ikke andre live-regioner, inklusive live-regionroller (f.eks. Role = "alarm | timer | log"). Et eksempel på en levende region:
div aria-live = "høflig" id = "annoncør"> (Tekst tilføjet eller opdateret her vil blive annonceret) / div>
For det andet skal du rydde indholdet af den levende region kort efter opdatering af indholdet. Dette forhindrer brugere i at snuble over gamle beskeder.
Endelig, som med enhver tilgængelighedsteknik, skal du bruge $ .announce () med omtanke. Det bør kun bruges til at kommunikere vigtige UI-opdateringer.
Ord: Patrick Fox
Patrick Fox er direktør for web-UI-teknologi i Razorfish i Austin. Denne artikel opstod oprindeligt i nummer 271 af netmagasinet.
Kan du lide dette? Læs disse!
- Designerens guide til digital tilgængelighed
- De bedste gratis scriptskrifttyper
- Gratis graffiti skrifttypevalg
