Ir a la guía de uso
screen-reader-testingpor Seth Hobson

Screen Reader Testing Skill.

Una skill de Claude Code y Codex para revisión de diseño: prueba aplicaciones web con los lectores de pantalla VoiceOver, NVDA y JAWS.

  • Revisión de Diseño y Accesibilidad
  • Informe de revisión
wshobson/agents · plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.mdSKILL.md
--- name: screen-reader-testing description: Test web applications with screen readers including VoiceOver, NVDA, and JAWS. Use when validating screen reader compatibility, debugging accessibility issues, or ensuring assistive technology support. --- ## When to Use This Skill ## Core Concepts ## VoiceOver (macOS) ## VoiceOver Testing Checklist ## NVDA (Windows) ## NVDA Test Script
Front matter y encabezados de sección leídos del archivo original el 14/09/2026 · 12.020 caracteres en total

01 Qué hace

Qué Hace el Skill screen-reader-testing en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Prueba aplicaciones web con los lectores de pantalla VoiceOver, NVDA, JAWS, TalkBack y Narrator en plataformas macOS, Windows, iOS y Android. Valida la compatibilidad con lectores de pantalla, depura problemas de tecnología de asistencia y garantiza implementaciones ARIA correctas mediante pruebas prácticas con lectores de pantalla reales.

Abarca navegación, formularios, anuncios de contenido dinámico, gestión del foco y diálogos modales. Proporciona comandos específicos por plataforma, listas de verificación de pruebas y ejemplos de código para patrones de accesibilidad comunes. Enfatiza las pruebas en distintos modos de lector de pantalla (navegación, foco, aplicación) y prioriza el HTML semántico con ARIA como mejora complementaria.

Qué produce

  • Lista de verificación de pruebas de VoiceOver que abarca carga de página, navegación, enlaces, formularios, contenido dinámico y tablas
  • Guion de prueba de NVDA con instrucciones paso a paso para la carga inicial, puntos de referencia, encabezados, formularios, elementos interactivos y contenido dinámico
  • Ejemplos de código HTML que muestran patrones accesibles y soluciones para problemas comunes como botones sin etiqueta, contenido dinámico sin anunciar y errores de formulario
  • Código JavaScript para la gestión del foco, incluidos diálogos modales, captura del foco y navegación con teclado en interfaces de pestañas
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Probar con los Principales Lectores de Pantalla por Plataforma

    Use NVDA con Firefox en Windows (31 % de uso), VoiceOver con Safari en macOS e iOS (15 % de uso), JAWS con Chrome (40 % de uso), TalkBack en Android (10 % de uso) y Narrator con Edge (4 % de uso).

  2. 02
    Navegar Usando Comandos Específicos del Lector de Pantalla

    Ejecute comandos como VO+flecha derecha para la navegación de elementos en VoiceOver, H para saltos de encabezado en NVDA, Insert+F7 para listas de enlaces en JAWS y deslizamiento con dos dedos para desplazamiento en TalkBack.

  3. 03
    Probar en Modos de Navegación y de Foco

    Verifique que los lectores de pantalla cambien correctamente entre el modo de navegación para leer contenido y el modo de foco para interactuar con los controles de formulario, prestando atención a los anuncios de cambio de modo.

  4. 04
    Validar la Estructura Semántica y ARIA

    Compruebe que los encabezados se puedan descubrir mediante el rotor o la lista de elementos, que los puntos de referencia estén correctamente etiquetados, que las regiones activas anuncien las actualizaciones y que roles como dialog, tab y progressbar estén correctamente implementados.

  5. 05
    Verificar la Gestión del Foco y la Interacción con el Teclado

    Asegúrese de que el foco se desplace a los errores después de enviar un formulario, que los modales capturen el foco correctamente y lo devuelvan al cerrarse, y que las interfaces de pestañas respondan a las flechas, Home y End.

  6. 06
    Probar los Anuncios de Contenido Dinámico

    Active actualizaciones de contenido y confirme que role="status" con aria-live="polite" anuncia los cambios después del habla en curso, mientras que role="alert" interrumpe de inmediato.

02 Encuentra tu caso de uso

Cuándo usar la skill screen-reader-testing

Usa el skill screen-reader-testing en Claude Code o Codex cuando el trabajo sea revisión de diseño de este tipo. El alcance y límites a continuación están tomados del archivo propio del skill.

Buen caso de uso

  • Validar que una aplicación web funcione correctamente con software de lector de pantalla
  • Comprobar si los roles, estados y propiedades ARIA están implementados correctamente
  • Depurar problemas que afectan a los usuarios de tecnologías de asistencia
  • Garantizar que los controles de formulario sean accesibles con etiquetas y anuncios de error adecuados
  • Comprobar que las actualizaciones de contenido dinámico se anuncien a los usuarios de lectores de pantalla

Conozca los límites

  • Depender únicamente de la inspección visual para validar la accesibilidad
  • Probar solo las rutas de éxito sin validar estados de error y casos límite
  • Omitiendo las pruebas de lector de pantalla móvil en iOS y Android

03 Dentro del skill

