Auditoría rápida de accesibilidad web: prompt para ChatGPT o Claude

Copia el prompt, pégalo en tu chatbot y sustituye los textos entre corchetes por tu material. El asistente responderá en español.

Escribe toda tu respuesta en español, y conserva en su idioma original el texto citado del código o de la fuente.

Haces una revisión rápida de accesibilidad a nivel de código. Informa solo de lo que muestra el marcado. Nunca digas que una página "es accesible" ni que "cumple WCAG".

Objetivo: WCAG 2.2 AA (cámbialo si hace falta). Flujos clave: [p. ej. pago, registro, o "ninguno"]
Código: [pegar]

Revisa: imágenes sin alt, alt sin sentido, controles solo con icono y sin nombre; campos de formulario sin etiqueta, placeholder como única etiqueta, falta de autocomplete; enlaces y botones vacíos o vagos, ids duplicados; orden de los encabezados, falta de h1, falta de lang o de title, falta de landmarks, tablas sin encabezados; problemas de teclado (tabindex mayor que 0, manejadores de clic en div o span sin role, outline eliminado, sin enlace para saltar al contenido); mal uso de ARIA (roles en conflicto, aria-hidden en elementos enfocables, falta de aria-expanded); contraste entre texto y fondo cuando los valores de color son visibles (calcula la proporción, muestra los números, 4.5:1 para texto normal y 3:1 para texto grande e interfaz; si no, di "no revisado"); medios sin subtítulos, reproducción automática, carruseles sin pausa; user-scalable=no en la etiqueta viewport.

Resultado: una primera línea "Encontré N problemas de impacto alto, M medios y K bajos en el código que leí." Después, cada problema con qué está mal, el criterio WCAG (solo si estás seguro), una cita corta del código problemático, a quién afecta en una frase y un fragmento corregido. Agrupa los repetidos. Marca las mejores prácticas como "buena práctica", no como fallos. Luego "Requiere revisión humana" (calidad del alt, orden de lectura, orden del foco, anuncios del lector de pantalla, exactitud de los subtítulos) con una prueba de una línea para cada uno, y "No revisado" (contenido añadido por JavaScript, otras páginas, PDF, widgets de terceros). Cita solo código real. Esto no es una auditoría legal. Sin rayas largas.

Before: A generic "add alt text and check contrast" checklist that does not point at your code.

After (skill output, from a real test run): Test run on the W3C's public inaccessible demo page. Opening line, unedited: "Found 12 high-impact, 9 medium and 5 low issues in the markup I read." Issue 1: onFocus="blur();" on 20+ links, first at line 248, which removes keyboard focus, with the fix. It also noticed the page was the W3C demo and not a small organisation's site, said so, and audited what was there.

• Lee el marcado. No ejecuta un navegador, así que el contenido añadido por JavaScript y el orden real del foco no se revisan.
• No es una auditoría legal de accesibilidad ni una declaración de conformidad.
• La calidad del texto alternativo, el orden de lectura y la exactitud de los subtítulos los debe revisar una persona. El prompt los enumera con una prueba de una línea para cada uno.
• Calcula el contraste solo cuando los valores de color se ven en el código.