Análisis rápido de accesibilidad
La mayoría de los fallos de accesibilidad son detalles pequeños que faltan en el HTML, como una imagen sin descripción o un campo sin nombre. Este análisis descarga una página, los encuentra y te dice qué elementos hay que arreglar.
Todo lo que hay en una página necesita un nombre
Cuando miras una página, el diseño hace mucho trabajo sin decir una palabra. Un icono de lupa junto a un cuadro significa “busca aquí”. Un texto grande y en negrita significa “empieza una sección nueva”. Nada de eso llega a una persona que usa un lector de pantalla, una línea braille o el control por voz. Su software no puede ver el diseño. Lee el HTML y pide dos cosas de cada elemento: qué es y cómo se llama.
Un <img> responde con su atributo alt, un campo de formulario con su <label>, una sección con su encabezado. Cuando falta la respuesta, el software dice “imagen”, “editar texto” o “enlace” y sigue adelante, lo que no ayuda a nadie. Las Pautas de Accesibilidad para el Contenido Web (WCAG) convierten esta idea en reglas comprobables, y una buena parte de ellas puede verificarla un programa.
Qué comprueba el análisis y cuánto cuesta cada hallazgo
La página parte de 100 puntos. Cada hallazgo resta algunos, y un problema que se repite cuesta más, hasta un tope.
| Hallazgo | Puntos que se restan |
|---|---|
Sin lang en <html> | 10 |
Zoom bloqueado (user-scalable=no, o maximum-scale inferior a 2) | 10 |
<title> vacío o ausente | 6 |
Imágenes sin atributo alt | 4 + 2 por imagen, 20 como máximo |
| Campos de formulario sin etiqueta | 5 + 3 por campo, 20 como máximo |
| Enlaces o botones sin nombre | 4 + 2 cada uno, 20 como máximo |
| Ningún encabezado | 8 |
Sin <h1>; niveles de encabezado saltados | 4; 2 + 1 por salto, 6 como máximo |
| Texto de enlace vago (“haz clic aquí”, “leer más”) | 2 + 1 por enlace, 8 como máximo |
| Texto con estilo en línea con contraste inferior a 4,5:1 | 3 + 2 cada uno, 10 como máximo |
<iframe> sin title | 2 + 1 cada uno, 6 como máximo |
Valores de id duplicados | 1 + 1 cada uno, 5 como máximo |
| Audio o vídeo que se reproduce solo con sonido | 4 |
Sin región <main>; un tabindex superior a 0 | 3 cada uno |
El análisis omite los elementos ocultos con hidden, aria-hidden="true" o un display:none en línea, y las imágenes marcadas con role="presentation".
Cómo leer la nota
Los puntos que quedan se convierten en una letra: A desde 90, B desde 80, C desde 65, D desde 50, F por debajo. Los hallazgos en rojo son barreras, de las que impiden a alguien terminar una tarea. Los hallazgos en ámbar retrasan a las personas sin detenerlas. Debajo de cada uno verás hasta ocho de los elementos implicados, mostrados como una etiqueta con su ruta de archivo, nombre de campo, id o clase, para que puedas buscarlos en tus plantillas.
Una A significa que el análisis no encontró ninguno de los problemas que sabe detectar. Las pruebas automáticas detectan más o menos un tercio de los problemas reales de accesibilidad. Si tu texto alternativo es exacto, si el orden de lectura tiene sentido, cómo se comporta un menú personalizado con el teclado: eso lo tiene que juzgar una persona.
Soluciones para los hallazgos que más verás
- Imagen sin texto alternativo
- Di lo que la imagen cuenta a quien la ve:
<img src="team.jpg" alt="Five engineers around a whiteboard">. Para un adorno decorativo, escribealt="". El valor vacío le dice al software de asistencia que omita la imagen, y no es lo mismo que dejar fuera el atributo. - Campo sin etiqueta
<label for="email">Email</label> <input id="email" type="email">. Un marcador de posición no cuenta, porque desaparece con la primera tecla pulsada.- Enlace o botón solo con icono
<button aria-label="Open menu">…</button>, o pon unalten la imagen del icono que lleva dentro.- Nivel de encabezado saltado
- Elige el nivel según el esquema (
h2para una sección,h3dentro de ella) y fija el tamaño en CSS. - Zoom bloqueado
- Reduce la etiqueta viewport a
<meta name="viewport" content="width=device-width, initial-scale=1">.
Lo que este análisis no puede ver
Nuestro servidor lee el HTML que recibe y no ejecuta JavaScript, así que todo lo que un framework inyecta después de la carga queda sin examinar. Tampoco descarga tus hojas de estilo. Por eso el contraste solo se mide donde el color del texto y el del fondo están escritos en un atributo style. Para todo lo demás, prueba tus colores en la calculadora de relación de contraste. Para ir más lejos con una página, escúchala en la vista previa del lector de pantalla y sigue su orden de tabulación.
Preguntas frecuentes
¿Una nota perfecta significa que mi sitio cumple las WCAG?
No. Significa que esta página supera las comprobaciones que un programa puede hacer sobre HTML en bruto. La conformidad con el nivel AA de las WCAG 2.2 exige además pruebas manuales con teclado y con un lector de pantalla, en cada plantilla del sitio.
¿Qué diferencia hay entre un alt vacío y un alt ausente?
alt="" indica a propósito que la imagen es decorativa, y los lectores de pantalla la omiten sin decir nada. Sin ningún atributo alt, muchos lectores de pantalla recurren a leer el nombre del archivo, algo como “IMG guion bajo 4521 punto jpg”.
¿Por qué no se acepta un marcador de posición como etiqueta?
Un marcador de posición desaparece en cuanto el visitante escribe, así que quien se interrumpe o usa ampliación pierde la pista de lo que pedía el campo. Algunos lectores de pantalla tampoco lo anuncian. Un <label> visible se queda donde está y hace más grande el área donde hacer clic.
El análisis no informa de ningún problema de contraste. ¿Están bien mis colores?
No necesariamente. El análisis no lee los colores definidos en hojas de estilo, solo los fijados directamente en atributos style="…". Comprueba a mano los colores de tu texto principal y de tus botones en la calculadora de relación de contraste.
Mi página está hecha con React o Vue. ¿Es fiable el resultado?
Solo si el HTML se genera en el servidor. Si el servidor envía un documento casi vacío y el navegador construye la página con JavaScript, el análisis ve el documento vacío e informa de poco o de nada.