• Accueil
•   >  Recueil
•   >  Quelques notes sur les thématiques du RGAA
•   >  Scripts

Scripts

RGAA : Scripts

• ARIA
  • Notes
  • 5 règles de base
• Compatibilité
• Rôle pertinent
• État et changements d'état
• Changement de contexte
• Message de statut
  • Messages d'erreurs
  • Messages d'informations
  • Messages de notifiactions
  • Messages d’attente
• Ressources
• Motif de conception
• Environnement de test

ARIA

Notes

Surcharge de propriété, support général bon

• Notes on Using ARIA in HTML
• Autre note pour les développeurs ARIA : partie 1, partie 2, partie 3

5 règles de base

1. Privilégier le natif !
   Et tester la restitution.
2. Ne pas changer la sémantique
   Sémantique de titre conservé, vérifié avec le validateur du W3C si besoin

   <div role="tab">
       <h2>Titre onglet</h2>
   </div>

3. Composant interactif utilisable au clavier
   • Les composants doivent pouvoir être atteint à la tabulation, voir tabindex
   • Un bouton doit être sélectionnable avec espace et entrée
4. Ne pas supprimer la sémantique des éléments interactifs ou empêcher leur restitution
   • Attention aria-hidden="true" s'hérite des parents
   • Pour bloquer l'accès à un bouton

     <button type="button" tab-index="-1">Menu</button>

5. Tout composant interactif doit avoir un nom accessible
   Algorithme de calcul du nom accessible

Compatibilité

• Nom, rôle et valeurs
• Accès à la souris et au clavier
  Voir les Motif de conception (en anglais)
• Ou une alternative accessible
  Avec un datepicker non conforme, l'ajout d'un input saisissable rend le composant conforme
  (attention à ne pas être piégé dans une boucle de focus)

Rôle pertinent

• Lien : changement d'URL
• Bouton ou implémentation du motif ARIA button : action, événement, fonction JavaScript etc...

Même pour les single page application ;
Un composant qui déclenche l'ouverture d'une page ou d'un onglet doit être un lien même si ce sont des actions Javascript

<a role="link" tabindex="0" onclick="myFunction()"></a>
<!-- ou -->
<a href="#" onclick="myFunction()"></a>

État et changements d'état

• État sélectionné d'un bouton

  <button aria-pressed="false">Filtrer par nom</button>
  <button aria-pressed="true">Filtrer par nom</button>

• Composant inactif, on utilisera l'attribut disabled
• L'attribut aria-expanded="true/false" est défini sur un élément pour indiquer si un contrôle est développé
• Sur un groupe d'éléments liés, indiquer à l'utilisateur qu'il s'agit de l'élément actuel aria-current
• Lorsqu'un composant change d'état, que sa fonctionnalité est modifiée, on peut également passer par un changement de nom accessible ou de description (par exemple, la transformation d'un bouton lecture en pause, on vérifiera que l'intitulé a bien été modifié pour retranscrire la fonctionnalité qui sera déclenchée à la prochaine activation du bouton, pas uniquement l'apparence visuelle).

  <button>Lecture</button>
  <button class="hide">Pause</button>

• Liste exhaustive des États et propriétés ARIA (en anglais)

Changement de contexte

• un texte explicatif précédant le changement de contexte
  Ne pas faire de rechargement de page, d'une partie ou de changement de page par défaut, mettre un bouton pour faire l'action
• un bouton ou un lien explicite

Message de statut

Informer les technologies d’assistance des messages d’alerte de confirmation ou de statut, sans déplacer le focus de l'utilisateur.
Ne pas en abuser, parfois contre-productif

Si le focus est déplacé sur le message ok/Ko général alors pas besoin de mettre le role="alert" ou si la page se recharge et que le bloc est dans le DOM Dans tous les cas on fait une reprise de focus.

En cas d'erreur, ont se déplace l'utilisateur sur le premier champ en erreur/ ou message de confirmation + le mieux et de mettre aussi un message dans le titre de la page

Messages d'erreurs — Haute priorité

<p role="alert">Ceci est une alerte ajoutée dynamiquement</p>

Messages d'informations — Attends que ce soit son tour pour être vocalisé

<p role="status">Ceci est un status ajouté dynamiquement</p>

<p><span id="myLiveRegion1" aria-live="polite">Mais je sais rester polie</span></p>

Messages de notifiactions

Messages d’attente

Seulement pour des tâches qui prennent beaucoup de temps.

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2&nbsp;: Copie des fichiers…" aria-valuemax="100">
    Étape 2&nbsp;: Copie des fichiers…
</div>

Repositionner le focus sur un élément pertinent, par exemple la zone mise à jour

Ressources

• Une étude de l’accessibilité de certains bibliothèques JavaScript : jQuery + jQuery-ui, Bootstrap + plugin Paypal, AngularJS + AngularUI Bootstrap, React + Bootstrap, ReactJS.
• Correctifs proposés pour React Bootstrap, ReactJS, Jquery UI, Angular Bootstrap, Bootstrap Paypal.
• Une suite de tests mocha (nodejs)

Motif de conception

Motif de conception (design pattern) : décrit structure, rôles et propriétés et comportement d’un composant JavaScript(widget).
ARIA authoring practices

Environnement de test

Il est nécessaire de réaliser des tests de restitution et d'utilisation avec les lecteurs d'écran de la base de référence.
Guide sur les lecteurs d'écran.

Pour tester un site web sur un terminal mobile, l’environnement de test devra comporter une des deux combinaisons (iOS ou Android). À noter que dans le cas d’un site web mobile grand public, il est fortement conseillé de tester dans les deux environnements.

Tableau d'évaluation d'un modif de conception aria (.xlsx 128ko)