Comment faire accessibilité et éco-conception @Démo publique

Fiche: Les règles ARIA

La première règle Aria

Si vous pouvez utiliser un élément natif HTML ou un attribut avec la sémantique et le comportement voulu qui existe nativement, faites-le plutôt que d'utiliser un autre élément en lui ajoutant un rôle, un état ou une propriété ARIA afin de le rendre accessible.

Dans quels cas est-ce impossible ?

La seconde règle Aria

Ne changer pas la valeur sémantiques d'un élémennt (hors cas de force majeure avérée).

Par exemple : il apparaît nécessaire de coder un entête qui est un onglet.

Ne pas faire:

<h2 role=tab>heading tab</h2>

Faire:

<div role=tab><h2>heading tab</h2></div>

Note 1

Si un élément non interactif est utilisé comme base à un élément interactif, les développeurs doivent ajouter la fonction sémantique avec ARIA et les interaction appropriées avec du script. Par exemple, dans le cas d'un bouton, il est bien meilleur et facile d'utiliser simplement un bouton (natif HTML).

Note 2

Il est fortement recommandé d'utiliser des éléments natifs HTML, qui ont la même valeur sémantique qu'un rôle ARIA, pour une compatibilité descendante. Par exemple, utiliser un élément HTML de liste comme squelette d'un composant script d'une structure arborescente en ARIA.

La troisième règle Aria

Tous les contrôles interactif ARIA doivent être utilisabble avec un clavier.

Si vous créez un composant pour lequel un utilisateur peut cliquer, tapper ou utiliser un "tirer / déplacé" ou tout autre type d'interaction avec le pointeur, l'utilisateur doit être capable de naviguer et réaliser les même actions / fonctions avec le clavier.

Tous les composants / objets interactifs doivent utiliser des scripts qui répondent et utilisent des touches (ou des combinaisons) clavier standards si nécessaire ou applicable.

En savoir plus

Les règles ARIA sont consultables à l'adresse suivante : https://w3c.github.io/using-aria/