Test Guidé Intelligent des Éléments Interactifs

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

Le Test Guidé Intelligent (TGI) des Éléments Interactifs prend en charge le test de plusieurs états sans avoir à relancer les TGI. 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 cela fonctionne

La première chose à 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.

important

Le TGI des Éléments Interactifs capture des captures d'écran de chaque élément interactif. Pendant que les captures d'écran sont en cours, veuillez ne pas faire défiler ou interagir avec la page.

Étape 1 : Manquant

Tout d'abord, le TGI analysera 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 tous les éléments qui ne sont pas marqués avec des attributs interactifs (rôles, index de tabulation, etc.) qui peuvent en fait être interactifs.

Pour cette première question, il vous est demandé de sélectionner tous 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 groupés « intelligemment » à l'aide de 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 en utilisant le contrôle « Regrouper 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 la finalité des éléments interactifs, comme une étiquette sur un champ de formulaire. Le Rôle indique quel contrôle l'utilisateur utilise (bouton, onglet, lien, etc.). L'État informe l'utilisateur utilisant des technologies d'assistance sur l'état actuel du contrôle (comme sélectionné/non sélectionné, coché/non coché).

Nom Accessible

Il vous sera demandé de confirmer que le Nom Accessible décrit précisément la finalité de l'élément interactif.

Rôle

Ensuite, si le TGI 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 ce qui est détecté à partir d'une liste déroulante de rôles disponibles.

État(s)

De même, le TGI affichera des états pré-sélectionnés. Pour les éléments où un état n'est pas pertinent, laissez l'état comme « Non Applicable ». Une fois que vous avez confirmé le Nom Accessible, le rôle et l'état bien 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 ». Le TGI 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é le test de tous les éléments sélectionnés et des états que vous souhaitez tester, sélectionnez « NEXT ».

Exécution en Mode Automatisé

Lorsque mode TGI automatisé est activé, le TGI 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 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 Next pour continuer.

tip

Définir la portée de votre test à un ensemble d'éléments ciblés est l'une des façons les plus efficaces de tester efficacement :

Tester une instance par composant : Si votre page comporte 20 boutons du même type, sélectionner une instance représentative suffit à valider le modèle.
Concentrez-vous sur ce que vous changez : Lorsque vous travaillez sur une fonctionnalité ou une correction de bogue, sélectionnez uniquement les éléments dans les composants que vous modifiez — il n'est pas nécessaire de tout retester.
Évitez l'utilisation inutile de crédits IA : Moins d'éléments testés signifie moins de crédits IA consommés. Définir la portée de votre test aide votre équipe à tirer le meilleur parti de votre allocation mensuelle de crédits.

É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 de révision pour inspecter les résultats de l'IA, apporter des corrections et finaliser votre test. Voir TGI automatisés pour plus de détails sur la révision des résultats, la correction des erreurs et la finalisation de votre test.

Ce qu'il teste

Le TGI des Éléments Interactifs teste :

Noms accessibles valides
Rôles valides
États valides

FAQs

Que signifient chacun des « États de l'Élément » disponibles ?

Voici une répartition de chacun des états disponibles pour tester dans le TGI des Éléments Interactifs.

Désactivé

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

Exemples de désactivation

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>

Enfoncé

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 pressé
"false" : indique que le bouton bascule n'est pas actuellement pressé
"mixed" : indique que les valeurs de plusieurs éléments contrôlés par le bouton bascule ne partagent pas toutes la même valeur (état tri)

Exemples de boutons pressés

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

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

Un bouton de sourdine qui est actuellement pressé :

<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 réglée sur "true" lorsque l'élément (ou l'élément de regroupement qu'il contrôle) est développé et sur "false".

Exemples de boutons développés

Un bouton développé :

<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é, sur "false" lorsqu'il ne l'est pas et sur "mixed" pour les cases à cocher à trois états dans un état coché mixte.

note

L'attribut aria-selected ne doit être utilisé que sur des éléments avec un rôle gridcell, option, row ou tab. L'état "sélectionné" ne doit pas être confondu avec l'état "coché" utilisé avec les cases à cocher.

Exemples d'éléments sélectionnés

Un panneau à 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 "coché". Communément utilisé dans les cases à cocher, les boutons radio et d'autres widgets. L'état coché 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 aria-checked est utilisé, la valeur de l'attribut doit être réglée sur "true" lorsque l'élément est coché et sur "false" lorsqu'il ne l'est pas.

Exemples de cases cochées

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 autrement opérable et focalisable. L'état en lecture seule d'un élément peut être géré à l'aide de l'attribut HTML readonly ou de l'attribut aria-readonly. Si aria-readonly est utilisé, la valeur de l'attribut doit être réglée sur "true" lorsque l'élément est en état de lecture seule et sur "false" lorsqu'il ne l'est pas.

Exemples de lecture seule

Un champ de saisie en lecture seule :

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