Tu primera auditoría de accesibilidad con Inteligencia Artificial: una guía paso a paso para un chequeo esencial

Tu primera auditoría de accesibilidad con Inteligencia Artificial: una guía paso a paso para un chequeo esencial

Ahora que ya sabes sobre  accesibilidad web, además sabes que es importante e incluso lo tienes en tu lista de «cosas por hacer», justo debajo de «ordenar por fin los cables de debajo del escritorio» y «aprender a tirar con arco», pero por algún motivo te da cosa empezar, (entendiendo el “te da cosa” por miedito, parálisis por análisis, llámalo X)

Pero ya no es solo ese miedito o esa parálisis por análisis, estoy hablando de que puede ser una de esas tareas tan intimidantes que uno no sabe por donde tiene que empezar.

Esta parálisis por análisis es el mayor enemigo de una web inclusiva, en ocasiones la gente no deja de lado la accesibilidad por maldad, sino por sentirse abrumada. Las guías WCAG parecen un texto legal, las herramientas tradicionales son para desarrolladores y el coste de una auditoría profesional puede ser prohibitivo.

Hoy en este post voy a intentar romper esa parálisis, voy a intentar que hagas esa primera auditoría en plan “Esto es una manualidad Art Attack…”, (se me notan los años con estos comentarios, jajajaj)

Pero ojo, esta primera auditoría de accesibilidad con inteligencia artificial no va a ver rellenar un informe IRA, ni va a ser una auditoría de las que puedas usar para poner un sello a tu web y listo, es una auditoría de accesibilidad para resolver de manera rápida problemas reales que afectan a personas reales y que se pueden solucionar (en su mayoría) de manera muy sencilla.

Existe la vida más alla del informe IRA

La idea es que en este post te proponga una seríe de pasos claros y directos que te llevarán a tener una radiografía de tu página web, un diagnóstico esencial que revelará los problemas de accesibilidad más comunes y críticos. No es una auditoría completa, por supuesto. Es algo que mola mucho más, es el primer paso.

Vamos a utilizar la Inteligencia Artificial como un estetoscopio de alta tecnología. Realizaremos cuatro pruebas específicas, diseñadas para obtener el máximo impacto con el mínimo esfuerzo. Al final de este proceso, tendrás una lista de acciones claras y una comprensión mucho más profunda de cómo los diferentes usuarios experimentan tu contenido.

Venga que me enrollo con la intro, pero es que hay cosas que si no dejo claras antes mi cerebro se niega a seguir escribiendo…

Preparando el terreno: un comienzo sencillo

Antes de empezar hay que preparar todo lo que necesitamos, lo bueno es que en este caso necesitamos poco.

Tu Kit de Herramientas:

1. Un Navegador Web: El que estás usando ahora mismo es perfecto.
2. Una IA Conversacional: Abre una nueva pestaña con tu asistente preferido (ChatGPT-4, Google Gemini, Anthropic Claude, etc.).

