Informe de muestra, no es un encargo de cliente · se analizó la tienda de muestra ficticia de Five49
Informe de accesibilidad
musterladen.example
Análisis automatizado según la WCAG 2.2 nivel AA, el estándar técnico de referencia para sitios web accesibles. 6 páginas analizadas.
Informe de muestra, no es un encargo de cliente
Este informe muestra cómo es un Snapshot. Se analizó una tienda de muestra que Five49 creó solo con este fin. La tienda, sus productos y su dirección no existen.
Five49 incorporó las barreras a propósito. Algunas no pueden detectarse con un análisis automatizado. Por eso no aparecen en este informe, igual que las barreras de este tipo tampoco aparecerían en un informe sobre su tienda.
La tienda de muestra solo tiene 6 páginas; se analizaron las 6. Un Snapshot analiza hasta 25 páginas de su tienda.
Los hallazgos y las cifras proceden del mismo programa de análisis, con las mismas reglas que un encargo de cliente, y no se han modificado a mano.
41/100
Requiere atención considerable
5 críticos · 7 graves · 7 moderados · 0 leves · 81 apariciones
Enlace a una declaración de accesibilidad: no encontrado en las páginas analizadas
Alcance del análisis: Five49 ejecuta 24 comprobaciones automatizadas basadas en reglas. Buscan fallos en 15 de los 55 criterios de conformidad de la WCAG 2.2, niveles A y AA. Un análisis automatizado puede encontrar fallos, pero no demostrar que un criterio se cumple. Por eso, los 55 criterios, también estos 15, requieren además una revisión manual con lector de pantalla, teclado y ampliación. El resultado no es una declaración de conformidad ni asesoramiento jurídico, y no asegura ningún resultado jurídico.
Orden recomendado
Ordenado por impacto frente a esfuerzo: primero, los hallazgos de impacto alto (críticos o graves) que, según nuestra clasificación, se corrigen en un único lugar central o por componente. Después, los de impacto alto que hay que corregir aparición por aparición. Luego el resto, en el mismo orden. Dentro de cada grupo cuenta el número de apariciones, ponderado por la gravedad (crítico 9, grave 5, moderado 2,5, leve 1).
| N.º | Hallazgo | Impacto | Esfuerzo |
|---|
| 1 | Enlaces sin nombre accesible | Crítico · 12 apariciones | medio: por componente |
| 2 | Campos de formulario sin etiqueta | Crítico · 9 apariciones | medio: por componente |
| 3 | 5 botones sin nombre accesible | Crítico · 5 apariciones | medio: por componente |
| 4 | Zoom desactivado en dispositivos móviles | Grave · 6 apariciones | bajo: un único lugar central |
| 5 | Reglas que eliminan el indicador de foco sin sustituto | Grave · 6 apariciones | bajo: un único lugar central |
| 6 | Elementos de texto por debajo del contraste exigido | Grave · 6 apariciones | medio: por componente |
| 7 | 1 control con una función asignada que no se alcanza con el tabulador | Crítico · 1 aparición | medio: por componente |
| 8 | El elemento <html> no tiene atributo lang | Grave · 1 aparición | bajo: un único lugar central |
| 9 | La página no tiene título | Grave · 1 aparición | bajo: un único lugar central |
| 10 | 1 iframe sin atributo title | Grave · 1 aparición | medio: por componente |
| 11 | 1 referencia ARIA que apunta a elementos inexistentes | Grave · 1 aparición | medio: por componente |
| 12 | Imágenes sin texto alternativo | Crítico · 17 apariciones | alto: cada aparición por separado |
| 13 | Elementos no permitidos como hijos directos de una lista | Moderado · 6 apariciones | medio: por componente |
| 14 | 4 campos de entrada sin atributo autocomplete | Moderado · 4 apariciones | medio: por componente |
| 15 | Código de idioma no válido | Moderado · 1 aparición | bajo: un único lugar central |
| 16 | 1 rol ARIA no válido | Moderado · 1 aparición | medio: por componente |
| 17 | 1 tabla de datos sin celdas de encabezado | Moderado · 1 aparición | medio: por componente |
| 18 | 1 control cuyo texto visible no está en su nombre accesible | Moderado · 1 aparición | medio: por componente |
| 19 | 1 atributo id duplicado al que se hace referencia | Moderado · 1 aparición | medio: por componente |
Quien corrige los primeros 11 hallazgos de este orden en todas sus ubicaciones elimina 49 de las 81 apariciones encontradas (60 %).
Hallazgos
La ubicación es el lugar del HTML que su página entrega a los visitantes. El informe no indica qué archivo de su plantilla o de su software de tienda lo genera.
1
● Crítico
WCAG 4.1.2 Nombre, función, valor · Nivel A
12 apariciones · en 6 de 6 páginas
Enlaces sin nombre accesible
Pueden verse afectados, por ejemplo, los enlaces con símbolo, como carrito, búsqueda o cuenta. Según el programa, el lector de pantalla solo dice «enlace» o lee la dirección: qué hace el enlace queda sin aclarar.
Ubicación
<a href="/">Línea 17 del código fuente entregado de https://musterladen.example/
Páginas afectadas
- https://musterladen.example/
Líneas 17, 28
- https://musterladen.example/kategorie/kuechenhelfer
Líneas 17, 28 - https://musterladen.example/produkt/schneidebrett-eiche
Líneas 16, 27 - https://musterladen.example/warenkorb
Líneas 16, 27 - https://musterladen.example/kasse
Líneas 17, 28 - https://musterladen.example/kontakt
Líneas 15, 26
Corrección
Dar al enlace un nombre en el idioma de la página que diga adónde lleva: añadir texto visible o definir un aria-label. Si una imagen es el único contenido del enlace, su texto alternativo debe nombrar el destino. Ejemplos: aria-label="Inicio" para el logotipo, aria-label="Carrito" o aria-label="Mi cuenta" para un icono.
2
● Crítico
WCAG 4.1.2 Nombre, función, valor · Nivel A
9 apariciones · en 6 de 6 páginas
Campos de formulario sin etiqueta
Este campo no tiene un nombre que el lector de pantalla pueda anunciar. Según el programa, solo dice el tipo de campo, por ejemplo «campo de texto» o «lista desplegable»; qué hay que introducir o seleccionar queda sin aclarar.
Ubicación
<input type="email" name="newsletter">Línea 48 del código fuente entregado de https://musterladen.example/
Páginas afectadas
- https://musterladen.example/
Línea 48
- https://musterladen.example/kategorie/kuechenhelfer
Línea 45 - https://musterladen.example/produkt/schneidebrett-eiche
Líneas 39, 65 - https://musterladen.example/warenkorb
Líneas 36, 37, 47 - https://musterladen.example/kasse
Línea 57 - https://musterladen.example/kontakt
Línea 41
Corrección
Enlazar <label for="id-del-campo">Etiqueta</label> con el id correspondiente, o definir un aria-label en el propio campo.
3
● Crítico
WCAG 4.1.2 Nombre, función, valor · Nivel A
5 apariciones
5 botones sin nombre accesible
Pueden verse afectados, por ejemplo, los botones de menú, de cierre y de añadir al carrito. Sin nombre, el lector de pantalla no puede anunciar qué hace el botón.
Ubicación
<button type="button" class="merken">Línea 35 del código fuente entregado de https://musterladen.example/kategorie/kuechenhelfer
Páginas afectadas
- https://musterladen.example/kategorie/kuechenhelfer
Líneas 35, 36, 37, 38, 39
Corrección
Añadir texto o definir un aria-label en el idioma de la página que diga qué hace el botón, p. ej. <button aria-label="Abrir menú"> para un icono de menú, aria-label="Guardar en favoritos" para un icono de corazón o aria-label="Cerrar" para una X.
4
● Grave
WCAG 1.4.4 Cambio de tamaño del texto · Nivel AA
6 apariciones · en 6 de 6 páginas
Zoom desactivado en dispositivos móviles
La página indica a los navegadores móviles que bloqueen la ampliación o la limiten a menos del doble. Si un navegador sigue esta indicación, quien necesita un texto más grande para leerlo, por ejemplo por baja visión, no puede ampliarlo lo suficiente.
Ubicación
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Línea 5 del código fuente entregado de https://musterladen.example/
Páginas afectadas
- https://musterladen.example/
Línea 5
- https://musterladen.example/kategorie/kuechenhelfer
Línea 5 - https://musterladen.example/produkt/schneidebrett-eiche
Línea 5 - https://musterladen.example/warenkorb
Línea 5 - https://musterladen.example/kasse
Línea 5 - https://musterladen.example/kontakt
Línea 5
Corrección
Reducir el viewport a <meta name="viewport" content="width=device-width, initial-scale=1"> y eliminar user-scalable y maximum-scale.
5
● Grave
WCAG 2.4.7 Foco visible · Nivel AA
6 apariciones · en 6 de 6 páginas
Reglas que eliminan el indicador de foco sin sustituto
Quien navega con teclado deja de ver qué elemento tiene el foco. En un formulario no se distingue en qué campo se está escribiendo.
Ubicación
a:focus{outline:none}Páginas afectadas
- https://musterladen.example/
- https://musterladen.example/kategorie/kuechenhelfer
- https://musterladen.example/produkt/schneidebrett-eiche
- https://musterladen.example/warenkorb
- https://musterladen.example/kasse
- https://musterladen.example/kontakt
Corrección
Sustituir outline:none (o outline:0) por un indicador de foco visible, p. ej. outline: 3px solid #005fcc sobre fondo blanco. Si el contorno debe desaparecer al hacer clic con el ratón en enlaces y botones pero mantenerse al usar el teclado: sustituir :focus en el selector por :focus:not(:focus-visible).
6
● Grave
WCAG 1.4.3 Contraste (mínimo) · Nivel AA
6 apariciones · en 6 de 6 páginas
Elementos de texto por debajo del contraste exigido
Se exige 4,5:1 para el texto normal. Valor más bajo medido aquí: 2,85:1 (#999999 sobre #ffffff). El texto con poco contraste puede resultar difícil o imposible de leer para las personas con la vista cansada.
Ubicación
.versandhinweis{color:#999999;background-color:#ffffff}Páginas afectadas
- https://musterladen.example/
.versandhinweis{color:#999999;background-color:#ffffff}
- https://musterladen.example/kategorie/kuechenhelfer
.versandhinweis{color:#999999;background-color:#ffffff}
- https://musterladen.example/produkt/schneidebrett-eiche
.versandhinweis{color:#999999;background-color:#ffffff}
- https://musterladen.example/warenkorb
.versandhinweis{color:#999999;background-color:#ffffff}
- https://musterladen.example/kasse
.versandhinweis{color:#999999;background-color:#ffffff}
- https://musterladen.example/kontakt
.versandhinweis{color:#999999;background-color:#ffffff}
Corrección
Oscurecer el más oscuro de los dos colores (texto o fondo) o aclarar el más claro hasta alcanzar al menos 4,5:1 (texto grande a partir de 24px, o 18,66px en negrita: 3:1).
7
● Crítico
WCAG 2.1.1 Teclado · Nivel A
1 aparición
1 control con una función asignada que no se alcanza con el tabulador
Un <div> con role="button" se presenta ante el lector de pantalla como un botón, y en el código fuente tiene asignada una función (onclick). Sin embargo, no es un control nativo y no tiene tabindex: no se alcanza con el tabulador y, por esta vía, la función no se puede activar con el teclado.
Ubicación
<div class="wunsch" role="button" onclick="merken()">Línea 42 del código fuente entregado de https://musterladen.example/produkt/schneidebrett-eiche
Páginas afectadas
- https://musterladen.example/produkt/schneidebrett-eiche
Línea 42
Corrección
Usar el <button> nativo. O añadir tabindex="0" y activar la función también con Intro y la barra espaciadora.
8
● Grave
WCAG 3.1.1 Idioma de la página · Nivel A
1 aparición
El elemento <html> no tiene atributo lang
Sin indicación de idioma, el lector de pantalla no puede elegir con seguridad la voz y la pronunciación de la página; el texto puede leerse entonces con las reglas de pronunciación de otro idioma.
Ubicación
<html>Línea 2 del código fuente entregado de https://musterladen.example/warenkorb
Páginas afectadas
- https://musterladen.example/warenkorb
Línea 2
Corrección
Añadir en <html> el código del idioma en que está escrita la página, p. ej. <html lang="de"> para alemán, lang="en" para inglés o lang="es" para español.
9
● Grave
WCAG 2.4.2 Título de la página · Nivel A
1 aparición
La página no tiene título
El título es lo primero que anuncia un lector de pantalla al abrir la página y da nombre a la pestaña del navegador.
Páginas afectadas
- https://musterladen.example/kontakt · falta en esta página
Corrección
Añadir en el <head>: <title>Título descriptivo de la página — Nombre de la tienda</title>.
10
● Grave
WCAG 4.1.2 Nombre, función, valor · Nivel A
1 aparición
1 iframe sin atributo title
Pueden verse afectados, por ejemplo, vídeos, mapas y campos de pago incrustados. Sin título, el lector de pantalla no puede anunciar de forma fiable qué contiene.
Ubicación
<iframe src="https://video.musterladen.example/einbettung/schneidebrett" width="560" height="315">Línea 60 del código fuente entregado de https://musterladen.example/produkt/schneidebrett-eiche
Páginas afectadas
- https://musterladen.example/produkt/schneidebrett-eiche
Línea 60
Corrección
Añadir un title en el idioma de la página que diga qué está incrustado, p. ej. <iframe title="Vídeo del producto" ...> para un vídeo, title="Mapa de ubicación" para un mapa o title="Datos de pago" para un campo de pago.
11
● Grave
WCAG 4.1.2 Nombre, función, valor · Nivel A
1 aparición
1 referencia ARIA que apunta a elementos inexistentes
Un aria-labelledby apunta a un id que no existe en la página. La referencia se ignora, así que el elemento queda sin nombre aunque el código parezca resuelto.
Ubicación
<input type="text" name="lieferhinweis" aria-labelledby="lieferhinweis-titel">Línea 51 del código fuente entregado de https://musterladen.example/kasse
Páginas afectadas
- https://musterladen.example/kasse
Línea 51
Corrección
Añadir un elemento con id="lieferhinweis-titel", o quitar la referencia y definir aria-label directamente.
12
● Crítico
WCAG 1.1.1 Contenido no textual · Nivel A
17 apariciones · en 6 de 6 páginas
Imágenes sin texto alternativo
Esta imagen no tiene texto alternativo. Según el programa y su configuración, el lector de pantalla lee entonces el nombre del archivo, solo dice «imagen» o la omite. Si la imagen transmite contenido, por ejemplo una imagen de producto, las personas ciegas se quedan sin esa información.
Ubicación
<img src="/bilder/logo.svg" width="140" height="40">Línea 17 del código fuente entregado de https://musterladen.example/
Páginas afectadas
- https://musterladen.example/
Líneas 17, 37, 38, 39
- https://musterladen.example/kategorie/kuechenhelfer
Líneas 17, 35, 36, 37, 38, 39 - https://musterladen.example/produkt/schneidebrett-eiche
Líneas 16, 33, 34, 35 - https://musterladen.example/warenkorb
Línea 16 - https://musterladen.example/kasse
Línea 17 - https://musterladen.example/kontakt
Línea 15
Corrección
Cada <img> necesita un atributo alt. Si aporta información: alt="Lo que muestra la imagen". Si es puramente decorativa: alt="" (vacío, pero presente).
13
● Moderado
WCAG 1.3.1 Información y relaciones · Nivel A
6 apariciones · en 6 de 6 páginas
Elementos no permitidos como hijos directos de una lista
HTML no permite un <div> directamente dentro de un <ul>. Según el navegador y el lector de pantalla, la lista puede anunciarse entonces de forma incorrecta o no anunciarse como lista.
Ubicación
<div class="trenner">Línea 22 del código fuente entregado de https://musterladen.example/
Páginas afectadas
- https://musterladen.example/
Línea 22
- https://musterladen.example/kategorie/kuechenhelfer
Línea 22 - https://musterladen.example/produkt/schneidebrett-eiche
Línea 21 - https://musterladen.example/warenkorb
Línea 21 - https://musterladen.example/kasse
Línea 22 - https://musterladen.example/kontakt
Línea 20
Corrección
Poner el elemento dentro del <li> al que pertenece o, si no pertenece a ninguna entrada, colocarlo antes o después de la lista. Si él mismo envuelve elementos <li>, va o bien dentro de cada <li>, p. ej. <li><a>…</a></li> en lugar de <a><li>…</li></a>, o bien alrededor de toda la lista. Un contenedor solo para el diseño, como un <div> alrededor de varias entradas, puede eliminarse.
14
● Moderado
WCAG 1.3.5 Identificar el propósito del campo · Nivel AA
4 apariciones
4 campos de entrada sin atributo autocomplete
Con autocomplete el navegador puede proponer datos como el nombre, el correo o la dirección, y las personas con limitaciones motrices o cognitivas no tienen que escribirlos carácter a carácter.
Ubicación
<input type="text" id="vorname" name="vorname">Línea 36 del código fuente entregado de https://musterladen.example/kasse
Páginas afectadas
- https://musterladen.example/kasse
Líneas 36, 37, 38, 40
Corrección
Añadir en el campo, p. ej. autocomplete="given-name".
15
● Moderado
WCAG 3.1.1 Idioma de la página · Nivel A
1 aparición
Código de idioma no válido
El código no sigue el estándar de las etiquetas de idioma (BCP 47). Que el navegador y el lector de pantalla reconozcan igualmente el idioma depende del programa. Si no lo reconocen, el efecto es el mismo que si no hubiera ninguna indicación.
Ubicación
<html lang="de_DE">Línea 2 del código fuente entregado de https://musterladen.example/kontakt
Páginas afectadas
- https://musterladen.example/kontakt
Línea 2
Corrección
Usar un código BCP 47 válido, p. ej. lang="de" o lang="de-DE".
16
● Moderado
WCAG 4.1.2 Nombre, función, valor · Nivel A
1 aparición
1 rol ARIA no válido
Un rol desconocido se ignora; el elemento conserva su significado por defecto. En <div> y <span> no queda entonces ningún rol que el lector de pantalla pueda anunciar.
Ubicación
<div class="filter" role="tablist-filter">Línea 33 del código fuente entregado de https://musterladen.example/kategorie/kuechenhelfer
Páginas afectadas
- https://musterladen.example/kategorie/kuechenhelfer
Línea 33
Corrección
Sustituir role="tablist-filter" por un rol ARIA válido, o eliminarlo.
17
● Moderado
WCAG 1.3.1 Información y relaciones · Nivel A
1 aparición
1 tabla de datos sin celdas de encabezado
Sin <th> el lector de pantalla lee las celdas sin su encabezado de columna y se pierde a qué columna pertenece cada cifra. Un ejemplo son las tablas de tallas.
Ubicación
<table>Línea 45 del código fuente entregado de https://musterladen.example/produkt/schneidebrett-eiche
Páginas afectadas
- https://musterladen.example/produkt/schneidebrett-eiche
Línea 45
Corrección
Marcar la fila de encabezado como <th scope="col"> y los encabezados de fila como <th scope="row">.
18
● Moderado
WCAG 2.5.3 Etiqueta en el nombre · Nivel A
1 aparición
1 control cuyo texto visible no está en su nombre accesible
El texto visible dice «Versandkosten» y lo que se anuncia es «Lieferbedingungen». Quien maneja la página por voz pronuncia el texto visible y no ocurre nada, porque el sistema espera otro nombre.
Ubicación
<a href="/versand" aria-label="Lieferbedingungen">Línea 43 del código fuente entregado de https://musterladen.example/produkt/schneidebrett-eiche
Páginas afectadas
- https://musterladen.example/produkt/schneidebrett-eiche
Línea 43
Corrección
Eliminar el aria-label; así el texto visible sirve de nombre. Si debe decir más, poner el texto visible al principio, p. ej. aria-label="Versandkosten, Lieferbedingungen".
19
● Moderado
WCAG 4.1.2 Nombre, función, valor · Nivel A
1 aparición
1 atributo id duplicado al que se hace referencia
Según HTML, el <label for="plz"> solo etiqueta el primer campo con este id. Otro campo con el mismo id se queda por ello sin nombre: a quien usa un lector de pantalla no se le indica de forma fiable qué debe introducir ahí.
Ubicación
<input type="text" id="plz" name="rechnung-plz" autocomplete="billing postal-code">Línea 44 del código fuente entregado de https://musterladen.example/kasse
Páginas afectadas
- https://musterladen.example/kasse
Líneas 41, 44
Corrección
Asignar cada id una sola vez y dar al otro campo su propia etiqueta, por ejemplo un <label for="…"> propio que apunte a su nuevo id. Un id único no basta: sin etiqueta propia, el campo sigue sin nombre. Afectado, entre otros: id="plz" (2 veces).
Páginas analizadas
| URL | Puntuación | Hallazgos |
|---|
| https://musterladen.example/ | 50 | 7 |
| https://musterladen.example/kategorie/kuechenhelfer | 32 | 9 |
| https://musterladen.example/produkt/schneidebrett-eiche | 30 | 11 |
| https://musterladen.example/warenkorb | 46 | 8 |
| https://musterladen.example/kasse | 43 | 10 |
| https://musterladen.example/kontakt | 46 | 9 |
Alcance del análisis: Five49 ejecuta 24 comprobaciones automatizadas basadas en reglas. Buscan fallos en 15 de los 55 criterios de conformidad de la WCAG 2.2, niveles A y AA. Un análisis automatizado puede encontrar fallos, pero no demostrar que un criterio se cumple. Por eso, los 55 criterios, también estos 15, requieren además una revisión manual con lector de pantalla, teclado y ampliación. El resultado no es una declaración de conformidad ni asesoramiento jurídico, y no asegura ningún resultado jurídico.
Informe de muestra, no es un encargo de cliente · se analizó la tienda de muestra ficticia de Five49