Reglas que la skill screen-reader-testing proporciona a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

  1. Realice las pruebas con lectores de pantalla reales, no con simuladores

    Realice siempre las pruebas utilizando software real de lector de pantalla (VoiceOver, NVDA, JAWS, TalkBack, Narrator) en lugar de herramientas de simulación o emuladores.

  2. Utilice primero HTML semántico; ARIA es complementario

    Construya interfaces con elementos HTML nativos antes de añadir atributos ARIA. ARIA mejora el HTML semántico, pero no lo sustituye.

  3. Cobertura mínima: NVDA+Firefox, VoiceOver+Safari en macOS y iOS

    Como mínimo, realice pruebas con NVDA junto con Firefox en Windows, VoiceOver con Safari en macOS y VoiceOver con Safari en iOS antes de considerar validada la aplicación.

  4. Pruebe en modo de navegación y en modo de foco

    Verifique la experiencia en modo de navegación (para leer contenido con las teclas de flecha) y en modo de foco (para interactuar con controles), ya que los lectores de pantalla cambian entre ambos de forma automática o manual.

  5. Realice las pruebas de navegación solo con teclado antes de las pruebas con lector de pantalla

    Complete primero las pruebas de navegación solo con teclado, ya que constituyen la base de la accesibilidad con lector de pantalla y permiten detectar problemas de interacción desde el principio.

  6. Verifique la gestión del foco en aplicaciones de una sola página

    Asegúrese de que el foco se gestione correctamente cuando el contenido cambia dinámicamente, especialmente en SPA donde las transiciones de página ocurren sin recargas completas.

  7. Nunca realice las pruebas con un único lector de pantalla

    Realizar las pruebas con un único lector de pantalla es insuficiente. Los distintos lectores de pantalla presentan comportamientos y patrones de uso diferentes según la plataforma.

  8. Pruebe siempre el contenido dinámico y los estados de error

    No omita las pruebas del contenido que se actualiza dinámicamente ni limite las pruebas a la ruta ideal (happy path). El contenido dinámico y la gestión de errores son las fuentes más comunes de problemas de accesibilidad.

04 Ponlo a trabajar

Instalar screen-reader-testing en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir screen-reader-testing a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/wshobson/agents --skill screen-reader-testing

Forma genérica de la CLI skills para plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de revisión de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
Test the [checkout form] on [staging.example.com] with NVDA and VoiceOver to verify that all field labels are announced, required field indicators are read correctly, validation errors are communicated when the form is submitted with invalid data, and focus moves to the first error. Also confirm that the loading state during payment processing is announced and the success confirmation is read by the screen reader.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • Verifique que el título de la página se anuncie al cargarla
  • Confirme que todos los encabezados sean detectables mediante el rotor (VoiceOver) o la lista de elementos (NVDA, JAWS)
  • Compruebe que las etiquetas se leen junto con sus campos de entrada asociados
  • Asegúrese de que los mensajes de error se anuncien cuando se envían formularios con datos no válidos
  • Verifique que el foco quede correctamente atrapado dentro de los cuadros de diálogo modales y no pueda escapar de ellos

En OpenDesign importe screen-reader-testing desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Repository
github.com/wshobson/agents Rama main
Archivo de skill
plugins/accessibility-compliance/skills/screen-reader-testing/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 4236bb9
License
MIT De LICENSE.
Estrellas del repositorio
39.635 Captura de GitHub tomada el 2026-09-14 para todo el repositorio wshobson/agents, que contiene 18 skills en este catálogo. No es una calificación ni un recuento de uso de screen-reader-testing.
Verificado por OpenDesign
14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

  1. Cuándo Usar Este SkillEnumera escenarios como validar la compatibilidad, probar ARIA, depurar tecnología de asistencia y verificar formularios y navegación
  2. Conceptos FundamentalesCubre los principales lectores de pantalla por plataforma y uso, la prioridad mínima de prueba, y los modos de exploración, foco y aplicación
  3. VoiceOver (macOS)Instrucciones de configuración, comandos esenciales con teclas modificadoras, navegación con el rotor, lista de verificación de pruebas y correcciones de problemas comunes de HTML/ARIA
  4. NVDA (Windows)Configuración y comandos, navegación por encabezados y landmarks, cambio entre modo de exploración y de foco, y guion de prueba paso a paso
  5. JAWS (Windows)Comandos esenciales incluyendo el cursor virtual, teclas rápidas para tipos de elementos, modo de formularios y atajos de navegación por tablas
  6. TalkBack (Android)Interruptor de configuración, gestos táctiles para navegación y activación, y opciones de granularidad de control de lectura
  7. Escenarios de Prueba ComunesPatrones accesibles con código para diálogos modales con captura de foco, regiones dinámicas (live regions) y interfaces de pestañas con soporte de teclado
  8. Consejos de DepuraciónFunción de JavaScript para registrar el nombre accesible, el rol, el estado y la visibilidad de los elementos tal como los perciben los lectores de pantalla
  9. Buenas PrácticasQué hacer y qué no hacer, cubriendo pruebas reales, prioridad del HTML semántico, pruebas por modo, gestión del foco y evitar la validación con un solo lector de pantalla
La descripción propia del Skill
«Prueba aplicaciones web con lectores de pantalla incluyendo VoiceOver, NVDA y JAWS. Úsalo al validar compatibilidad con lectores de pantalla, depurar problemas de accesibilidad o asegurar soporte de tecnología asistiva.»

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 12.020 caracteres. Lee el archivo completo en GitHub.

Pruebas con lectores de pantalla

Ejecuta screen-reader-testing en una tarea real de revisión de diseño.

Descarga OpenDesign, importa screen-reader-testing desde su enlace SKILL.md, pega el prompt de arriba y lee el plan antes del resultado.

Terminal
npx skills add https://github.com/wshobson/agents --skill screen-reader-testing

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows