Appar på en sida utgör en betydande tillgänglighetsutmaning när det gäller att kommunicera synförändringar. Utan en siduppdatering tar skärmläsarna inte upp dessa viktiga användargränssnittsändringar, vilket gör att synskadade användare blir förvirrade och omedvetna.
En lösning är att skapa ett meddelande baserat på sidrubriken och utnyttja en ARIA live-region för att via ett användbart meddelande uttryckligen meddela att en ny vy har laddats. Skapa först en funktion som anropas när viewContent uppdateras. AngularJS tillhandahåller en $ viewContentLoaded-händelse för detta ändamål. I kontrollerkoden, lyssna på händelsen och ring en funktion (i CoffeeScript):
app.controller 'PageController', ($ scope, $ location, $ http) -> $ scope. $ på '$ viewContentLoaded', announce_view_loaded
I funktionen announce_view_loaded uppdaterar du sidrubriken och meddelar meddelandet. Medan ramar med en sida inte automatiskt uppdaterar sidtitlar förbättras användarnas förståelse av vyn om sidtiteln synkroniseras med den aktuella vyn.
Ett sätt att göra detta är att använda ett dataattribut någonstans i vyn för att lagra vyn:
document.title = $ ('[data-viewtitle]'). data 'viewtitle'
Skapa nu ett meddelande med den uppdaterade sidrubriken och meddela det:
$ .announce (document.title + ', vy laddad')
$ .announce () är en jQuery-funktion som använder en enda, icke-synlig liveregion för att tillkännage innehåll. Detta tillvägagångssätt hjälper till att förenkla koden och felsökningsinsatser jämfört med ad hoc-användningen av levande regioner. Det finns dock några bästa metoder att komma ihåg.
Skapa först en enda ”live” -region på din sida för att tillkännage innehåll med aria-live = "artig | assertiv". Använd inte andra live-regioner, inklusive live-regionroller (t.ex. role = "alert | timer | log"). Ett exempel på en levande region:
div aria-live = "artig" id = "annonsör"> (Text som läggs till eller uppdateras här kommer att meddelas) / div>
För det andra, rensa innehållet i den levande regionen strax efter uppdatering av innehållet. Detta förhindrar att användare snubblar på gamla meddelanden.
Slutligen, som med alla tillgänglighetsmetoder, använd $ .announce () klokt. Den ska endast användas för att kommunicera viktiga UI-uppdateringar.
Ord: Patrick Fox
Patrick Fox är teknikansvarig för webbgränssnitt vid Razorfish i Austin. Denna artikel publicerades ursprungligen i nummer 271 av netmagasinet.
Gillade detta? Läs dessa!
- Designerens guide till digital tillgänglighet
- De bästa gratis teckensnitt
- Gratis graffiti typsnitt val
