Formation HTML5 : Accessibilité et WAI-ARIA
HTML5 - sémantique

Formation HTML5 : Accessibilité et WAI-ARIA

  1. Accessibilité et WAI-ARIA
  2. États et propriétés
  3. Rôles

Accessibilité et WAI-ARIA

Rôles ARIA

Quelques exemples de rôles ARIA :

main
définit le contenu principal du site
navigation
définit un ensemble de liens
tree et treeitem
définit des arbres (ex: le panneau gauche d'une interface de type explorer Windows)

   <article role="main">
       Lorem ipsum dolor sit amet
   </article>
                

États et propriétés ARIA

Les états et propriétes ARIA rendent disponible de l'information spécifique sur un objet (États et propriétés WAI-ARIA prises en charge)

Voici quelques exemples d'états et propriétés

aria-describedby
Spécifie des détails additionnels ou une description à un élément
aria-labeledby
Rend disponible de l'information sur ce que fait l'élément
aria-live
Spécifie qu'un élément peut être mis à jour (ex: par AJAX
aria-grabbed
Lorsque vrai, signifie qu'un élément a été attrapé (lors d'un glisser-déposer, sa valeur sera fausse lorsque déposé)

   <!-- Le div est mis à jour par un script / ajax et les outils d'adaptation
                    devraient annoncer la mise à jour -->
   <div id="updatedInfo" aria-live="polite">
   </div>
                

Un peu plus avec WAI-ARIA

Quelques exemples :

Élément HTML Rôle équivalent ARIA Description du rôle (si n'est pas déjà défini) Peut prendre d'autres valeurs ?
a link Lien Oui ? (Il y a plusieurs débats, button ?)
article article Contenu automone, réutilisable, indépendant ?
aside complementary Contenu additionnel relié au contenu principal, qui peut exister par lui-même Non
article region Article de contenu structuré Oui (ex: main)
ul list Liste ?
output status Élément de suivi Non