Accessibilité, partie 3 ARIA

Dans l'article précédent de cette série, nous avons examiné le premier principe d'accessibilité: garantir que le contenu doit être disponible dans un format facilement perceptible par l'utilisateur. Si un utilisateur utilise des technologies d'assistance, un moyen de le rendre possible consiste à lui faciliter l'analyse et la compréhension de votre site et de son contenu. Dans cet article, nous allons nous concentrer sur une manière de procéder: ARIA.

WAI-ARIA (ARIA) est un protocole W3C qui améliore l'interaction de votre site avec les technologies d'assistance. Cela se fait de plusieurs manières:

Fournit un moyen de déclarer la structure d'une page (par exemple, en indiquant l'objectif ou le rôle d'une section de la navigation de page, la recherche, le contenu principal, etc.).
Améliore l'accessibilité des contrôles interactifs (tels que les menus arborescents, le glisser-déposer, les curseurs, les contrôles de tri, etc.) en déclarant leur "état", (par exemple, activé / désactivé, masqué, champs obligatoires).
Fournit un moyen de déclarer les régions où le contenu peut être mis à jour dynamiquement (appelé régions vivantes), afin que les mises à jour puissent être portées à la connaissance de l'utilisateur.

Les navigateurs existants ne posent pas de problème ici: ARIA est pris en charge par la plupart des navigateurs et lecteurs d'écran modernes, et pour le reste, il n'y a pas de problèmes de compatibilité..

Dans cette série, nous nous concentrerons sur le premier des points centraux ci-dessus, déclarant un élément rôle dans le cadre de la structure de la page.

Rôles

Si la structure d'une page peut être déterminée par programme et que chaque "région" de la page Web doit être identifiée (par exemple, la navigation du site, le contenu principal, l'encadré, etc.), les technologies d'assistance peuvent alors mieux présenter cette structure. l'utilisateur. Par exemple, les liens "passer au contenu" (que nous couvrirons dans le prochain article) pourraient devenir obsolètes si un lecteur d'écran a connu où le contenu principal était. HTML, cependant, ne fournit aucun moyen d'identifier l'objectif d'une région sur la page. C’est là que les rôles ARIA s’imposent.

Un rôle ARIA est simplement une valeur d'attribut qui identifie le objectif de l'élément. L'exemple le plus simple serait un formulaire de recherche:

…

Le rôle 'search' identifie cela

comme un formulaire de recherche du contenu du site et un lecteur d'écran capable de reconnaître qui sait où amener l'utilisateur s'il souhaite rechercher du contenu. Certains lecteurs d'écran, par exemple, fournissent une touche de raccourci pour accéder au formulaire de recherche. De même, la connaissance de la structure de la page permet aux technologies d'assistance de générer un «arbre» significatif de la page. Le lecteur d’écran JAWS, par exemple, utilise la touche point-virgule pour passer d’un rôle à l’autre, ce qui permet à l’utilisateur de naviguer rapidement entre les régions du site (son en-tête, la navigation, le contenu principal, etc.)..

Ce type d'attribut s'appelle Document Rôles Repères, et parmi les valeurs disponibles, il y a:

Bannière

Contenu lié au site Web, par exemple le nom du site Web et / ou le logo de la société. Dans la plupart des thèmes, cette information est en header.php, et étiquette un élément qui enveloppe le titre, la description et le logo du site avec ce rôle:

">

La navigation

Ce rôle identifie la partie de la page contenant les liens de navigation du document ou du site Web. Un thème peut avoir plusieurs emplacements de navigation, chacun pouvant être encapsulé dans un élément avec le rôle de navigation:

  «primaire»)); ?>

Selon les spécifications HTML5, role = "navigation" est censé être implicite dans l'utilisation de

, et donc pas nécessaire. Cependant, il n'y a pas de mal à être explicite.

Principale

Le contenu principal de la page. Ce doit n'apparaissent qu'une fois sur une page. Chaque thème varie, mais les fichiers de modèle pertinents incluent généralement:

index.php
single.php
page.php

