https://www.w3.org/WAI/PF/aria-practices/
===Règle n°1 sur l'usage de WAI-ARIA en HTML===
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.

===Règle n°2 sur l'usage de WAI-ARIA en HTML===
Ne pas changer la sémantique native (balises) sauf si l'on y est obligé.

<code>
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>
</code>
===Règle n°3 sur l'usage de WAI-ARIA en HTML===
Tous les contrôles ARIA doivent pouvoir être utilisés avec le clavier.
===Règle n°4 sur l'usage de WAI-ARIA en HTML===
Ne pas utiliser role="presentation" ou aria-hidden="true" sur un élément visible et **focusable**.
<code>
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>
</code>
===Règle n°5 sur l'usage de WAI-ARIA en HTML===
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 :
<code>
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">
</code>
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.
<code><!-- HTML input element with combox role -->

      <label>
      user name <input type="text"  role="combobox";>
      </label>
</code>
Une div quelque soit le rôle assigné n'est pas un élément HTML labelable.
<code><label>
      user name <div  role="combobox"></div>
      </label>
</code>

=== En quoi l'ajout d'un rôle influe sur la sémantique native ? ===

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.
==Ce que l'ajout d'un rôle ne fait pas==
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.


=== Ajouter de l'ARIA inline ou par script ?===
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.