Eso es todo, ahora, podemos empezar y como siempre lo más importante antes de pedirle nada a la Inteligencia Artificial es darle su misión y contexto asi que para empezar copia y pega el siguiente «Mega-Ultra-Súper-Prompt» en el chat. (obviamente siéntete libre de modificar lo que estimes oportuno o de hacer las pruebas que hagan falta para ajustarlos resultados y que sean optimos para lo que necesitas.

El Mega-Ultra-Súper-Prompt de Auditoría:

Actúa como un consultor experto en accesibilidad web (a11y) de nivel senior, especializado en auditorías rápidas basadas en las WCAG 2.2 nivel AA. Tu misión es ayudarme a realizar un chequeo esencial en una página web. Serás preciso y te centrarás en los problemas de mayor impacto. Para cada análisis, explica el problema, por qué es importante para el usuario y cómo se soluciona. Habla en un lenguaje claro y directo.

Ahora sí, como suelen decir las personas que hablan de Inteligencia Artificial en YouTube, este es el promt que lo cambiará todo….

El chequeo esencial: cuatro pruebas de máximo impacto

Sigue estos pasos. El primero es el único que requiere que copies algo de tu web. Los demás usarán ese mismo fragmento para continuar la conversación.

Paso 1: el pasaporte de la página (título, idioma y estructura)

Toda página web tiene un «pasaporte» que le dice a los navegadores y tecnologías asistivas quién es, de dónde viene y cómo está organizada. Si este pasaporte está mal, la confusión está garantizada desde el primer segundo.

Te toca:

1. Ve a la página de tu web que quieras analizar (la página de inicio es un buen comienzo).
2. Haz clic derecho en cualquier lugar y selecciona «Ver código fuente de la página».
3. Selecciona todo el texto (Ctrl+A o Cmd+A) y cópialo (Ctrl+C o Cmd+C).
4. Pega el código HTML completo en la Inteligencia Artificial que estés usando y usa este prompt:

He pegado el HTML de una página. Realiza este análisis estructural de 3 puntos:

1. **Idioma:** ¿La etiqueta <html> tiene un atributo 'lang' correcto (ej. 'lang="es"')?

2. **Título:** ¿Existe una etiqueta <title> dentro del <head>? ¿Es descriptivo?

3. **Landmarks:** ¿Se usan las etiquetas semánticas de HTML5 como <header>, <nav>, <main> y <footer> para estructurar la página?

Dame una respuesta clara para cada punto.

Profundizando un poco más en esto: ¿Por qué importa este «pasaporte»?

• El atributo lang: Este pequeño atributo es increíblemente importante. Le dice al lector de pantalla en qué idioma debe leer el texto. Sin un lang=»es», una voz en inglés podría intentar leer tu contenido en español, produciendo un galimatías incomprensible: «Holah, bien-venaidou ah mai web-sait». Es el equivalente a que tu GPS te dé indicaciones para Madrid con acento de Boston.

• La etiqueta <title>: Es lo primero que un usuario de lector de pantalla escucha al aterrizar en tu página. También es el texto que aparece en la pestaña del navegador. Un título claro como «Zapatillas de Running para Hombre | MiTiendaDeDeportes» permite al usuario saber dónde está y navegar entre múltiples pestañas. Un título genérico como «Inicio» o «Página Principal» es inútil.
• Los landmarks: Estas etiquetas (<header>, <main>, etc.) son las «habitaciones» digitales de tu página. Permiten a los usuarios de tecnologías asistivas saltar directamente a la parte que les interesa («Llévame al contenido principal» o «Llévame a la navegación»). Sin ellos, la página es un único y largo pasillo sin puertas, obligando al usuario a recorrerlo todo para encontrar lo que busca.

Paso 2: la jerarquía del poder (análisis de encabezados)

Los encabezados (<h1>, <h2>, etc.) no son para hacer el texto más grande y bonito. Son el esqueleto de tu contenido, el índice que permite a los usuarios (y a Google) entender su estructura.

Te vuelve a tocar:

No necesitas copiar nada nuevo. Simplemente, usa este nuevo prompt en la misma conversación:

Usando el mismo HTML, analiza AHORA la jerarquía de encabezados (de <h1> a <h6>). Responde a estas tres preguntas:
1. ¿Hay un único <h1> en la página?

2. ¿La jerarquía es lógica o se salta niveles (p. ej., de un <h2> a un <h4>)?

3. ¿Se están usando encabezados solo por su apariencia visual (texto grande y en negrita)?

Venga, ahora la explicación avanzada: Los encabezados son el índice del libro

Imagina que te dan un libro de 300 páginas sin índice y sin títulos de capítulo. Para encontrar una sección específica, tendrías que hoquearlo todo. Sería una pesadilla. Así se siente una web sin una jerarquía de encabezados correcta para un usuario de lector de pantalla.

Estos usuarios pueden usar un atajo para que su dispositivo les lea únicamente los encabezados. Esto les permite «escanear» tu contenido en segundos y saltar directamente a la sección que les interesa.

Un error garrafal es usar los encabezados por su estilo. Por ejemplo, un diseñador quiere un texto grande y usa un <h2>, aunque lógicamente debería ser un <h4>. Esto rompe por completo el «índice» y crea una experiencia confusa. La regla es simple: un único <h1> por página para el título principal, y luego usar <h2>, <h3>, etc., de forma ordenada y sin saltos.

Paso 3: ver con palabras (la caza de textos alternativos)

Las imágenes son una parte vital de la web, pero para alguien que no puede verlas, pueden ser un muro de silencio. El texto alternativo es el puente que cruza ese muro.

Otra vez tú:

De nuevo, en la misma conversación:

Ahora, escanea todas las etiquetas <img> del código. Identifica y haz una lista de hasta 5 imágenes que cumplan alguna de estas condiciones:
- No tienen atributo 'alt'.
- Su atributo 'alt' está vacío ('alt=""') pero parecen ser imágenes importantes.
- Su atributo 'alt' es inútil (p. ej., el nombre del archivo como 'img_4045.jpg').

Un poco de profundidad y un regalo: El arte de describir

Y de regalo la Guía para entrenar a tu inteligencia artificial para generar texto alternativo de calidad

La Inteligencia Artificial es increíblemente buena encontrando <img> sin alt, el error más básico. Pero el diablo está en los detalles, el propósito del alt text es transmitir la misma información o función que la imagen.

• Imágenes informativas: Si la imagen de tu producto muestra un detalle clave, el alt debe describirlo. alt=»Zapatilla Velocity X de perfil, mostrando la malla transpirable azul y la suela naranja.»
• Imágenes decorativas: Si la imagen es un simple adorno, como un borde floral, entonces y solo entonces es correcto usar un alt vacío (alt=»»). Esto le dice al lector de pantalla que la ignore, reduciendo el ruido.
• El peor crimen: No poner el atributo alt. En este caso, muchos lectores de pantalla intentarán «adivinar» leyendo el nombre del archivo. Escuchar «diagonal_line_separator_final_version_2.png» es una experiencia de usuario terrible.

Paso 4: los callejones sin salida (análisis de enlaces)

Los enlaces son las puertas que conectan tu web. Si las puertas no tienen un letrero claro, ¿cómo sabrá nadie a dónde llevan?

Venga que queda poco, te toca:

Último análisis del código:

Finalmente, analiza todos los enlaces (etiquetas <a>). Busca y haz una lista de enlaces con texto genérico y no descriptivo como "Haz clic aquí", "Leer más", "Ver más" o "Descargar". Para cada uno, si puedes inferir el contexto, sugiere una alternativa más accesible.

Un poco más de chicha sobre el tema: navegando por una lista de puertas

Al igual que con los encabezados, los usuarios de lectores de pantalla pueden generar una lista de todos los enlaces de una página para navegar rápidamente. Imagina escuchar esta lista:

• clic aquí
• leer más
• leer más
• aquí
• leer más

Es un laberinto de callejones sin salida. No tienes ni idea de a dónde lleva cada enlace sin leer todo el párrafo que lo rodea. Un texto de enlace accesible es aquel que tiene sentido por sí mismo.

• No accesible: Para descargar nuestro informe, haz clic aquí.
• Accesible: Descarga nuestro Informe Anual de Sostenibilidad 2025 (PDF, 5MB).

La Inteligencia Artificial detecta bien estas frases genéricas y, a menudo, puede usar el contexto del párrafo para sugerir una reescritura mucho más significativa.

Paso 5: el veredicto preliminar y la hoja de ruta

Has guiado a la Inteligencia Artificial a través de varias peticiones. Ahora es el momento de que te dé un resumen ejecutivo.

Venga que acabamos:

El prompt final:

Excelente trabajo. Basándote en los 4 análisis que acabas de realizar (estructura, encabezados, imágenes y enlaces), resume en una lista con viñetas los 3 PROBLEMAS DE ACCESIBILIDAD MÁS GRAVES Y URGENTES de esta página. Explica cada uno en una sola frase y en un lenguaje que un mánager o un cliente pueda entender.

¡Y listo! Con esto tienes un resumen claro, priorizado y accionable, de nada…

Diagnóstico realizado… ¿y ahora qué?

Has completado tu primer chequeo de accesibilidad y ahora estás algo más tranquilo, te quedas mirando la lista de problemas que la Inteligencia Artificial ha generado. Puede que sea corta o puede que sea larga. El siguiente paso es crucial: convertir el diagnóstico en un plan de tratamiento.

• 1. No te satures, prioriza (con ayuda de la inteligencia artificial):

La lista puede asustar. Pero no todos los problemas tienen el mismo peso. Algunos son fáciles de arreglar y tienen un impacto enorme.

Prompt para Priorizar:

De todos los problemas que hemos encontrado, clasifícalos en una tabla de 2x2. Los ejes son: "Impacto en el Usuario" (Bajo/Alto) y "Esfuerzo de Solución" (Bajo/Alto). Esto me ayudará a identificar la "fruta madura" (Alto Impacto, Bajo Esfuerzo).

• 2. convierte los hallazgos en tareas reales:

Un problema identificado no es nada si no se convierte en una tarea asignable.

Prompt para Crear un Ticket:

Para el problema de la jerarquía de encabezados rota, redacta un ticket para un desarrollador. Debe incluir:
- **Título:** "Corregir Jerarquía de Encabezados para Accesibilidad y SEO".
- **Descripción:** Explica el problema y por qué es importante para los usuarios de lectores de pantalla.
- **Criterios de Aceptación:** (Ej: "1. La página debe tener un único H1. 2. No debe haber saltos en los niveles de encabezado.").

• 3. Da el siguiente paso:

Este chequeo esencial es solo el comienzo. Ha analizado la estructura general. Los siguientes pasos, que cubriremos en futuros artículos, son sumergirse en los componentes individuales: la accesibilidad de los formularios complejos, los carruseles, los modales y la navegación por teclado. Has abierto la puerta; ahora toca explorar la casa.

Y esto ha sido una manualidad Art Attack…

Termino con la misma referencia viejuna con la que he empezado, pero con la diferencia de que hemos hecho nuestra primera auditoría de accesibilidad con Inteligencia Artificial.

No hemos realizado una auditoría exhaustiva. No hemos probado la web con usuarios reales. Pero hemos hecho algo mucho más importante: hemos roto la inercia y en teoría deberíamos haber salido de la paralisis por análisis que comentaba antes.

El mayor obstáculo para la accesibilidad no es la falta de conocimiento o de herramientas, es el miedo a empezar. Este chequeo esencial está diseñado para ser un ariete contra ese miedo. Te demuestra que puedes obtener información increíblemente valiosa, accionable y de alto impacto siguiendo unos pasos sencillos.

Has aprendido a ver tu propia web a través de una nueva lente. Has empezado a construir un «reflejo de accesibilidad». Y has dado un paso gigante que te sitúa por delante del 90% de los creadores de contenido y propietarios de sitios web. (venga, igual no es un 90% pero no es mal dato jaja)

Así que no te quedes aquí. No dejes que esta sea una lectura interesante más. Abre una nueva pestaña, ve a tu propia página web, a la de un competidor o a tu sitio favorito y sigue trabajando para llegar hacia una web más humana e inclusiva.