Glosario

Errores de accesibilidad, explicados

Cada fallo que puede reportar nuestro escáner (y Lighthouse, y axe), en palabras llanas: qué significa, a quién deja fuera y cómo se corrige, con código y sin código.

• Atajos de teclado duplicados accesskeysDos elementos comparten la misma tecla de atajo; solo funciona uno.personas que no pueden usar el mouse
• Atributos de accesibilidad mal escritos aria-valid-attrUn atributo aria-* está mal escrito y no hace nada.personas ciegas (lector de pantalla)
• Atributos de accesibilidad mal usados aria-allowed-attrParte del marcado de accesibilidad es contradictorio y las ayudas técnicas pueden ignorarlo o leerlo mal.personas ciegas (lector de pantalla)
• Audio que se reproduce solo no-autoplay-audioEl sonido arranca automáticamente y tapa al lector de pantalla.personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
• Audio sin transcripción audio-captionLos visitantes sordos no reciben nada del audio.personas sordas
• Barra lateral anidada dentro de otra zona landmark-complementary-is-top-levelUna barra lateral está dentro del contenido principal y se anuncia en el lugar equivocado.personas ciegas (lector de pantalla)
• Barras de progreso sin nombre aria-progressbar-nameUna barra de progreso no dice qué está avanzando.personas ciegas (lector de pantalla)
• Botones de formulario sin nombre input-button-nameUn botón de enviar o limpiar no tiene texto y se anuncia solo como "botón".personas ciegas (lector de pantalla)
• Botones de imagen sin nombre input-image-altUn botón hecho con una imagen (buscar, enviar) se anuncia como "botón" sin decir para qué sirve.personas ciegas (lector de pantalla)
• Botones demasiado pequeños para tocar target-sizeAlgunos botones o enlaces son más pequeños que la yema de un dedo. Clientes mayores y personas con temblor no aciertan.personas que no pueden usar el mouse · quien entra desde el celular
• Botones personalizados sin nombre aria-command-nameElementos que se comportan como botones o enlaces no tienen nombre para el lector de pantalla.personas ciegas (lector de pantalla)
• Botones sin nombre button-nameLos botones que son solo un ícono (menú, carrito, cerrar) se leen como "botón" y ya. Un cliente ciego no distingue el carrito del botón de cerrar.personas ciegas (lector de pantalla) · personas que no pueden usar el mouse
• Cabecera anidada dentro de otra zona landmark-banner-is-top-levelLa cabecera está dentro de otra zona.personas ciegas (lector de pantalla)
• Campos con dos etiquetas form-field-multiple-labelsEl lector de pantalla puede leer la equivocada.personas ciegas (lector de pantalla)
• Campos de formulario sin etiqueta labelEn tus formularios (compra, contacto, registro) hay campos que no dicen qué va ahí. Un cliente ciego escucha "cuadro de texto" y no puede terminar la compra.personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
• Campos etiquetados solo por un tooltip label-title-onlyLa única etiqueta del campo es un tooltip al pasar el mouse, que el lector de pantalla y quien usa pantalla táctil pueden no recibir.personas ciegas (lector de pantalla)
• Campos personalizados sin nombre aria-input-field-nameUn campo de texto, deslizador o combobox personalizado no tiene nombre para el lector de pantalla.personas ciegas (lector de pantalla)
• Celdas de tabla que apuntan a un encabezado equivocado td-headers-attrLas celdas referencian un encabezado que no existe y la tabla se lee desordenada.personas ciegas (lector de pantalla)
• Columnas de tabla sin encabezado empty-table-headerUna tabla tiene una celda de encabezado vacía y el lector de pantalla no puede decir qué contiene la columna.personas ciegas (lector de pantalla)
• Contenido incrustado inalcanzable con teclado frame-focusable-contentUn marco está oculto para el teclado pero contiene cosas con las que interactuar.personas que no pueden usar el mouse
• Contenido incrustado que no pudimos probar frame-testedUn marco incrustado (mapa, video, formulario) no se pudo escanear; puede esconder más problemas.personas ciegas (lector de pantalla)
• Contenido incrustado sin título frame-titleUn mapa, video o formulario incrustado se anuncia como "marco" sin decir qué es.personas ciegas (lector de pantalla)
• Contenido principal anidado dentro de otra zona landmark-main-is-top-levelLa zona de contenido principal está envuelta por otra y el atajo cae en el lugar equivocado.personas ciegas (lector de pantalla)
• Descripciones de imagen redundantes image-redundant-altLa descripción dice "imagen de…"; el lector ya dice "imagen", así que se oye dos veces.personas ciegas (lector de pantalla)
• Dos cabeceras de página landmark-no-duplicate-bannerDos zonas dicen ser la cabecera; el lector de pantalla no sabe cuál es la real.personas ciegas (lector de pantalla)
• Dos idiomas distintos declarados html-xml-lang-mismatchLa página declara un idioma en lang y otro en xml:lang.personas ciegas (lector de pantalla)
• Dos pies de página landmark-no-duplicate-contentinfoDos zonas dicen ser el pie de página.personas ciegas (lector de pantalla)
• El contraste podría ser mayor color-contrast-enhancedSe lee, pero está por debajo del nivel estricto (AAA) que algunos organismos públicos exigen.personas con baja visión
• El enlace "saltar al contenido" está roto skip-linkEl atajo del que depende quien usa teclado no lleva a ningún lado.personas que no pueden usar el mouse
• El idioma declarado no es válido html-lang-validEl código de idioma está mal escrito y los lectores de pantalla lo ignoran.personas ciegas (lector de pantalla)
• El zoom está bloqueado en el celular meta-viewportTu sitio prohíbe agrandar con los dedos. Quien necesita ver más grande no puede.personas con baja visión · quien entra desde el celular
• Elementos con un rol equivocado aria-allowed-roleUn elemento dice ser algo que no es (un enlace que dice ser botón). Confunde al lector de pantalla.personas ciegas (lector de pantalla)
• Elementos de definición fuera de su lista dlitemTérminos o definiciones están fuera de su lista.personas ciegas (lector de pantalla)
• Elementos de lista sueltos listitemLos elementos se leen sin el contexto de su lista.personas ciegas (lector de pantalla)
• Elementos enfocables que no son controles focus-order-semanticsElementos simples reciben el foco del teclado sin ser botones ni enlaces; se cae en algo que no hace nada.personas que no pueden usar el mouse · personas ciegas (lector de pantalla)
• Elementos ocultos pero aún interactivos presentation-role-conflictUn elemento se marcó como decorativo pero es enfocable o tiene nombre, lo que confunde a las ayudas técnicas.personas ciegas (lector de pantalla)
• Elementos ocultos que aún reciben el foco aria-hidden-focusQuien navega con teclado cae en elementos invisibles: el cursor "desaparece".personas ciegas (lector de pantalla) · personas que no pueden usar el mouse
• Encabezados de tabla con scope no válido scope-attr-validLas celdas de encabezado declaran un scope que no existe.personas ciegas (lector de pantalla)
• Encabezados de tabla sin datos th-has-data-cellsUn encabezado no tiene celdas debajo; el lector de pantalla anuncia una columna vacía.personas ciegas (lector de pantalla)
• Enlaces que no dicen a dónde llevan link-nameEnlaces tipo "clic aquí" o una imagen sin texto se leen como "enlace". Quien usa lector de pantalla navega saltando entre enlaces, así que estos son callejones sin salida.personas ciegas (lector de pantalla)
• Enlaces que parecen texto normal link-in-text-blockDentro de los párrafos los enlaces no van subrayados y su color casi no cambia. Mucha gente nunca se entera de que puede hacer clic.personas con baja visión · personas con discapacidad cognitiva
• Espaciado de texto bloqueado avoid-inline-spacingLos estilos fuerzan el espaciado de letras o líneas y quien necesita más espacio no puede ajustarlo.personas con baja visión · personas con discapacidad cognitiva
• Etiquetas en elementos que no pueden tenerlas aria-prohibited-attrSe puso un aria-label en texto plano o en un contenedor, donde el lector de pantalla lo ignora.personas ciegas (lector de pantalla)
• Falta información de accesibilidad aria-required-attrUn control personalizado (interruptor, casilla) no le dice al lector de pantalla su estado, p. ej. activado o no.personas ciegas (lector de pantalla)
• Formularios que bloquean el autocompletado autocomplete-validEl navegador no puede rellenar nombre, correo o dirección solo, y de eso dependen muchas personas con discapacidad motora o cognitiva.personas con discapacidad cognitiva · personas que no pueden usar el mouse
• Gráficos sin descripción role-img-altUn elemento marcado como imagen no tiene descripción.personas ciegas (lector de pantalla)
• Íconos sin descripción svg-img-altLos íconos vectoriales (logo, redes) no tienen nombre para el lector de pantalla.personas ciegas (lector de pantalla)
• Idioma no válido en parte de la página valid-langUna sección declara un código de idioma que no existe.personas ciegas (lector de pantalla)
• Imágenes sin descripción image-altEl lector de pantalla de una persona ciega dice "imagen" y nada más. Si la imagen es un producto, una promo o un botón, esa persona no sabe qué es.personas ciegas (lector de pantalla)
• Interruptores o casillas sin nombre aria-toggle-field-nameUn control personalizado no dice qué activa o desactiva.personas ciegas (lector de pantalla)
• La página no declara su idioma html-has-langEl lector de pantalla adivina el idioma y lee el español con voz en inglés (o al revés): no se entiende nada.personas ciegas (lector de pantalla)
• La página no tiene título document-titleLa pestaña del navegador sale vacía y el lector de pantalla no puede decir en qué página está. También perjudica en Google.personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
• La página no tiene un título principal page-has-heading-oneLas personas ciegas navegan por títulos; sin uno principal la página no tiene punto de partida.personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
• La página se recarga o redirige sola meta-refreshLa página se recarga por sí misma; quien usa lector de pantalla pierde el hilo.personas con discapacidad cognitiva · personas ciegas (lector de pantalla)
• Listas de definiciones mal construidas definition-listUna lista de término/definición tiene elementos sueltos y se lee mal.personas ciegas (lector de pantalla)
• Listas mal construidas listEl lector de pantalla anuncia "lista de 5 elementos"; aquí el conteo sale mal o la lista está rota.personas ciegas (lector de pantalla)
• Mapa de imagen que necesita mouse server-side-image-mapUn mapa de imagen antiguo solo se puede usar con mouse.personas que no pueden usar el mouse · personas ciegas (lector de pantalla)
• Marcos incrustados con el mismo título frame-title-uniqueVarios marcos se anuncian igual.personas ciegas (lector de pantalla)
• Medidores sin nombre aria-meter-nameUn indicador o medidor no dice qué mide.personas ciegas (lector de pantalla)
• Menús desplegables sin etiqueta select-nameUn desplegable (talla, ciudad, cantidad) se anuncia sin decir qué elige.personas ciegas (lector de pantalla)
• Menús o listas incompletos aria-required-childrenUn contenedor se anuncia como menú o lista pero no tiene elementos correctos adentro.personas ciegas (lector de pantalla)
• Mismo texto de enlace, destinos distintos identical-links-same-purposeEnlaces que se leen igual llevan a sitios distintos; no se puede predecir a dónde se va.personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
• No hay forma de saltarse el menú bypassQuien usa teclado tiene que pasar por cada opción del menú en cada página antes de llegar al contenido.personas que no pueden usar el mouse
• No hay zona de contenido principal landmark-one-mainNo hay forma de saltar directo al contenido: quien usa lector de pantalla escucha el menú en cada página.personas ciegas (lector de pantalla) · personas que no pueden usar el mouse
• Nombres internos repetidos duplicate-idDos elementos comparten el mismo nombre interno, lo que confunde a las ayudas técnicas y puede romper formularios.personas ciegas (lector de pantalla) · personas que no pueden usar el mouse
• Nombres internos repetidos en etiquetas duplicate-id-ariaUna etiqueta apunta a un nombre usado dos veces y puede describir el elemento equivocado.personas ciegas (lector de pantalla)
• Objetos incrustados sin descripción object-altUn archivo incrustado (PDF, animación) no tiene alternativa en texto.personas ciegas (lector de pantalla)
• Orden de teclado forzado a mano tabindexEl orden de tabulación fue alterado y quien usa teclado salta por la página sin lógica.personas que no pueden usar el mouse
• Orientación de pantalla bloqueada css-orientation-lockLa página solo funciona en una orientación; los dispositivos montados en sillas de ruedas no pueden girar.personas que no pueden usar el mouse · quien entra desde el celular
• Pie de página anidado dentro de otra zona landmark-contentinfo-is-top-levelEl pie de página está dentro de otra zona.personas ciegas (lector de pantalla)
• Piezas de menú o lista fuera de lugar aria-required-parentPartes de un menú, pestañas o lista están fuera de su contenedor y el lector de pantalla las anuncia mal.personas ciegas (lector de pantalla)
• Referencias de accesibilidad rotas aria-valid-attr-valueUn atributo de accesibilidad apunta a algo que no existe.personas ciegas (lector de pantalla)
• Roles de accesibilidad no válidos aria-rolesUn elemento usa un nombre de rol que no existe y las ayudas técnicas lo ignoran.personas ciegas (lector de pantalla)
• Sin zonas para orientarse regionQuien usa lector de pantalla salta entre zonas (menú, contenido, pie). Sin ellas, tiene que escuchar toda la página desde arriba.personas ciegas (lector de pantalla) · personas que no pueden usar el mouse
• Texto difícil de leer color-contrastHay textos demasiado claros sobre su fondo. Personas con baja visión, clientes mayores y cualquiera con el celular al sol no los pueden leer. Es el hallazgo más común en demandas de accesibilidad.personas con baja visión · quien entra desde el celular
• Texto en movimiento marqueeEl texto que se desplaza no se puede pausar y es difícil de leer.personas con discapacidad cognitiva
• Texto en negrita usado como título p-as-headingLos títulos son párrafos en negrita y el lector de pantalla no puede navegar por ellos.personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
• Texto marcado incorrectamente para el lector de pantalla aria-textUn contenedor marcado como texto plano contiene elementos enfocables, que desaparecen para el lector de pantalla.personas ciegas (lector de pantalla)
• Texto parpadeante blinkEl contenido que parpadea no se puede pausar y puede provocar crisis o distracción.personas con discapacidad cognitiva
• Título de tabla repetido en su resumen table-duplicate-nameEl mismo texto se anuncia dos veces para la tabla.personas ciegas (lector de pantalla)
• Títulos de tabla hechos con celdas table-fake-captionEl título de una tabla es una celda combinada en lugar de un caption real, y no se asocia a la tabla.personas ciegas (lector de pantalla)
• Títulos fuera de orden heading-orderLos títulos saltan niveles (como un documento que pasa del capítulo 1 a la sección 1.1.1). El esquema de la página deja de tener sentido para el lector de pantalla.personas ciegas (lector de pantalla) · personas con discapacidad cognitiva
• Títulos vacíos empty-headingUn título sin texto se anuncia como "título" y confunde la navegación.personas ciegas (lector de pantalla)
• Tooltips sin texto aria-tooltip-nameUn elemento tooltip no tiene contenido para el lector de pantalla.personas ciegas (lector de pantalla)
• Un botón dentro de otro nested-interactiveDos cosas clicables están anidadas; el lector de pantalla y el teclado solo alcanzan una.personas ciegas (lector de pantalla) · personas que no pueden usar el mouse
• Ventanas emergentes sin nombre aria-dialog-nameCuando se abre una ventana (carrito, aviso de cookies, inicio de sesión) a la persona ciega no se le dice qué es.personas ciegas (lector de pantalla)
• Videos sin subtítulos video-captionLos clientes sordos no reciben nada de tus videos.personas sordas
• Zonas clicables de imagen sin nombre area-altLas zonas de un mapa de imagen no tienen texto y el lector de pantalla no puede decir a dónde lleva cada una.personas ciegas (lector de pantalla)
• Zonas con scroll inalcanzables con teclado scrollable-region-focusableUn recuadro con desplazamiento (menú, lista de productos) no se puede recorrer sin mouse.personas que no pueden usar el mouse
• Zonas de navegación repetidas sin nombre landmark-uniqueVarios menús se anuncian igual; no se distinguen.personas ciegas (lector de pantalla)