Test Guidé Intelligent des Éléments Interactifs

Les IGT des Éléments Interactifs prennent en charge le test de plusieurs états sans avoir à réexécuter les IGT. Un élément interactif est simplement tout ce avec quoi l'utilisateur interagit sur la page Web, comme des boutons, des liens, des entrées, des menus, etc.

Comment ça marche

La première chose que vous devrez faire est de mettre la page dans l’état que vous souhaitez tester. Ensuite, quelques questions simples vous guideront à travers les tests d’accessibilité requis pour chacun des éléments interactifs de la page.

Cliquez sur « DÉMARRER » lorsque vous êtes prêt à effectuer le test.

Étape 1 : Manquant

Tout d’abord, l’outil IGT va scanner la page (ou le composant) pour trouver tous les éléments interactifs. Si l'apprentissage machine est activé (voir la page des paramètres), il détectera tous les éléments non marqués avec des attributs interactifs (rôles, index d'onglet, etc.) qui peuvent en fait être interactifs.

Dans cette première question, il vous est demandé de sélectionner les éléments interactifs qui ont été manqués. S'il ne manque rien, cliquez simplement sur « SUIVANT ».

Ensuite, vous pouvez choisir l’élément que vous souhaitez tester. Par défaut, ces éléments sont regroupés « intelligemment » en utilisant notre algorithme pour regrouper les éléments similaires. Cependant, vous pouvez choisir de les regrouper par rôle ou de les présenter sans aucun regroupement à l'aide du contrôle « Grouper par ».

Étape 2 : Précision

Pour les éléments que vous choisissez de tester, il vous sera demandé de vérifier le nom accessible, le rôle et l'état de l'élément. Le nom accessible est utilisé pour transmettre le but des éléments interactifs tels qu'une étiquette sur un champ de formulaire. Le rôle indique avec quel contrôle l'utilisateur interagit (bouton, onglet, lien, etc.). L'état indique à l'utilisateur utilisant une technologie d'assistance quel est l'état actuel du contrôle (par exemple, sélectionné/non sélectionné, coché/décoché).

Nom accessible

Il vous sera demandé de confirmer que le nom accessible décrit avec précision l’objectif des éléments interactifs.

Rôle

Ensuite, si l’IGT est capable de détecter le rôle, il sera présélectionné. Vous pouvez remplacer la sélection par défaut si le rôle est différent de celui détecté dans une liste déroulante des rôles disponibles.

State(s)

De même, l’IGT affichera les états présélectionnés. Pour les éléments pour lesquels un état n'est pas pertinent, laissez l'état sur « Non applicable ». Après avoir confirmé que le nom Accessible, le rôle et l’état sont correctement transmis, vous pouvez tester un autre état du même élément ! Allez-y et placez l'élément interactif dans l'état supplémentaire que vous souhaitez tester (comme cocher une case, sélectionner un onglet, etc.). Une fois que vous êtes prêt, cliquez sur « VÉRIFIER L'ÉTAT DE L'ÉLÉMENT ». L'Outil de Guidage Interactif détectera le nouvel état et vous pourrez confirmer si l'état est correctement transmis. Cela sera répété pour tous les éléments que vous avez sélectionnés pour le test. Une fois que vous avez terminé de tester tous les éléments sélectionnés et les états que vous souhaitez tester, sélectionnez « SUIVANT ».

Ce qu'il évalue

Les éléments interactifs que les tests IGT vérifient sont :

• Noms accessibles valides
• Rôles valides
• États valides

Foire aux questions

Que signifie chacun des « États d'élément » disponibles ?

Vous trouverez ci-dessous une ventilation de chacun des états disponibles pour tester dans l'IGT des Éléments Interactifs.

Désactivé

Indique que qu'un élément n'est pas modifiable ou autrement exploitable. Lorsqu'il est désactivé, un élément n'est ni modifiable ni focalisable. La désactivation d'un élément peut être effectuée à l'aide de la disabled propriété HTML native (préférée) aria-disabled="true"ou.

