Les applications à page unique posent un défi d'accessibilité important lorsqu'il s'agit de communiquer les changements de vue. Sans une actualisation de la page, les lecteurs d'écran ne prennent pas en compte ces modifications importantes de l'interface utilisateur, laissant les utilisateurs malvoyants confus et inconscients.
Une solution consiste à créer un message basé sur le titre de la page et à tirer parti d'une région ARIA live pour annoncer explicitement, via un message utile, qu'une nouvelle vue a été chargée. Créez d'abord une fonction qui est appelée lorsque viewContent est mis à jour. AngularJS fournit un événement $ viewContentLoaded à cet effet. Dans le code du contrôleur, écoutez l'événement et appelez une fonction (dans CoffeeScript):
app.controller 'PageController', ($ scope, $ location, $ http) -> $ scope. $ on '$ viewContentLoaded', announce_view_loaded
Dans la fonction announce_view_loaded, mettez à jour le titre de la page et annoncez le message. Alors que les cadres à une seule page ne mettent pas automatiquement à jour les titres de page, le fait de garder le titre de page synchronisé avec la vue actuelle améliore la compréhension des utilisateurs de la vue.
Pour ce faire, vous pouvez utiliser un attribut de données quelque part dans la vue pour stocker le titre de la vue:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Créez maintenant un message en utilisant le titre de page mis à jour et annoncez-le:
$ .announce (document.title + ’, vue chargée’)
$ .announce () est une fonction jQuery qui utilise une seule région en direct non visible pour annoncer le contenu. Cette approche permet de simplifier le code et les efforts de débogage par rapport à l'utilisation ad hoc de régions actives. Cependant, il y a quelques bonnes pratiques à retenir.
Tout d'abord, créez une seule région en direct «annonceur» dans votre page pour annoncer le contenu à l'aide de aria-live = "polite | assertive". N'utilisez aucune autre région en direct, y compris les rôles de région en direct (par exemple, role = "alert | timer | log"). Un exemple de région en direct:
div aria-live = "polite" id = "speaker"> (Le texte ajouté ou mis à jour ici sera annoncé) / div>
Deuxièmement, effacez le contenu de la région en direct peu de temps après la mise à jour du contenu. Cela empêche les utilisateurs de tomber sur d'anciens messages.
Enfin, comme pour toute technique d'accessibilité, utilisez judicieusement $ .announce (). Il ne doit être utilisé que pour communiquer des mises à jour importantes de l'interface utilisateur.
Mots: Patrick Fox
Patrick Fox est directeur de la technologie Web UI chez Razorfish à Austin. Cet article a été initialement publié dans le numéro 271 du magazine net.
Aimait ça? Lisez-les!
- Le guide du concepteur sur l'accessibilité numérique
- Les meilleures polices de script gratuites
- Sélection gratuite de polices graffiti
