Aller au contenu principal

Accessibilité

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Test d'accessibilité​

L'un des principes directeurs des API Testing Library est de vous permettre de tester votre application comme vos utilisateurs l'utilisent, y compris via des interfaces d'accessibilité comme les lecteurs d'écran.

Consultez la page sur les requêtes pour comprendre comment l'utilisation de requêtes HTML sémantiques garantit la compatibilité de votre application avec les API d'accessibilité des navigateurs.

getRoles​

Cette fonction permet d'itérer sur les rôles ARIA implicites représentés dans une arborescence de nœuds DOM.

Elle retourne un objet indexé par nom de rôle, où chaque valeur est un tableau d'éléments possédant ce rôle ARIA implicite.

Voir ARIA in HTML pour plus d'informations sur les rôles ARIA implicites.

import {getRoles} from '@testing-library/dom'

const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>`
console.log(getRoles(nav))

// Object {
//   navigation: [<nav />],
//   list: [<ul />],
//   listitem: [<li />, <li />]
// }

isInaccessible​

Cette fonction détermine si un élément donné doit être exclu de l'API d'accessibilité par le navigateur. Elle implémente tous les critères MUST de la section Exclusion d'éléments de l'arborescence d'accessibilité de WAI-ARIA 1.2, à l'exception de la vérification de l'attribut role.

Définition :

function isInaccessible(element: Element): boolean

logRoles​

Cette fonction utilitaire imprime tous les rôles ARIA implicites dans une arborescence DOM, chaque rôle listant les nœuds correspondants. Utile pour identifier comment interroger le DOM avec getByRole.

import {logRoles} from '@testing-library/dom'

const nav = document.createElement('nav')
nav.innerHTML = `
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>`

logRoles(nav)

Résultat :

navigation:
<nav />
--------------------------------------------------
list:
<ul />
--------------------------------------------------
listitem:
<li />
<li />
--------------------------------------------------