Saltar al contenido principal

Accesibilidad

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Pruebas de accesibilidad​

Uno de los principios fundamentales de las APIs de Testing Library es que deben permitirte probar tu aplicación como la usan tus usuarios, incluyendo interfaces de accesibilidad como lectores de pantalla.

Consulta la página sobre consultas para detalles sobre cómo usar consultas HTML semánticas garantiza que tu aplicación funcione con las APIs de accesibilidad del navegador.

getRoles​

Esta función permite iterar sobre los roles ARIA implícitos representados en un árbol dado de nodos DOM.

Retorna un objeto indexado por nombre de rol, donde cada valor es un array de elementos que tienen ese rol ARIA implícito.

Consulta ARIA en HTML para más información sobre roles ARIA implícitos.

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​

Esta función determina si el navegador debe excluir el elemento dado de la API de accesibilidad. Implementa todos los criterios MUST de la sección Exclusión de elementos del árbol de accesibilidad en WAI-ARIA 1.2, exceptuando la verificación del atributo role.

Se define como:

function isInaccessible(element: Element): boolean

logRoles​

Esta función auxiliar imprime una lista de todos los roles ARIA implícitos dentro de un árbol de nodos DOM, mostrando para cada rol los nodos que coinciden. Resulta útil para encontrar formas de consultar el DOM bajo prueba con 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)

Resultado:

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