Test guidé intelligent des éléments interactifs

Le test guidé intelligent des éléments interactifs (IGT) permet de tester plusieurs états sans avoir à relancer les IGT. Un élément interactif est simplement tout ce avec quoi l'utilisateur interagit sur la page web, comme les boutons, les liens, les champs de saisie, les menus, etc.

Comment ça fonctionne

La première chose que vous devez 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 « START » lorsque vous êtes prêt à effectuer le test.

Étape 1 : Manquant

Tout d'abord, l'IGT scannera la page (ou le composant) pour trouver tous les éléments interactifs. Si l'apprentissage automatique est activé (voir la page des paramètres), il détectera tout élément non marqué avec des attributs interactifs (rôles, index de tabulation, etc.) qui peut effectivement être interactif.

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

Ensuite, vous pouvez choisir quel élément vous souhaitez tester. Par défaut, ces éléments sont regroupés « intelligemment » en utilisant notre algorithme pour regrouper des é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, comme une étiquette sur un champ de formulaire. Le Rôle indique quel contrôle l'utilisateur est en train d'interagir (bouton, onglet, lien, etc.). L'État informe l'utilisateur utilisant une technologie d'assistance sur l'état actuel du contrôle (tel que sélectionné/non sélectionné, coché/décoché).

Nom Accessible

Il vous sera demandé de confirmer que le Nom Accessible décrit précisément le but 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é à partir d'une liste déroulante des rôles disponibles.

État(s)

De même, l'IGT affichera les états pré-sélectionnés. Pour les éléments où un état n'est pas pertinent, laissez l'état comme « 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 mettez 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'IGT 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 et leurs états que vous souhaitez tester, sélectionnez « NEXT ».

Exécution en mode automatisé

Lorsque le mode IGT automatisé est activé, le Test guidé intelligent des éléments interactifs inclut une étape de sélection des éléments avant que l'IA ne commence son analyse. Cela vous donne un contrôle direct sur la portée de votre test.

Étape 1 : Sélectionner les éléments à tester

Avant que l'analyse par IA ne commence, tous les éléments interactifs trouvés sur la page vous seront présentés — à la fois ceux détectés automatiquement et les éléments supplémentaires que notre IA identifie comme potentiellement interactifs mais non marqués avec des attributs interactifs standard (rôles, index de tabulation, etc.).

Sélectionnez les éléments que vous souhaitez inclure dans votre test, puis cliquez sur Suivant pour continuer.

Étape 2 : L'IA analyse vos éléments sélectionnés

L'IA évalue automatiquement le nom accessible, le rôle et l'état de chaque élément que vous avez sélectionné. Une fois l'analyse terminée, vous serez dirigé vers l'écran d'examen pour inspecter les résultats de l'IA, apporter des corrections et finaliser votre test. Consultez les IGT automatisés pour plus de détails sur la révision des résultats, les corrections et la finalisation de votre test.

Ce qu'il teste

Le Test guidé intelligent des éléments interactifs teste les points suivants :

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

FAQs

Que signifient chacun des "États des éléments" disponibles ?

Voici un aperçu de chacun des états disponibles à tester dans le Test guidé intelligent des éléments interactifs.

Désactivé

Indique qu'un élément n'est pas éditable ou autrement opérable. Lorsqu'un élément est désactivé, il n'est ni éditable ni focalisable. Désactiver un élément peut se faire en utilisant la propriété HTML native disabled (préféré) ou aria-disabled="true".

Exemples désactivés

Bouton de soumission 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>

Appuyé

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

• "true": indique que le bouton à bascule est actuellement appuyé
• "false": indique que le bouton à bascule n'est pas actuellement appuyé
• "mixed": indique que les valeurs de plus d'un élément contrôlé par le bouton à bascule ne partagent pas toutes la même valeur (trois états)

Exemples d'appuis

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

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

Un bouton de sourdine qui est actuellement appuyé :

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

Déployé

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

Exemples déployé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 réglée 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 sélectionnés

Un panneau d'onglets simple gérant l'attribut 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 « coché ». Couramment utilisé dans les cases à cocher, les boutons radio et autres widgets. L'état coché d'un élément peut être géré en utilisant l'attribut HTML checked (utilisé avec les cases à cocher natives) ou l'attribut aria-checked . Si vous utilisez aria-checked, la valeur de l'attribut doit être réglée sur "true" lorsque l'élément est coché et sur "false" lorsqu'il est décoché.

Exemples coché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 non 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 éditable, mais est opérable et focalisable. L'état lecture seule d'un élément peut être géré en utilisant l'attribut HTML readonly attribut ou l' ", "context": "paragraph aria-readonly attribut. Si vous utilisez ", "context": "paragraph aria-readonly, la valeur de l'attribut doit être réglée sur ", "context": "paragraph "true" lorsque l'élément est en état de lecture seule et ", "context": "paragraph "false" lorsqu'il ne l'est pas.", "context": "paragraph

Exemples de lecture seule", "context": "heading level 5

Un champ de saisie en lecture seule :", "context": "paragraph

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