Exemples désactivés

Bouton d'envoi désactivé :

<button type="submit" disabled>Submit</button>

Champ de saisie désactivé :

<form>
  <label for="email">Email</label>
  <input type="text" id="email" disabled />
</form>

Activé

Indique qu'un bouton à bascule est actuellement « enfoncé ». L'état enfoncé d'un élément est géré via l'attribut aria-pressed . Il existe 3 valeurs prises en charge pour aria-pressed :

• "true" : indique que le bouton bascule est actuellement enfoncé
• "false" : indique que le bouton bascule n'est pas actuellement enfoncé
• "mixed" : indique que les valeurs de plusieurs éléments contrôlés par le bouton bascule ne partagent pas toutes la même valeur (tri-état)

Exemples enfoncés

Un bouton de pause qui n'est pas actuellement enfoncé :

<button aria-pressed="false">Pause</button>

Un bouton de sourdine actuellement enfoncé :

<button aria-pressed="true">Mute</button>

Développé

Indique qu'un élément, ou un autre élément de regroupement qu'il contrôle, est actuellement développé. L'état développé d'un élément est géré via l'attribut aria-expanded . La valeur de l'attribut aria-expanded doit être définie sur "true" lorsque l'élément (ou l'élément de regroupement qu'il contrôle) est développé et défini à "false".

Exemples développés

Un bouton déployé :

<button aria-expanded="true">options</button>

Sélectionné

Indique qu'un élément est actuellement dans un état « sélectionné ». L'état sélectionné d'un élément est géré via l'attribut aria-selected . La valeur de l'attribut aria-selected doit être définie sur "true" lorsque l'élément est sélectionné, "false" lorsqu'il ne l'est pas et "mixed" pour les cases à cocher à trois états dans un état coché mixte.

Exemples choisis

Un panneau d'onglets simple gérant aria-selected sur les éléments role="tab" :

<div role="tablist" aria-label="Simple Tabs">
  <div
    role="tab"
    aria-selected="true"
    aria-controls="panel-1"
    id="tab-1"
    tabindex="0"
  >
    Tab 1
  </div>
  <div
    role="tab"
    aria-selected="false"
    aria-controls="panel-2"
    id="tab-2"
    tabindex="-1"
  >
    Tab 2
  </div>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
  <p>Panel 1 content...</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
  <p>Panel 2 content...</p>
</div>

Coché

Indique qu'un élément est actuellement dans un état « sélectionné ». Couramment utilisé dans les cases à cocher, les boutons radio et autres widgets. L'état sélectionné d'un élément peut être géré à l'aide de l'attribut HTML checked (utilisé avec les cases à cocher natives) ou de l'attribut aria-checked . Si vous utilisez aria-checked, la valeur de l'attribut doit être définie sur "true" lorsque l'élément est sélectionné et "false" lorsqu'il n'est pas sélectionné.

Exemples vérifiés

Une case à cocher native cochée :

<input id="terms" type="checkbox" checked />
<label for="terms">I agree to the terms and conditions</label>

Une case à cocher ARIA décochée :

<span
  role="checkbox"
  id="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="checkbox-label"
></span>
<label id="checkbox-label">Subscribe to newsletter</label>

Lecture seule

Indique qu'un élément n'est pas modifiable, mais qu'il est par ailleurs utilisable et focalisable. L'état de lecture seule d'un élément peut être géré à l'aide de l'attribut HTML readonly ou de l'attribut aria-readonly . Si vous utilisez aria-readonly, la valeur de l'attribut doit être définie sur "true" lorsque l'élément est dans un état de lecture seule et "false" lorsqu'il ne l'est pas.

Exemples en lecture seule

Une entrée en lecture seule :

<label for="first-name">First Name:</label>
<input name="first-name" type="text" value="Gene" readonly />