Votre "boucle principale", par exemple, peut ressembler à quelque chose comme:

   // Le contenu de la boucle

et vos modèles de page pourraient ressembler à quelque chose comme:

Chercher

Ceci identifie le (s) formulaire (s) de recherche sur votre site et peut être utilisé plusieurs fois. La plupart des thèmes ne «codent» pas en dur un formulaire de recherche dans leur thème, mais s'appuient plutôt sur des régions widgetisées dans lesquelles l'utilisateur peut ajouter le widget de recherche. Dans ce cas (et en supposant que vous utilisez WP 3.6 ou une version ultérieure), vous n'avez rien à faire: le formulaire de recherche par défaut de WordPress ajoute déjà le rôle de recherche de manière appropriée. De plus, il gère les étiquettes de formulaire et le bouton d'envoi de manière accessible..

Si vous codez en dur un formulaire de recherche dans votre thème, veillez à utiliser get_search_form () (voir codex). Enfin, si vous souhaitez que votre thème modifie le formulaire de recherche par défaut, vous pouvez créer un fichier modèle appelé searchform.php-mais veillez à ajouter le rôle de recherche. Le modèle de formulaire de recherche par défaut est:

Article

Cela identifie un contenu autonome qui a du sens de manière isolée. Un bon exemple de cela serait les articles de blog qui apparaissent sur votre page "articles". De même, chaque commentaire pourrait être considéré comme un "article". Il peut également être imbriqué: par exemple, un commentaire (article) peut être inséré dans le post du blog (article).

  role = "article"> // Titre de poste / extrait…

Complémentaire

Ceci identifie une région qui a été décrite comme "un contenu de support pour le contenu principal". Dans un contexte WordPress, cela peut signifier n'importe quelle barre latérale. Votre sidebar.php template, par conséquent, peut ressembler à quelque chose comme:

Contentinfo

Ceci est généralement utilisé pour identifier le pied de page. Officiellement, il est décrit comme:

Une grande région perceptible contenant des informations sur le document parent.

Par exemple, il peut inclure des notes de bas de page, des droits d’auteur, des liens vers des déclarations de confidentialité, etc. Cependant, il est généralement utilisé pour étiqueter le pied de page de la page, quel que soit son contenu. Firefox, Safari et Chrome attribuent automatiquement le rôle contentinfo à

Mots clés:

…  //Bas de page

ARIA et HTML5

Bien qu’il augmente, le support de HTML5 par les lecteurs d’écran varie. Par ailleurs, le support pour les points de repère ARIA est généralement bien meilleur. Ainsi, bien que de plus en plus de navigateurs mappent automatiquement les balises sémantique HTML5 sur leur rôle approprié, il est toujours judicieux d’énoncer explicitement le rôle. Toutefois, il convient de veiller à ne pas modifier le "rôle" natif d'un élément sémantique. Par exemple, vous devriez éviter de faire quelque chose comme:

Cliquez moi!

Vous trouverez ci-dessous une liste de certains éléments HTML5, ainsi que leurs rôles ARIA implicites..

Élément HTML5	Rôle historique implicite d'ARIA	Autres notes
	`role = "banner"`	Il devrait y avoir qu'une seule instance de bannière
	`role = "navigation"`
	`role = "main"`	Il devrait y avoir qu'une seule instance de main
	`role = "article"`
	`role = "complémentaire"`
	`role = "contentinfo"`	Il ne devrait y avoir qu'une seule instance de contentinfo
	`role = "bouton"`

Lorsque vous utilisez HTML5, vous devez utiliser un script tel que HTML5 Shiv v3.6, utilisé dans les thèmes Twenty *, pour prendre en charge les navigateurs hérités..

Conclusion

Déclarer les rôles ARIA est un moyen extrêmement simple d'aider les utilisateurs de technologies d'assistance à interpréter la mise en page de votre site et à trouver le contenu qu'ils recherchent. Dans la prochaine partie de cette série, nous examinerons le principe de l’assurance que votre thème est Opérable. En termes clairs, cela signifie que les utilisateurs devraient pouvoir naviguer facilement et en toute sécurité sur votre site..

Code