ARIA

Accessible Rich Internet Applications (ARIA) (qu'on pourrait traduire par « applications internet riches et accessibles ») est un ensemble de rôles et d'attributs d'attributs qui définissent comment rendre le contenu et les applications web accessibles (notamment ceux développés avec JavaScript) pour les personnes avec des handicaps.

ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas. Ainsi, ARIA permet de rendre accessible les widgets JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.

La première règle d'ARIA s'énonce ainsi : « 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. ».

Voici un widget utilisé pour une barre de progression :

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100" />

Cette barre de progression utilise un élément <div> qui n'a pas de sémantique forte. On inclut donc un rôle ARIA et des propriétés pour ajouter une signification. Ainsi, l'attribut role="progressbar" informe le navigateur que cet élément est un widget pour une barre de progression, implémenté en JavaScript. Les attributs aria-valuemin et aria-valuemax indiquent les valeurs minimales et maximales de la barre de progression tandis que aria-valuenow décrit l'état courant (et doit donc être maintenu à jour avec JavaScript).

En plus des attributs déjà indiqués dans le document HTML, il est possible d'ajouter des attributs ARIA dynamiquement à l'aide de JavaScript, comme suit :

// On récupère la barre de progression dans le DOM.
const progressBar = document.getElementById("percent-loaded");

// On lui affecte des rôles et états ARIA
// afin que les outils d'assistance puissent
// identifier le type de widget.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// On crée une fonction qui peut être appelée à tout
// moment pour mettre à jour la valeur de la barre
// de progression.
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

Tout le contenu qui est disponible pour les personnes qui n'utilisent pas d'outils d'assistance doit également être disponible pour celles qui en utilisent. Réciproquement, aucune fonctionnalité ne devrait cibler uniquement les personnes utilisant des outils d'assistance. Dans notre exemple, la barre de progression doit être mise en forme afin de ressembler effectivement à une barre de progression.

À la place, il aurait été beaucoup plus simple d'utiliser l'élément natif <progress> à la place :

<progress id="percent-loaded" value="75" max="100">75 %</progress>