Lee el resumen: la situación, el riesgo y qué hacer, en un minuto.
Pasa este enlace a quien mantenga tu web: los fallos van de lo más grave a lo menos, con dónde están y cómo arreglarlos.
Guarda este enlace: es tu acceso al informe. Compártelo solo con quien quieras que lo vea.
En resumen
Para quien decide, en un minuto.
Situación: hay cosas que un lector de pantalla no puede nombrar o que no se pueden usar sin ratón; empieza por ellas.
Riesgo: si la web vende o presta servicios a consumidores (comercio electrónico, banca, transporte…), la Ley 11/2023 obliga a que sea accesible, salvo que el servicio lo preste una microempresa, y no hemos encontrado información sobre la accesibilidad de la web. Un usuario puede reclamar, y la administración, sancionar. Si es tu caso, consúltalo con tu asesor.
Lo primero: botones sin nombre (menú, buscar, cerrar…) que no se pueden usar con lector de pantalla.
Qué hacer: pasar este informe a quien mantenga la web, arreglar los fallos en el orden en que aparecen y publicar la declaración.
Antes de empezar
La ley remite a unas normas técnicas de accesibilidad basadas en una lista de pautas que se llaman WCAG (la norma de referencia, UNE-EN 301549, recoge la versión 2.1, nivel AA, y nosotros añadimos lo nuevo de la 2.2 que se puede medir, como el tamaño de los botones). Una máquina puede comprobar más o menos un tercio de esa lista, y eso es lo que mide este informe.
El resto lo tiene que revisar una persona: por ejemplo, si la web se puede usar entera solo con el teclado, si se lee en un orden lógico o si las descripciones de las imágenes dicen algo útil.
Los fallos van primero los que impiden usar la web y después el resto, de más a menos grave. En cada uno tienes qué significa, cómo se arregla y ejemplos sacados de tu propia web. Qué medimos y qué no.
Así empieza tu portada para quien no la ve
«Enlace: Café de Muestra, inicio.»
«Enlace: Shop.»
«Enlace: Cafés.»
«Enlace: About us.»
«Enlace: Contacto.»
«Botón: Buscar.»
«Botón: Carrito.»
«Imagen: Taza de café recién hecho. Recién tostado cada lunes.»
«Botón: ‹.»
«Botón: ›.»
«Enlace: IMG_2034.jpg.»
«Enlace: Leer más.»
Los primeros enlaces, botones e imágenes, tal como los nombra un lector de pantalla (además, lee los textos y los títulos que hay entre ellos). Cada «sin nombre» es algo que quien no ve la pantalla no puede usar.
Usar la web solo con el teclado
Mucha gente no usa ratón: personas ciegas, con poca movilidad en las manos o que navegan con un pulsador. Hemos recorrido tus páginas pulsando la tecla Tabulador, como lo harían ellas.
Portada
https://cafedemuestra.example/
·Recomendación: Recomendación: No hay un enlace para saltar al contenido. La página tiene otra forma de saltarse el menú (zonas marcadas), pero el enlace al principio ayuda mucho a quien usa teclado.
✓Correcto: Correcto: No hemos encontrado sitios donde el foco se quede atrapado.
✗Fallo: Fallo: En 15 o más elementos no se ve dónde está el foco. Quien usa el teclado se pierde. Arreglo: no quitar el contorno de foco (outline: none) o sustituirlo por otro bien visible.
✓Correcto: Correcto: El foco no se mete en elementos ocultos.
✗Fallo: Fallo: 1 cosa se puede pulsar con el ratón pero no con el teclado, por ejemplo: «Ver ofertas». Arreglo: usar botones y enlaces de verdad (<button>, <a href>) en lugar de <div> o <span> con clic.
Sin foco visible, por ejemplo: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Página /producto.html
https://cafedemuestra.example/producto.html
·Recomendación: Recomendación: No hay un enlace para saltar al contenido. La página tiene otra forma de saltarse el menú (zonas marcadas), pero el enlace al principio ayuda mucho a quien usa teclado.
✓Correcto: Correcto: No hemos encontrado sitios donde el foco se quede atrapado.
✗Fallo: Fallo: En 13 elementos no se ve dónde está el foco. Quien usa el teclado se pierde. Arreglo: no quitar el contorno de foco (outline: none) o sustituirlo por otro bien visible.
✓Correcto: Correcto: El foco no se mete en elementos ocultos.
✓Correcto: Correcto: No hemos encontrado cosas que se pulsen con el ratón y no con el teclado (las que se hacen a medida, como menús o carruseles, conviene probarlas a mano).
Sin foco visible, por ejemplo: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Página /contacto.html
https://cafedemuestra.example/contacto.html
·Recomendación: Recomendación: No hay un enlace para saltar al contenido. La página tiene otra forma de saltarse el menú (zonas marcadas), pero el enlace al principio ayuda mucho a quien usa teclado.
✓Correcto: Correcto: No hemos encontrado sitios donde el foco se quede atrapado.
✗Fallo: Fallo: En 12 elementos no se ve dónde está el foco. Quien usa el teclado se pierde. Arreglo: no quitar el contorno de foco (outline: none) o sustituirlo por otro bien visible.
✓Correcto: Correcto: El foco no se mete en elementos ocultos.
✓Correcto: Correcto: No hemos encontrado cosas que se pulsen con el ratón y no con el teclado (las que se hacen a medida, como menús o carruseles, conviene probarlas a mano).
Sin foco visible, por ejemplo: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Las imágenes, una a una
Hemos revisado una a una 6 imágenes de tu web, comparando cada una con su descripción.
3 no tienen una descripción que sirva. Te dejamos la que proponemos: revísala y cópiala en el atributo alt.
Las propuestas las redacta una máquina mirando la imagen: revísalas antes de usarlas.
Descripción que no sirve
Es un nombre de archivo y no dice qué producto es.
Ahora: alt="IMG_2034.jpg"
Propuesta: alt="Bolsa de café de Colombia Huila, 250 gramos"
Sin descripción
No tiene texto alternativo y muestra un producto.
Ahora: sin atributo alt
Propuesta: alt="Bolsa de café de Etiopía Yirgacheffe, 250 gramos"
Descripción que no sirve
La palabra «foto» no explica qué producto se muestra.
Ahora: alt="foto"
Propuesta: alt="Bolsa de café descafeinado por proceso de agua, 250 gramos"
Y 3 imágenes con buena descripción.
Lo que dicen tus botones y enlaces
Quien usa un lector de pantalla oye el nombre de cada botón y enlace. Hemos revisado los 23 que aparecen en tus páginas.
11 no se entienden bien: van en otro idioma, usan jerga técnica, se repiten o no dicen adónde llevan. Arreglo: cambiar el texto o el aria-label por el que proponemos.
Otro idioma · enlace
Ahora se oye: «Shop» (3 veces). Está en inglés y la página en español.
Propuesta: «Inicio»
Otro idioma · enlace
Ahora se oye: «About us» (3 veces). Está en inglés y lleva a la página de contacto.
Propuesta: «Contacto»
No dice adónde lleva · botón
Ahora se oye: «‹». Un símbolo no dice qué hace el botón.
Propuesta: «Anterior»
No dice adónde lleva · botón
Ahora se oye: «›». Un símbolo no dice qué hace el botón.
Propuesta: «Siguiente»
Jerga técnica · enlace
Ahora se oye: «IMG_2034.jpg». Es el nombre de un archivo, no dice adónde lleva.
Propuesta: «[Destino del enlace]»
No dice adónde lleva · enlace
Ahora se oye: «Leer más» (4 veces). No dice qué se va a leer.
Propuesta: «Leer más sobre nuestros cafés»
No dice adónde lleva · enlace
Ahora se oye: «foto». No dice qué muestra ni adónde lleva.
Propuesta: «[Descripción de la foto y destino]»
Otro idioma · botón
Ahora se oye: «Subscribe» (3 veces). Está en inglés y la página en español.
Propuesta: «Suscribirme»
Otro idioma · botón
Ahora se oye: «Add to cart». Está en inglés y la página en español.
Propuesta: «Añadir al carrito»
No dice adónde lleva · enlace
Ahora se oye: «Click here». Está en inglés y no dice adónde lleva.
Propuesta: «Volver a la página de inicio»
Otro idioma · botón
Ahora se oye: «Send». Está en inglés y la página en español.
Propuesta: «Enviar mensaje»
Enlaces que no dicen adónde llevan
Los lectores de pantalla permiten saltar de enlace en enlace. Si diez enlaces dicen «Leer más», la persona no sabe cuál es cuál. Arreglo: que el texto diga el destino («Leer más sobre envíos») o añadir un aria-label.
«Leer más» · 4 veces
«Click here» · 1 vez
Declaración de accesibilidad
No la hemos encontrado. La Ley 11/2023 obliga a las empresas incluidas a explicar, en sus condiciones generales o en un documento equivalente y en formato accesible, cómo cumple su servicio los requisitos de accesibilidad; lo habitual es una página de «Accesibilidad» enlazada desde el pie. Las administraciones públicas, además, tienen que publicar una declaración que diga qué grado de cumplimiento tienen, qué contenido no es accesible, cuándo se evaluó y cómo avisar de un problema, enlazada desde todas las páginas.
Te dejamos un borrador con los datos de este informe. Completa lo que va entre corchetes, revisa que todo sea cierto y publícalo.
Antes de publicarlo, conviene que una persona revise lo que este informe no cubre: los procesos completos (buscar, comprar, registrarse, pagar), los mensajes de error de los formularios, las ventanas emergentes, los vídeos y los documentos que se descargan. Si encuentra más fallos, añádelos a la lista.
Ojo: si tu servicio está dentro de la Ley 11/2023 y no cumple, la ley te obliga a corregirlo y a informar a la autoridad competente. Consúltalo con tu asesor antes de publicar.
Tu borrador: Declaración de accesibilidad
[Nombre de tu empresa] se compromete a hacer accesible su sitio web cafedemuestra.example, de acuerdo con la Ley 11/2023. Como referencia técnica usa la norma UNE-EN 301549, que recoge las pautas WCAG 2.1 de nivel AA; hemos revisado también los criterios nuevos de WCAG 2.2.
Descripción del servicio
[Describe brevemente tu servicio, cómo se presta y cómo se usa con lector de pantalla, teclado o ampliación.]
[Pendiente de revisión por una persona experta antes de publicar.]
Situación de cumplimiento
Este sitio web no es conforme con las pautas WCAG 2.1 de nivel AA, por los motivos que se indican a continuación.
Contenido no accesible
Botones sin nombre (menú, buscar, cerrar…) que no se pueden usar con lector de pantalla.
Campos de formulario sin etiqueta: quien usa lector de pantalla no sabe qué escribir.
Enlaces vacíos: una persona ciega oye «enlace» sin saber adónde lleva.
La web impide ampliar con los dedos en el móvil.
Campos cuyo único nombre es el texto de ejemplo de dentro: al empezar a escribir desaparece, y algunos lectores de pantalla ni lo leen.
Imágenes sin descripción: un lector de pantalla no sabe qué muestran.
Algunas imágenes no tienen una descripción adecuada.
Algunos botones y enlaces tienen nombres que no se entienden con lector de pantalla.
En algunos elementos no se ve dónde está el foco al navegar con el teclado.
Hay elementos que se pueden pulsar con el ratón pero no con el teclado.
Estamos trabajando para corregirlo antes del [fecha prevista].
Preparación de esta declaración
Declaración preparada el 2026-11-01 mediante autoevaluación: análisis automático según WCAG 2.2 A y AA, pruebas automatizadas de uso con teclado y revisión automatizada de imágenes y de los nombres de botones y enlaces[, y revisión manual de …].
Observaciones y datos de contacto
Si encuentras algún problema de accesibilidad o necesitas la información en otro formato, escríbenos a [correo] o llámanos al [teléfono]. Responderemos en un plazo máximo de [plazo: 20 días hábiles en las administraciones; en las empresas, el que fijes].
Vías de reclamación
Si crees que este servicio no cumple los requisitos de accesibilidad, puedes reclamar ante [la autoridad competente en materia de accesibilidad o de consumo].
Los fallos, uno a uno
1. Botones sin nombre (menú, buscar, cerrar…) que no se pueden usar con lector de pantalla
Crítico · 1 elemento en 1 de 3 páginas · regla button-name
Cómo arreglarlo. Dar nombre a cada botón: texto visible o aria-label ("Añadir al carrito", "Cerrar", "Buscar").
5. Campos cuyo único nombre es el texto de ejemplo de dentro
Al empezar a escribir desaparece, y algunos lectores de pantalla ni lo leen.
Grave · 6 elementos en 3 de 3 páginas · regla wa-placeholder
Cómo arreglarlo. Añadir a cada campo un <label> visible (o, si no puede verse, un aria-label). El placeholder puede quedarse como ejemplo, pero no sustituye a la etiqueta.
Crítico · 1 elemento en 1 de 3 páginas · regla image-alt
Cómo arreglarlo. Añadir a cada <img> un atributo alt que describa lo que aporta la imagen (p. ej. alt="Zapatilla de running azul, vista lateral"). Si es solo decorativa, alt="" vacío.
7. Textos con poco contraste, difíciles de leer para personas con baja visión
Grave · 13 elementos en 3 de 3 páginas · regla color-contrast
Cómo arreglarlo. Oscurecer el texto o aclarar el fondo hasta un contraste de 4,5:1 (3:1 en textos grandes). En el informe aparece cada par de colores que falla.
https://cafedemuestra.example/Código: Código: <p class="promo">Envío gratis a partir de 35 € · Tostamos cada lunes en pequeños lotes</p>Texto #9a8775 sobre fondo #fffaf2: contraste 3.31:1, hace falta 4.5:1.
https://cafedemuestra.example/Código: Código: <p class="precio">12,90 €</p>Texto #a08b78 sobre fondo #fffaf2: contraste 3.12:1, hace falta 4.5:1.
https://cafedemuestra.example/producto.htmlCódigo: Código: <p class="precio">12,90 €</p>Texto #a08b78 sobre fondo #fffaf2: contraste 3.12:1, hace falta 4.5:1.
https://cafedemuestra.example/contacto.htmlCódigo: Código: <p class="promo">Respondemos en menos de 24 horas laborables.</p>Texto #9a8775 sobre fondo #fffaf2: contraste 3.31:1, hace falta 4.5:1.
9. La página se sale por la derecha al ampliarla o en un móvil pequeño
Quien amplía el texto tiene que desplazarse de lado en cada línea.
Grave · 1 elemento en 1 de 3 páginas · regla wa-reflow
Cómo arreglarlo. Que el diseño se adapte a 320 px de ancho: sin anchos fijos en píxeles, imágenes con max-width: 100 % y tablas o bloques anchos con su propio desplazamiento.
https://cafedemuestra.example/ (en pantalla de móvil)Código: Código: <html> (la página se sale por la derecha a 320 px)
10. Títulos que se saltan niveles
El lector de pantalla da a entender que falta una parte de la página.
Moderado · buena práctica · 1 elemento en 1 de 3 páginas · regla heading-order
Cómo arreglarlo. Usar los títulos en orden (<h1>, luego <h2>, <h3>…) sin saltarse niveles; el tamaño se cambia con CSS, no con el nivel.
