Le app a pagina singola rappresentano una sfida significativa per l'accessibilità quando si tratta di comunicare le modifiche alla visualizzazione. Senza un aggiornamento della pagina, le utilità per la lettura dello schermo non rilevano queste importanti modifiche all'interfaccia utente, lasciando gli utenti con problemi di vista confusi e inconsapevoli.
Una soluzione è creare un messaggio basato sul titolo della pagina e sfruttare una regione live ARIA per annunciare esplicitamente, tramite un messaggio utile, che è stata caricata una nuova visualizzazione. Per prima cosa crea una funzione che viene chiamata quando viewContent viene aggiornato. AngularJS fornisce un evento $ viewContentLoaded per questo scopo. Nel codice del controller, ascolta l'evento e chiama una funzione (in CoffeeScript):
app.controller "PageController", ($ scope, $ location, $ http) -> $ scope. $ on "$ viewContentLoaded", annuncia_view_loaded
Nella funzione annuncia_view_loaded, aggiorna il titolo della pagina e annuncia il messaggio. Sebbene i framework a pagina singola non aggiornino automaticamente i titoli delle pagine, mantenere il titolo della pagina sincronizzato con la visualizzazione corrente migliora la comprensione della visualizzazione da parte degli utenti.
Un modo per farlo è utilizzare un attributo dati da qualche parte nella vista per memorizzare il titolo della vista:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Ora crea un messaggio utilizzando il titolo della pagina aggiornato e annuncialo:
$ .announce (document.title + ', visualizzazione caricata')
$ .announce () è una funzione jQuery che utilizza una singola regione live non visibile per annunciare il contenuto. Questo approccio aiuta a semplificare il codice e gli sforzi di debug rispetto all'uso ad hoc di regioni attive. Tuttavia, ci sono alcune best practice da ricordare.
Innanzitutto, crea una singola regione live "annunciatore" nella tua pagina per annunciare i contenuti utilizzando aria-live = "polite | assertive". Non utilizzare altre regioni attive, inclusi i ruoli delle regioni attive (ad es. Role = "alert | timer | log"). Un esempio di regione live:
div aria-live = "polite" id = "annunciatore"> (Il testo aggiunto o aggiornato qui verrà annunciato) / div>
In secondo luogo, cancella i contenuti della regione live subito dopo aver aggiornato il contenuto. Ciò impedisce agli utenti di incappare in vecchi messaggi.
Infine, come con qualsiasi tecnica di accessibilità, usa $ .announce () con giudizio. Deve essere utilizzato solo per la comunicazione di aggiornamenti significativi dell'interfaccia utente.
Parole: Patrick Fox
Patrick Fox è direttore della tecnologia dell'interfaccia utente Web presso Razorfish ad Austin. Questo articolo è apparso originariamente nel numero 271 di net magazine.
Questo mi piaceva? Leggi questo!
- La guida del designer all'accessibilità digitale
- I migliori font script gratuiti
- Selezione di font graffiti gratuita
