0Pricing
HTML Academy · Lección

Pruebas con lectores de pantalla

Use VoiceOver y NVDA para verificar las implementaciones de ARIA

Pruebas con lectores de pantalla es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

¿Por qué probar con lectores de pantalla?

Las herramientas automatizadas detectan solo entre el 30 y el 40 % de los problemas de accesibilidad. Las pruebas reales con lectores de pantalla revelan problemas que las comprobaciones automatizadas no detectan:

  • Orden de lectura confuso
  • Anuncios de ARIA poco útiles
  • Falta de gestión del foco
  • Patrones de interacción confusos

VoiceOver en Mac

VoiceOver viene integrado en macOS; no es necesario instalarlo:

<!-- Activate: Cmd+F5 (or System Settings → Accessibility → VoiceOver) -->

<!-- Key commands:
  VO = Control+Option
  VO+Right Arrow = Next element
  VO+Left Arrow = Previous element
  VO+Space = Activate element
  VO+U = Open rotor (landmark navigation)
  VO+H = Next heading
  Tab = Next focusable element
  Shift+Tab = Previous focusable
-->

VoiceOver en iOS

Pruebe la experiencia del lector de pantalla móvil con VoiceOver en iPhone/iPad:

<!-- Activate: Settings → Accessibility → VoiceOver
     Or: triple-click side button if set up -->

<!-- Gestures:
  Swipe right = next element
  Swipe left = previous element
  Double-tap = activate element
  Two-finger scrub = back
  Three-finger swipe up/down = scroll
-->

NVDA en Windows

NVDA es un lector de pantalla gratuito y de código abierto para Windows:

<!-- Download: nvaccess.org -->

<!-- Key commands:
  NVDA key = Insert (or Caps Lock)
  NVDA+N = NVDA menu
  H = next heading
  K = next link
  B = next button
  F = next form field
  D = next landmark
  Insert+F7 = element list (links, headings, landmarks)
-->

Lista de comprobación para lectores de pantalla

Qué debe verificar con un lector de pantalla:

  • El título de la página se anuncia al cargarla
  • Los encabezados crean una estructura de navegación lógica
  • Todas las imágenes tienen un texto alt significativo o vacío
  • Todos los campos de formulario tienen etiquetas
  • Los botones y enlaces tienen nombres descriptivos
  • La trampa de foco del cuadro de diálogo modal funciona correctamente
  • Las actualizaciones del contenido dinámico se anuncian

Errores comunes de los lectores de pantalla

Problemas que las pruebas automatizadas no detectan:

<!-- 1. Reading order differs from visual order -->
<!-- CSS flex/grid order ≠ DOM order for screen readers -->

<!-- 2. aria-label doesn't match visible text -->
<!-- Voice control users say visible text to click -->

<!-- 3. Focus disappears after dialog closes -->
<!-- Programmatically return focus to trigger -->

<!-- 4. Dynamic content not in a live region -->
<!-- New items added silently, no announcement -->

Pruebas centradas primero en el teclado

Antes de utilizar un lector de pantalla, pruebe primero usando únicamente el teclado:

  1. Desconecte el ratón o el trackpad
  2. Desplácese por toda la página utilizando solo Tab
  3. Verifique que se pueda acceder a todos los elementos interactivos
  4. Verifique que todas las acciones se puedan realizar con el teclado

Herramientas automatizadas para probar la accesibilidad

Complemente las pruebas manuales con herramientas automatizadas:

  • axe DevTools — extensión de Chrome; el comprobador automatizado más preciso
  • WAVE — wavebooth.com; superposición visual sobre la página
  • Lighthouse — Chrome DevTools; auditoría de rendimiento y accesibilidad
  • pa11y — herramienta de línea de comandos; ideal para canalizaciones de CI/CD

Referencia de patrones ARIA

La W3C ARIA Authoring Practices Guide (APG) proporciona implementaciones de referencia:

  • Accordion, Alert, Alert Dialog
  • Breadcrumb, Button, Carousel
  • Checkbox, Combobox, Dialog
  • Disclosure, Feed, Grid
  • Listbox, Menu, Menubar
  • Tab, Tooltip, Treeview

URL: w3.org/WAI/ARIA/apg/

Integración continua de la accesibilidad

Integre las pruebas de accesibilidad en su flujo de trabajo:

// Jest + axe-core for unit tests:
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

test('Button is accessible', async () => {
  const results = await axe('<button>Click me</button>');
  expect(results).toHaveNoViolations();
});

// pa11y in CI pipeline:
// pa11y https://example.com --standard WCAG2AA

Resumen de las pruebas

Una estrategia completa para probar la accesibilidad:

  1. Diseño — compruebe el contraste de color y el tamaño de las áreas táctiles
  2. Desarrollo — pruebe el teclado y ejecute un análisis automatizado con axe
  3. Revisión — pruebe con lectores de pantalla (VoiceOver y NVDA)
  4. CI/CD — utilice pa11y o axe en la canalización automatizada
  5. Producción — utilice Lighthouse y comprobaciones manuales puntuales

Comprobación rápida

¿Qué porcentaje de los problemas de accesibilidad pueden detectar de forma fiable las herramientas automatizadas?

Resumen: pruebas con lectores de pantalla

Aspectos esenciales de las pruebas:

  • VoiceOver (Mac/iOS) y NVDA (Windows) son gratuitos y esenciales
  • Pruebe primero usando únicamente el teclado y, después, añada el lector de pantalla
  • Herramientas automatizadas: axe, WAVE, Lighthouse y pa11y
  • Las pruebas automatizadas detectan solo aproximadamente entre el 30 y el 40 % de los problemas
  • Consulte los patrones de APG para implementar ARIA correctamente

Preguntas frecuentes

¿La lección «Pruebas con lectores de pantalla» es gratis?

Sí — el texto completo de «Pruebas con lectores de pantalla» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Pruebas con lectores de pantalla»?

Use VoiceOver y NVDA para verificar las implementaciones de ARIA Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Pruebas con lectores de pantalla»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. aria-expanded y aria-controls para controles desplegables
  2. aria-selected y patrones de pestañas
  3. Regiones dinámicas: aria-live, aria-atomic y aria-relevant
  4. Pruebas con lectores de pantalla
← Volver a HTML Academy