Llegeix el resum: la situació, el risc i què cal fer, en un minut.
Passa aquest enllaç a qui mantingui el teu web: els errors van del més greu al menys, amb on són i com arreglar-los.
Guarda aquest enllaç: és el teu accés a l'informe. Comparteix-lo només amb qui vulguis que el vegi.
En resum
Per a qui decideix, en un minut.
Situació: hi ha coses que un lector de pantalla no pot anomenar o que no es poden fer servir sense ratolí; comença per aquestes.
Risc: si la web ven o presta serveis a consumidors (comerç electrònic, banca, transport…), la Llei 11/2023 obliga que sigui accessible, tret que el servei el presti una microempresa, i no hem trobat informació sobre l'accessibilitat de la web. Un usuari pot reclamar, i l'administració, sancionar. Si és el teu cas, consulta-ho amb el teu assessor.
El primer: botons sense nom (menú, cerca, tanca…) que no es poden fer servir amb lector de pantalla.
Què cal fer: passar aquest informe a qui mantingui la web, arreglar els errors en l'ordre en què apareixen i publicar la declaració.
Abans de començar
La llei remet a unes normes tècniques d'accessibilitat basades en una llista de pautes que es diuen WCAG (la norma de referència, UNE-EN 301549, recull la versió 2.1, nivell AA, i nosaltres hi afegim el que és nou de la 2.2 i es pot mesurar, com la mida dels botons). Una màquina pot comprovar més o menys un terç d'aquesta llista, i això és el que mesura aquest informe.
La resta l'ha de revisar una persona: per exemple, si la web es pot fer servir sencera només amb el teclat, si es llegeix en un ordre lògic o si les descripcions de les imatges diuen alguna cosa útil.
Primer hi ha els errors que impedeixen fer servir la web i després la resta, de més a menys greu. A cada un tens què vol dir, com s'arregla i exemples trets de la teva pròpia web. Què mesurem i què no.
Així comença la teva portada per a qui no la veu
«Enllaç: Café de Muestra, inicio.»
«Enllaç: Shop.»
«Enllaç: Cafés.»
«Enllaç: About us.»
«Enllaç: Contacto.»
«Botó: Buscar.»
«Botó: Carrito.»
«Imatge: Taza de café recién hecho. Recién tostado cada lunes.»
«Botó: ‹.»
«Botó: ›.»
«Enllaç: IMG_2034.jpg.»
«Enllaç: Leer más.»
Els primers enllaços, botons i imatges, tal com els anomena un lector de pantalla (a més, llegeix els textos i els títols que hi ha entre ells). Cada «sense nom» és una cosa que qui no veu la pantalla no pot fer servir.
Fer servir la web només amb el teclat
Molta gent no fa servir ratolí: persones cegues, amb poca mobilitat a les mans o que naveguen amb un polsador. Hem recorregut les teves pàgines prement la tecla Tabulador, com ho farien elles.
Portada
https://cafedemuestra.example/
·Recomanació: Recomanació: No hi ha cap enllaç per saltar al contingut. La pàgina té una altra manera de saltar-se el menú (zones marcades), però l'enllaç al principi ajuda molt a qui fa servir teclat.
✓Correcte: Correcte: No hem trobat llocs on el focus es quedi atrapat.
✗Error: Error: En 15 elements o més no es veu on és el focus. Qui fa servir el teclat es perd. Solució: no treure el contorn del focus (outline: none) o substituir-lo per un altre de ben visible.
✓Correcte: Correcte: El focus no es fica en elements amagats.
✗Error: Error: 1 cosa es pot prémer amb el ratolí però no amb el teclat, per exemple: «Ver ofertas». Solució: fer servir botons i enllaços de debò (<button>, <a href>) en lloc de <div> o <span> amb clic.
Sense focus visible, per exemple: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Pàgina /producto.html
https://cafedemuestra.example/producto.html
·Recomanació: Recomanació: No hi ha cap enllaç per saltar al contingut. La pàgina té una altra manera de saltar-se el menú (zones marcades), però l'enllaç al principi ajuda molt a qui fa servir teclat.
✓Correcte: Correcte: No hem trobat llocs on el focus es quedi atrapat.
✗Error: Error: En 13 elements no es veu on és el focus. Qui fa servir el teclat es perd. Solució: no treure el contorn del focus (outline: none) o substituir-lo per un altre de ben visible.
✓Correcte: Correcte: El focus no es fica en elements amagats.
✓Correcte: Correcte: No hem trobat coses que es premin amb el ratolí i no amb el teclat (les que es fan a mida, com menús o carrusels, convé provar-les a mà).
Sense focus visible, per exemple: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Pàgina /contacto.html
https://cafedemuestra.example/contacto.html
·Recomanació: Recomanació: No hi ha cap enllaç per saltar al contingut. La pàgina té una altra manera de saltar-se el menú (zones marcades), però l'enllaç al principi ajuda molt a qui fa servir teclat.
✓Correcte: Correcte: No hem trobat llocs on el focus es quedi atrapat.
✗Error: Error: En 12 elements no es veu on és el focus. Qui fa servir el teclat es perd. Solució: no treure el contorn del focus (outline: none) o substituir-lo per un altre de ben visible.
✓Correcte: Correcte: El focus no es fica en elements amagats.
✓Correcte: Correcte: No hem trobat coses que es premin amb el ratolí i no amb el teclat (les que es fan a mida, com menús o carrusels, convé provar-les a mà).
Sense focus visible, per exemple: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Les imatges, una per una
Hem revisat una per una 6 imatges de la teva web, comparant cadascuna amb la seva descripció.
3 no tenen una descripció que serveixi. Et deixem la que proposem: revisa-la i copia-la a l'atribut alt.
Les propostes les redacta una màquina mirant la imatge: revisa-les abans de fer-les servir. Els comentaris d'aquesta revisió són en la llengua en què es va demanar l'anàlisi (Español).
Descripció que no serveix
Es un nombre de archivo y no dice qué producto es.
Ara: alt="IMG_2034.jpg"
Proposta: alt="Bolsa de café de Colombia Huila, 250 gramos"
Sense descripció
No tiene texto alternativo y muestra un producto.
Ara: sense atribut alt
Proposta: alt="Bolsa de café de Etiopía Yirgacheffe, 250 gramos"
Descripció que no serveix
La palabra «foto» no explica qué producto se muestra.
Ara: alt="foto"
Proposta: alt="Bolsa de café descafeinado por proceso de agua, 250 gramos"
I 3 imatges amb una bona descripció.
El que diuen els teus botons i enllaços
Qui fa servir un lector de pantalla sent el nom de cada botó i enllaç. Hem revisat els 23 que apareixen a les teves pàgines.
11 no s'entenen bé: estan en un altre idioma, fan servir argot tècnic, es repeteixen o no diuen on porten. Solució: canviar el text o l'aria-label pel que proposem. Els comentaris d'aquesta revisió són en la llengua en què es va demanar l'anàlisi (Español).
Un altre idioma · enllaç
Ara se sent: «Shop» (3 vegades). Está en inglés y la página en español.
Proposta: «Inicio»
Un altre idioma · enllaç
Ara se sent: «About us» (3 vegades). Está en inglés y lleva a la página de contacto.
Proposta: «Contacto»
No diu on porta · botó
Ara se sent: «‹». Un símbolo no dice qué hace el botón.
Proposta: «Anterior»
No diu on porta · botó
Ara se sent: «›». Un símbolo no dice qué hace el botón.
Proposta: «Siguiente»
Argot tècnic · enllaç
Ara se sent: «IMG_2034.jpg». Es el nombre de un archivo, no dice adónde lleva.
Proposta: «[Destino del enlace]»
No diu on porta · enllaç
Ara se sent: «Leer más» (4 vegades). No dice qué se va a leer.
Proposta: «Leer más sobre nuestros cafés»
No diu on porta · enllaç
Ara se sent: «foto». No dice qué muestra ni adónde lleva.
Proposta: «[Descripción de la foto y destino]»
Un altre idioma · botó
Ara se sent: «Subscribe» (3 vegades). Está en inglés y la página en español.
Proposta: «Suscribirme»
Un altre idioma · botó
Ara se sent: «Add to cart». Está en inglés y la página en español.
Proposta: «Añadir al carrito»
No diu on porta · enllaç
Ara se sent: «Click here». Está en inglés y no dice adónde lleva.
Proposta: «Volver a la página de inicio»
Un altre idioma · botó
Ara se sent: «Send». Está en inglés y la página en español.
Proposta: «Enviar mensaje»
Enllaços que no diuen on porten
Els lectors de pantalla permeten saltar d'enllaç en enllaç. Si deu enllaços diuen «Llegir més», la persona no sap quin és quin. Solució: que el text digui la destinació («Llegir més sobre els enviaments») o afegir un aria-label.
«Leer más» · 4 vegades
«Click here» · 1 vegada
Declaració d'accessibilitat
No l'hem trobada. La Llei 11/2023 obliga les empreses incloses en el seu àmbit a explicar, en les seves condicions generals o en un document equivalent i en format accessible, com compleix el seu servei els requisits d'accessibilitat; el més habitual és una pàgina d'«Accessibilitat» enllaçada des del peu de pàgina. Les administracions públiques, a més, han de publicar una declaració que indiqui quin grau de compliment tenen, quin contingut no és accessible, quan es va avaluar i com avisar d'un problema, enllaçada des de totes les pàgines.
Et deixem un esborrany amb les dades d'aquest informe. Completa el que hi ha entre claudàtors, revisa que tot sigui cert i publica'l.
Abans de publicar-lo, convé que una persona revisi el que aquest informe no cobreix: els processos complets (cercar, comprar, registrar-se, pagar), els missatges d'error dels formularis, les finestres emergents, els vídeos i els documents que es descarreguen. Si troba més errors, afegeix-los a la llista.
Compte: si el teu servei entra en l'àmbit de la Llei 11/2023 i no la compleix, la llei t'obliga a corregir-ho i a informar-ne l'autoritat competent. Consulta-ho amb el teu assessor abans de publicar-la.
El teu esborrany: Declaració d'accessibilitat
[Nom de la teva empresa] es compromet a fer accessible el seu lloc web cafedemuestra.example, d'acord amb la Llei 11/2023. Com a referència tècnica fa servir la norma UNE-EN 301549, que recull les pautes WCAG 2.1 de nivell AA; també hem revisat els criteris nous de WCAG 2.2.
Descripció del servei
[Descriu breument el teu servei, com es presta i com es fa servir amb lector de pantalla, teclat o ampliació.]
[Pendent de revisió per una persona experta abans de publicar.]
Situació de compliment
Aquest lloc web no és conforme amb les pautes WCAG 2.1 de nivell AA, pels motius que s'indiquen a continuació.
Contingut no accessible
Botons sense nom (menú, cerca, tanca…) que no es poden fer servir amb lector de pantalla.
Camps de formulari sense etiqueta: qui fa servir lector de pantalla no sap què ha d'escriure.
Enllaços buits: una persona cega sent «enllaç» sense saber on porta.
La web impedeix ampliar amb els dits al mòbil.
Camps l'únic nom dels quals és el text d'exemple de dins: en començar a escriure desapareix, i alguns lectors de pantalla ni el llegeixen.
Imatges sense descripció: un lector de pantalla no sap què mostren.
Algunes imatges no tenen una descripció adequada.
Alguns botons i enllaços tenen noms que no s'entenen amb lector de pantalla.
En alguns elements no es veu on és el focus en navegar amb el teclat.
Hi ha elements que es poden prémer amb el ratolí però no amb el teclat.
Estem treballant per corregir-ho abans del [data prevista].
Preparació d'aquesta declaració
Declaració preparada el 2026-11-01 mitjançant autoavaluació: anàlisi automàtica segons WCAG 2.2 A i AA, proves automatitzades d'ús amb teclat i revisió automatitzada d'imatges i dels noms de botons i enllaços[, i revisió manual de …].
Observacions i dades de contacte
Si trobes algun problema d'accessibilitat o necessites la informació en un altre format, escriu-nos a [correu] o truca'ns al [telèfon]. Respondrem en un termini màxim de [termini: 20 dies hàbils a les administracions; a les empreses, el que fixis].
Vies de reclamació
Si creus que aquest servei no compleix els requisits d'accessibilitat, pots reclamar davant [l'autoritat competent en matèria d'accessibilitat o de consum].
Els errors, un per un
1. Botons sense nom (menú, cerca, tanca…) que no es poden fer servir amb lector de pantalla
Crític · 1 element en 1 de 3 pàgines · regla button-name
Com arreglar-ho. Donar nom a cada botó: text visible o aria-label ("Afegeix a la cistella", "Tanca", "Cerca").
5. Camps l'únic nom dels quals és el text d'exemple de dins
En començar a escriure desapareix, i alguns lectors de pantalla ni el llegeixen.
Greu · 6 elements en 3 de 3 pàgines · regla wa-placeholder
Com arreglar-ho. Afegir a cada camp un <label> visible (o, si no es pot veure, un aria-label). El placeholder pot quedar com a exemple, però no substitueix l'etiqueta.
Crític · 1 element en 1 de 3 pàgines · regla image-alt
Com arreglar-ho. Afegir a cada <img> un atribut alt que descrigui el que aporta la imatge (p. ex. alt="Sabatilla de running blava, vista lateral"). Si només és decorativa, alt="" buit.
7. Textos amb poc contrast, difícils de llegir per a persones amb baixa visió
Greu · 13 elements en 3 de 3 pàgines · regla color-contrast
Com arreglar-ho. Enfosquir el text o aclarir el fons fins a un contrast de 4,5:1 (3:1 en textos grans). A l'informe apareix cada parell de colors que falla.
https://cafedemuestra.example/Codi: Codi: <p class="promo">Envío gratis a partir de 35 € · Tostamos cada lunes en pequeños lotes</p>Text #9a8775 sobre fons #fffaf2: contrast 3.31:1, cal 4.5:1.
https://cafedemuestra.example/Codi: Codi: <p class="precio">12,90 €</p>Text #a08b78 sobre fons #fffaf2: contrast 3.12:1, cal 4.5:1.
https://cafedemuestra.example/producto.htmlCodi: Codi: <p class="precio">12,90 €</p>Text #a08b78 sobre fons #fffaf2: contrast 3.12:1, cal 4.5:1.
https://cafedemuestra.example/contacto.htmlCodi: Codi: <p class="promo">Respondemos en menos de 24 horas laborables.</p>Text #9a8775 sobre fons #fffaf2: contrast 3.31:1, cal 4.5:1.
9. La pàgina surt per la dreta en ampliar-la o en un mòbil petit
Qui amplia el text s'ha de desplaçar de costat a cada línia.
Greu · 1 element en 1 de 3 pàgines · regla wa-reflow
Com arreglar-ho. Que el disseny s'adapti a 320 px d'amplada: sense amplades fixes en píxels, imatges amb max-width: 100 % i taules o blocs amples amb el seu propi desplaçament.
https://cafedemuestra.example/ (en pantalla de mòbil)Codi: Codi: <html> (la pàgina surt per la dreta a 320 px)
10. Títols que se salten nivells
El lector de pantalla dona a entendre que falta una part de la pàgina.
Moderat · bona pràctica · 1 element en 1 de 3 pàgines · regla heading-order
Com arreglar-ho. Fer servir els títols en ordre (<h1>, després <h2>, <h3>…) sense saltar-se nivells; la mida es canvia amb CSS, no amb el nivell.
