DokuWiki

Si on peut utiliser un élément html, ou un attribut, avec la sémantique et le comportement recherché déjà intégré (dans HTML5), le faire plutôt que d'utiliser un autre élément re-adapté par l'ajout d'un rôle, état ou propriété ARIA.

Ne pas changer la sémantique native (balises) sauf si l'on y est obligé.

Non : <h1 role=button>heading button</h1>
Oui : <h1><button>heading button</button></h1>
Si impossible d'utiliser l'élément correct préférer : <h1><span role=button>heading button</span></h1>

Tous les contrôles ARIA doivent pouvoir être utilisés avec le clavier.

Ne pas utiliser role=“presentation” ou aria-hidden=“true” sur un élément visible et focusable.

Non : <button role=presentation>press me</button>
Non : <button aria-hidden="true">press me</button>
Si un élément ne peut être vu ou que l'on ne peut interagir avec :
button {visibility:hidden}
<button aria-hidden="true">press me</button>

Tous les éléments intéractifs doivent avoir un nom accessible.

Un élément intéractif a un nom accessible quand sa propriété Accessibility API accessible name (ou équivalent) à une valeur.

Exemple, le input type=text dans le code qui suit a un label visible 'user name' mais pas de nom accessible :

user name <input type="text">

    or

<!-- label element used, but not associated with the control
it is supposed to label -->

    <label>user name</label> <input type="text">

Par comparaison, le input type=text dans le code qui suit a un label visible 'user name' et un nom accessible. Cet exemple à un nom accessible car l'élément input est un élément labelable et que l'élément label est correctement utilisé pour associer son text avec l'élément input.

L'élément label ne peut être utilisé pour fournir un nom accessible pour des contrôleurs personnalisé, sauf si le label référence un élément natif html labelable element.

<!-- HTML input element with combox role -->

      <label>
      user name <input type="text"  role="combobox";>
      </label>

Une div quelque soit le rôle assigné n'est pas un élément HTML labelable.

<label>
      user name <div  role="combobox"></div>
      </label>

L'ajout d'un rôle ARIA override le rôle sémantique d'origine dans l'arbre sémantique qui est rapporté via l'API d'acessibilité. Par conséquent ARIA affect indirectement ce qui est rapporté à un lecteur d'écran ou une autre technologie assistive.

Un role ARIA ne fera pas ressembler ou se comporter différemment pour une personne n'utilisant pas une technologie assistive. Cela ne change pas les comportements, états ou propriétés de l'élément hôte mais uniquement sa sémantique native.

Si le rôle ou l'attribut ARIA ne se base pas sur un script pour fournir un comportement/interaction, alors il est safe d'inclure le ARIA inline.

Si le marquage est uniquement supporté dans le cas d'une navigation avec langage de script, il est également safe d'inclure le ARIA inline, il ne fonctionnera simplement pas sans javascript.

Pour le rester, insérer, modifier ou enlever ARIA via scripting.