Le o resumo: a situación, o risco e que facer, nun minuto.
Pásalle esta ligazón a quen manteña a túa web: os fallos van do máis grave ao menos, con onde están e como arranxalos.
Garda esta ligazón: é o teu acceso ao informe. Compártea só con quen queiras que o vexa.
En resumo
Para quen decide, nun minuto.
Situación: hai cousas que un lector de pantalla non pode nomear ou que non se poden usar sen rato; comeza por elas.
Risco: se a web vende ou presta servizos a consumidores (comercio electrónico, banca, transporte…), a Lei 11/2023 obriga a que sexa accesible, salvo que o servizo o preste unha microempresa, e non atopamos información sobre a accesibilidade da web. Un usuario pode reclamar, e a administración, sancionar. Se é o teu caso, consúltao co teu asesor.
O primeiro: botóns sen nome (menú, buscar, pechar…) que non se poden usar con lector de pantalla.
Que facer: pasarlle este informe a quen manteña a web, arranxar os erros na orde en que aparecen e publicar a declaración.
Antes de comezar
A lei remite a unhas normas técnicas de accesibilidade baseadas nunha lista de pautas que se chaman WCAG (a norma de referencia, UNE-EN 301549, recolle a versión 2.1, nivel AA, e nós engadimos o novo da 2.2 que se pode medir, como o tamaño dos botóns). Unha máquina pode comprobar máis ou menos un terzo desa lista, e iso é o que mide este informe.
O resto ten que revisalo unha persoa: por exemplo, se a web se pode usar enteira só co teclado, se se le nunha orde lóxica ou se as descricións das imaxes din algo útil.
Primeiro van os erros que impiden usar a web e despois o resto, de máis a menos grave. En cada un tes que significa, como se arranxa e exemplos sacados da túa propia web. Que medimos e que non.
Así comeza a túa portada para quen non a ve
«Ligazón: Café de Muestra, inicio.»
«Ligazón: Shop.»
«Ligazón: Cafés.»
«Ligazón: About us.»
«Ligazón: Contacto.»
«Botón: Buscar.»
«Botón: Carrito.»
«Imaxe: Taza de café recién hecho. Recién tostado cada lunes.»
«Botón: ‹.»
«Botón: ›.»
«Ligazón: IMG_2034.jpg.»
«Ligazón: Leer más.»
As primeiras ligazóns, botóns e imaxes, tal como os nomea un lector de pantalla (ademais, le os textos e os títulos que hai entre eles). Cada «sen nome» é algo que quen non ve a pantalla non pode usar.
Usar a web só co teclado
Moita xente non usa rato: persoas cegas, con pouca mobilidade nas mans ou que navegan cun pulsador. Percorremos as túas páxinas premendo a tecla Tabulador, como o farían elas.
Portada
https://cafedemuestra.example/
·Recomendación: Recomendación: Non hai unha ligazón para saltar ao contido. A páxina ten outra forma de saltar o menú (zonas marcadas), pero a ligazón ao principio axuda moito a quen usa teclado.
✓Correcto: Correcto: Non atopamos sitios onde o foco quede atrapado.
✗Erro: Erro: En 15 ou máis elementos non se ve onde está o foco. Quen usa o teclado pérdese. Arranxo: non quitar o contorno de foco (outline: none) ou substituílo por outro ben visible.
✓Correcto: Correcto: O foco non se mete en elementos ocultos.
✗Erro: Erro: 1 cousa pódese premer co rato pero non co teclado, por exemplo: «Ver ofertas». Arranxo: usar botóns e ligazóns de verdade (<button>, <a href>) en lugar de <div> ou <span> con clic.
Sen foco visible, por exemplo: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Páxina /producto.html
https://cafedemuestra.example/producto.html
·Recomendación: Recomendación: Non hai unha ligazón para saltar ao contido. A páxina ten outra forma de saltar o menú (zonas marcadas), pero a ligazón ao principio axuda moito a quen usa teclado.
✓Correcto: Correcto: Non atopamos sitios onde o foco quede atrapado.
✗Erro: Erro: En 13 elementos non se ve onde está o foco. Quen usa o teclado pérdese. Arranxo: non quitar o contorno de foco (outline: none) ou substituílo por outro ben visible.
✓Correcto: Correcto: O foco non se mete en elementos ocultos.
✓Correcto: Correcto: Non atopamos cousas que se preman co rato e non co teclado (as que se fan a medida, como menús ou carruseis, convén probalas a man).
Sen foco visible, por exemplo: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Páxina /contacto.html
https://cafedemuestra.example/contacto.html
·Recomendación: Recomendación: Non hai unha ligazón para saltar ao contido. A páxina ten outra forma de saltar o menú (zonas marcadas), pero a ligazón ao principio axuda moito a quen usa teclado.
✓Correcto: Correcto: Non atopamos sitios onde o foco quede atrapado.
✗Erro: Erro: En 12 elementos non se ve onde está o foco. Quen usa o teclado pérdese. Arranxo: non quitar o contorno de foco (outline: none) ou substituílo por outro ben visible.
✓Correcto: Correcto: O foco non se mete en elementos ocultos.
✓Correcto: Correcto: Non atopamos cousas que se preman co rato e non co teclado (as que se fan a medida, como menús ou carruseis, convén probalas a man).
Sen foco visible, por exemplo: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
As imaxes, unha a unha
Revisamos unha a unha 6 imaxes da túa web, comparando cada unha coa súa descrición.
3 non teñen unha descrición que sirva. Deixámosche a que propoñemos: revísaa e cópiaa no atributo alt.
As propostas redáctaas unha máquina mirando a imaxe: revísaas antes de usalas. Os comentarios desta revisión están na lingua en que se pediu a análise (Español).
Descrición que non serve
Es un nombre de archivo y no dice qué producto es.
Agora: alt="IMG_2034.jpg"
Proposta: alt="Bolsa de café de Colombia Huila, 250 gramos"
Sen descrición
No tiene texto alternativo y muestra un producto.
Agora: sen atributo alt
Proposta: alt="Bolsa de café de Etiopía Yirgacheffe, 250 gramos"
Descrición que non serve
La palabra «foto» no explica qué producto se muestra.
Agora: alt="foto"
Proposta: alt="Bolsa de café descafeinado por proceso de agua, 250 gramos"
E 3 imaxes cunha boa descrición.
O que din os teus botóns e ligazóns
Quen usa un lector de pantalla oe o nome de cada botón e ligazón. Revisamos os 23 que aparecen nas túas páxinas.
11 non se entenden ben: van noutro idioma, usan xerga técnica, repítense ou non din onde levan. Arranxo: cambiar o texto ou o aria-label polo que propoñemos. Os comentarios desta revisión están na lingua en que se pediu a análise (Español).
Outro idioma · ligazón
Agora óese: «Shop» (3 veces). Está en inglés y la página en español.
Proposta: «Inicio»
Outro idioma · ligazón
Agora óese: «About us» (3 veces). Está en inglés y lleva a la página de contacto.
Proposta: «Contacto»
Non di onde leva · botón
Agora óese: «‹». Un símbolo no dice qué hace el botón.
Proposta: «Anterior»
Non di onde leva · botón
Agora óese: «›». Un símbolo no dice qué hace el botón.
Proposta: «Siguiente»
Xerga técnica · ligazón
Agora óese: «IMG_2034.jpg». Es el nombre de un archivo, no dice adónde lleva.
Proposta: «[Destino del enlace]»
Non di onde leva · ligazón
Agora óese: «Leer más» (4 veces). No dice qué se va a leer.
Proposta: «Leer más sobre nuestros cafés»
Non di onde leva · ligazón
Agora óese: «foto». No dice qué muestra ni adónde lleva.
Proposta: «[Descripción de la foto y destino]»
Outro idioma · botón
Agora óese: «Subscribe» (3 veces). Está en inglés y la página en español.
Proposta: «Suscribirme»
Outro idioma · botón
Agora óese: «Add to cart». Está en inglés y la página en español.
Proposta: «Añadir al carrito»
Non di onde leva · ligazón
Agora óese: «Click here». Está en inglés y no dice adónde lleva.
Proposta: «Volver a la página de inicio»
Outro idioma · botón
Agora óese: «Send». Está en inglés y la página en español.
Proposta: «Enviar mensaje»
Ligazóns que non din onde levan
Os lectores de pantalla permiten saltar de ligazón en ligazón. Se dez ligazóns din «Ler máis», a persoa non sabe cal é cal. Arranxo: que o texto diga o destino («Ler máis sobre envíos») ou engadir un aria-label.
«Leer más» · 4 veces
«Click here» · 1 vez
Declaración de accesibilidade
Non a atopamos. A Lei 11/2023 obriga as empresas incluídas no seu ámbito a explicar, nas súas condicións xerais ou nun documento equivalente e en formato accesible, como cumpre o seu servizo os requisitos de accesibilidade; o habitual é unha páxina de «Accesibilidade» con ligazón desde o pé de páxina. As administracións públicas, ademais, teñen que publicar unha declaración que diga que grao de cumprimento teñen, que contido non é accesible, cando se avaliou e como avisar dun problema, con ligazón desde todas as páxinas.
Deixámosche un borrador cos datos deste informe. Completa o que vai entre corchetes, revisa que todo sexa certo e publícao.
Antes de publicalo, convén que unha persoa revise o que este informe non cobre: os procesos completos (buscar, comprar, rexistrarse, pagar), as mensaxes de erro dos formularios, as xanelas emerxentes, os vídeos e os documentos que se descargan. Se atopa máis erros, que os engada á lista.
Ollo: se o teu servizo está dentro do ámbito da Lei 11/2023 e non a cumpre, a lei obrígate a corrixilo e a informar diso a autoridade competente. Consúltao co teu asesor antes de publicala.
O teu borrador: Declaración de accesibilidade
[Nome da túa empresa] comprométese a facer accesible o seu sitio web cafedemuestra.example, de acordo coa Lei 11/2023. Como referencia técnica usa a norma UNE-EN 301549, que recolle as pautas WCAG 2.1 de nivel AA; revisamos tamén os criterios novos de WCAG 2.2.
Descrición do servizo
[Describe brevemente o teu servizo, como se presta e como se usa con lector de pantalla, teclado ou ampliación.]
[Pendente de revisión por unha persoa experta antes de publicar.]
Situación de cumprimento
Este sitio web non é conforme coas pautas WCAG 2.1 de nivel AA, polos motivos que se indican a continuación.
Contido non accesible
Botóns sen nome (menú, buscar, pechar…) que non se poden usar con lector de pantalla.
Campos de formulario sen etiqueta: quen usa lector de pantalla non sabe que escribir.
Ligazóns baleiras: unha persoa cega oe «ligazón» sen saber onde leva.
A web impide ampliar cos dedos no móbil.
Campos cuxo único nome é o texto de exemplo de dentro: ao comezar a escribir desaparece, e algúns lectores de pantalla nin o len.
Imaxes sen descrición: un lector de pantalla non sabe que mostran.
Algunhas imaxes non teñen unha descrición axeitada.
Algúns botóns e ligazóns teñen nomes que non se entenden co lector de pantalla.
Nalgúns elementos non se ve onde está o foco ao navegar co teclado.
Hai elementos que se poden premer co rato pero non co teclado.
Estamos traballando para corrixilo antes do [data prevista].
Preparación desta declaración
Declaración preparada o 2026-11-01 mediante autoavaliación: análise automática segundo WCAG 2.2 A e AA, probas automatizadas de uso co teclado e revisión automatizada de imaxes e dos nomes de botóns e ligazóns[, e revisión manual de …].
Observacións e datos de contacto
Se atopas algún problema de accesibilidade ou necesitas a información noutro formato, escríbenos a [correo] ou chámanos ao [teléfono]. Responderemos nun prazo máximo de [prazo: 20 días hábiles nas administracións; nas empresas, o que fixes].
Vías de reclamación
Se cres que este servizo non cumpre os requisitos de accesibilidade, podes reclamar ante [a autoridade competente en materia de accesibilidade ou de consumo].
Os erros, un a un
1. Botóns sen nome (menú, buscar, pechar…) que non se poden usar con lector de pantalla
Crítico · 1 elemento en 1 de 3 páxinas · regra button-name
Como arranxalo. Dar nome a cada botón: texto visible ou aria-label ("Engadir ao carro", "Pechar", "Buscar").
5. Campos cuxo único nome é o texto de exemplo de dentro
Ao comezar a escribir desaparece, e algúns lectores de pantalla nin o len.
Grave · 6 elementos en 3 de 3 páxinas · regra wa-placeholder
Como arranxalo. Engadir a cada campo un <label> visible (ou, se non pode verse, un aria-label). O placeholder pode quedar como exemplo, pero non substitúe a etiqueta.
Crítico · 1 elemento en 1 de 3 páxinas · regra image-alt
Como arranxalo. Engadir a cada <img> un atributo alt que describa o que achega a imaxe (p. ex. alt="Zapatilla de correr azul, vista lateral"). Se é só decorativa, alt="" baleiro.
7. Textos con pouco contraste, difíciles de ler para persoas con baixa visión
Grave · 13 elementos en 3 de 3 páxinas · regra color-contrast
Como arranxalo. Escurecer o texto ou aclarar o fondo ata un contraste de 4,5:1 (3:1 en textos grandes). No informe aparece cada par de cores 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, fai 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, fai 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, fai 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, fai falta 4.5:1.
9. A páxina sáese pola dereita ao ampliala ou nun móbil pequeno
Quen amplía o texto ten que desprazarse de lado en cada liña.
Grave · 1 elemento en 1 de 3 páxinas · regra wa-reflow
Como arranxalo. Que o deseño se adapte a 320 px de ancho: sen anchos fixos en píxeles, imaxes con max-width: 100 % e táboas ou bloques anchos co seu propio desprazamento.
https://cafedemuestra.example/ (en pantalla de móbil)Código: Código: <html> (a páxina sae pola dereita a 320 px)
10. Títulos que saltan niveis
O lector de pantalla dá a entender que falta unha parte da páxina.
Moderado · boa práctica · 1 elemento en 1 de 3 páxinas · regra heading-order
Como arranxalo. Usar os títulos en orde (<h1>, logo <h2>, <h3>…) sen saltar niveis; o tamaño cámbiase con CSS, non co nivel.
