Apper på en side utgjør en betydelig tilgjengelighetsutfordring når det gjelder å kommunisere visningsendringer. Uten en sideoppdatering, tar ikke skjermleserne opp disse viktige UI-endringene, noe som etterlater synshemmede brukere forvirret og uvitende.
En løsning er å lage en melding basert på sidetittelen, og utnytte en ARIA-live region for å eksplisitt kunngjøre, via en nyttig melding, at en ny visning er lastet. Opprett først en funksjon som kalles når viewContent oppdateres. AngularJS tilbyr en $ viewContentLoaded-hendelse for dette formålet. I kontrollerkoden kan du lytte etter hendelsen og ringe en funksjon (i CoffeeScript):
app.controller 'PageController', ($ scope, $ location, $ http) -> $ scope. $ on '$ viewContentLoaded', announce_view_loaded
I funksjonen announce_view_loaded oppdaterer du sidetittelen og kunngjør meldingen. Mens ensidige rammer ikke oppdaterer sidetitler automatisk, forbedrer brukernes forståelse av visningen å holde sidetittelen synkronisert med gjeldende visning.
En måte å gjøre dette på er å bruke et dataattributt et sted i visningen for å lagre visningstittelen:
document.title = $ ('[data-viewtitle]'). data 'viewtitle'
Lag nå en melding ved hjelp av den oppdaterte sidetittelen, og kunngjør den:
$ .announce (document.title + ', view loaded')
$ .announce () er en jQuery-funksjon som bruker en enkelt, ikke-synlig live-region for å kunngjøre innhold. Denne tilnærmingen hjelper til med å forenkle koden og feilsøkingsarbeidet sammenlignet med ad hoc-bruk av levende regioner. Det er imidlertid noen gode fremgangsmåter å huske.
Først oppretter du en enkelt ‘kunngjører’ live-region på siden din for å kunngjøre innhold ved hjelp av aria-live = "høflig | påståelig". Ikke bruk andre live-regioner, inkludert live-regionroller (f.eks. Role = "alert | timer | log"). Et eksempel på en levende region:
div aria-live = "høflig" id = "kunngjører"> (Tekst lagt til eller oppdatert her vil bli kunngjort) / div>
For det andre, tøm innholdet i den levende regionen kort tid etter oppdatering av innholdet. Dette forhindrer brukere i å snuble over gamle meldinger.
Til slutt, som med alle tilgjengelighetsteknikker, bruk $ .announce () med omhu. Den skal bare brukes til å kommunisere viktige UI-oppdateringer.
Ord: Patrick Fox
Patrick Fox er teknologidirektør på webgrensesnittet i Razorfish i Austin. Denne artikkelen dukket opprinnelig opp i nummer 271 av nettmagasinet.
Likte dette? Les disse!
- Designerveiledningen for digital tilgjengelighet
- De beste gratis skripttypene
- Gratis graffiti skriftvalg
