Apps met één pagina vormen een aanzienlijke uitdaging op het gebied van toegankelijkheid als het gaat om het communiceren van weergaveveranderingen. Zonder een pagina te vernieuwen, pikken schermlezers deze belangrijke wijzigingen in de gebruikersinterface niet op, waardoor slechtziende gebruikers in de war raken en zich er niet van bewust zijn.
Een oplossing is om een bericht te maken op basis van de paginatitel en een ARIA-live-regio te gebruiken om expliciet, via een nuttig bericht, aan te kondigen dat een nieuwe weergave is geladen. Maak eerst een functie die wordt aangeroepen wanneer viewContent wordt bijgewerkt. AngularJS biedt voor dit doel een $ viewContentLoaded-evenement. Luister in de controllercode naar de gebeurtenis en roep een functie aan (in CoffeeScript):
app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ on ’$ viewContentLoaded’, kondce_view_loaded
Werk in de functie aankondiging_view_loaded de paginatitel bij en kondig het bericht aan. Hoewel frameworks met één pagina paginatitels niet automatisch bijwerken, zorgt het gesynchroniseerd houden van de paginatitel met de huidige weergave voor een beter begrip van de gebruikers van de weergave.
Een manier om dit te doen is door ergens in de weergave een gegevensattribuut te gebruiken om de titel van de weergave op te slaan:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Maak nu een bericht met de bijgewerkte paginatitel en kondig het aan:
$ .announce (document.title + ’, weergave geladen’)
$ .announce () is een jQuery-functie die een enkele, niet-zichtbare live-regio gebruikt om inhoud aan te kondigen. Deze aanpak helpt de code en debugging-inspanningen te vereenvoudigen in vergelijking met het ad-hoc gebruik van live regio's. Er zijn echter enkele praktische tips om te onthouden.
Maak eerst een enkele live-regio 'omroeper' op uw pagina om inhoud aan te kondigen met aria-live = "polite | assertive". Gebruik geen andere live-regio's, inclusief live-regiorollen (bijv. Role = "alert | timer | log"). Een voorbeeld live regio:
div aria-live = "polite" id = "omroeper"> (Tekst die hier wordt toegevoegd of bijgewerkt, wordt aangekondigd) / div>
Ten tweede, wis de inhoud van de live-regio kort na het bijwerken van de inhoud. Dit voorkomt dat gebruikers op oude berichten stuiten.
Gebruik ten slotte, zoals bij elke toegankelijkheidstechniek, $ .announce () oordeelkundig. Het mag alleen worden gebruikt voor het communiceren van belangrijke UI-updates.
Woorden: Patrick Fox
Patrick Fox is directeur Web UI-technologie bij Razorfish in Austin. Dit artikel is oorspronkelijk verschenen in nummer 271 van net magazine.
Vond dit leuk? Lees deze!
- De handleiding voor ontwerpers voor digitale toegankelijkheid
- De beste gratis scriptlettertypen
- Gratis selectie van graffiti-lettertypen
