Correcciones de accesibilidad en el código de su tema de Shopware

El elemento <html> del layout base del storefront recibe un atributo lang válido, para que los lectores de pantalla pronuncien la página en el idioma correcto. Donde falta el atributo, la receta añade el código del idioma activo de la tienda, por ejemplo de-DE, el valor que imprime la propia plantilla base de Shopware. Cuando el tema imprime un código de configuración regional como en_GB, que no es una etiqueta de idioma válida, la plantilla lo convierte ahora en en-GB. Una página cuyo contenido está escrito en un idioma distinto del de la tienda, como un texto legal en alemán en una tienda en inglés, queda en sus manos: el idioma de ese contenido se define en la Administración o se marca en el propio texto.

Según lo que haya encontrado el escaneo, la receta añade un enlace para saltar al contenido, marca el contenido principal o da nombre a las áreas de navegación. El enlace para saltar al contenido pasa a ser el primer elemento al que llega quien navega con el teclado en cada página. Permanece oculto hasta que recibe el foco y lleva al contenido principal. Cuando ninguna plantilla marca el contenido principal como <main>, el área de contenido del layout base pasa a ser el área <main> de la página. El texto del enlace es el snippet general.skipToContent, que en inglés dice «Skip to main content». Un enlace para saltar al contenido que ya existe pasa a apuntar al contenido principal. Las áreas de navegación sin nombre reciben uno, tomado de su encabezado o de su finalidad, como «Main navigation», «Service navigation» o «Breadcrumb». Un área de navegación cuya finalidad no está clara, o que compartiría su nombre con otra, queda en manos de una persona.

Cuando el layout del tema escribe en el <title> solo el metatítulo de la página, las categorías y las páginas CMS sin metatítulo reciben un título vacío. La receta conserva el título propio del tema y le da un valor alternativo: el nombre de la tienda, tomado de donde el tema ya lo imprime o, si no lo imprime, del nombre de la tienda en los ajustes básicos de Shopware. Así ninguna página queda con un título vacío. Un título que es solo el nombre de la tienda sigue sin decir qué es la página, de modo que esas páginas necesitan un metatítulo en la Administración. Los títulos que ya tienen un valor alternativo o un texto fijo se dejan como están.

Un encabezado que se salta un nivel, como un h3 justo después de un h1, sube al nivel siguiente, y los demás encabezados de la misma plantilla que están en ese nivel o en uno más profundo suben con él, de modo que el esquema propio de la plantilla se mantiene. Cuando la plantilla define la etiqueta del encabezado en una variable, se cambia la variable. Las clases se conservan y, cuando ninguna clase fija el tamaño, una clase de encabezado de Bootstrap mantiene el aspecto anterior. En una página sin encabezado principal, el elemento que ya la titula en su propia plantilla pasa a ser el h1, con su aspecto conservado. Si una página no tiene un elemento así, la receta no añade ningún encabezado, porque un encabezado nuevo requiere redactar su texto.

La hoja de estilos principal recibe un contorno para el foco del teclado: de 2 píxeles, continuo, a 2 píxeles del elemento, en el color de marca del tema. Cuando ese color es demasiado claro, se usa el tono más próximo del mismo matiz que tenga un contraste de al menos 3:1 con el fondo de la página. Las reglas del tema que quitan el contorno al recibir el foco se aplican ahora solo al foco por ratón: un clic mantiene el aspecto del tema y el foco del teclado muestra el contorno. Las reglas que muestran el foco de otra manera se conservan. En las zonas oscuras, como una barra superior, el contorno puede necesitar un color más claro, que su desarrollador comprueba en la vista previa.

Un tabindex mayor que 0 lleva un elemento al principio del orden del teclado. La receta lo quita de los enlaces, los botones, los campos de formulario y otros elementos que reciben el foco de todos modos, y lo pone a 0 en los demás elementos, de modo que siguen siendo alcanzables y la tecla Tab recorre la página en su orden. Un tabindex que escribe el código de la plantilla queda en manos de una persona. Un escaneo informa dos veces de ese orden forzado: mediante la regla tabindex de axe-core, cuyos hallazgos reciben este cambio, y mediante la comprobación vs-focus-order de Validiscan, cuyo nivel es MANUAL, por lo que sus hallazgos vienen con orientación.

La receta quita user-scalable=no y cualquier maximum-scale inferior a 2 de la etiqueta viewport de las plantillas del storefront, normalmente en layout/meta.html.twig, para que los visitantes puedan ampliar el texto al menos hasta un 200 % en el móvil. Para la regla de buenas prácticas meta-viewport-large el límite es 5. Los demás ajustes del viewport se mantienen como estaban. Si el bloqueo se puso para impedir que iOS haga zoom en los campos de formulario, un tamaño de fuente de al menos 16 píxeles en los campos lo consigue sin bloquear el zoom.

Los botones y enlaces que el escaneo encontró con un tamaño inferior a 24 × 24 píxeles, como los iconos de la cabecera, los botones de cantidad o las muestras de color, reciben un tamaño mínimo de 24 × 24 píxeles. El mínimo se añade a la propia regla de estilo del tema que hizo pequeño el control, junto a la declaración que lo redujo, de modo que el orden de los estilos del tema no cambia y los iconos del interior mantienen su tamaño. Un control que es pequeño sin una regla así recibe un tamaño mínimo para su clase en la hoja de estilos principal. Un control que la receta no puede identificar por su clase queda en manos de una persona.

Cuando el dispositivo del visitante está configurado para reducir el movimiento, un bloque de la hoja de estilos principal hace que las animaciones y las transiciones terminen de inmediato y desactiva el desplazamiento suave. El bloque se aplica a todos los elementos de la página, por lo que también cubre las animaciones que definen otras hojas de estilos, incluidas las de los plugins. Si el script de storefront del tema inicia un temporizador, como el avance automático de un carrusel, únicamente cuando hay una opción de avance automático activada, esa condición comprueba ahora también el ajuste del visitante. El resto del movimiento que inicia un script se enumera para quien revisa, y no se adivina.

El carrusel base de Shopware, el que hay detrás del carrusel de imágenes del CMS, recibe un botón visible y traducido para ponerlo en pausa y reanudarlo, junto a sus flechas de anterior y siguiente. Un bloque de código del script de storefront del tema conecta el botón con el avance automático del carrusel mediante el plugin de carrusel propio de Shopware. Cuando el tema ejecuta el avance automático con su propio temporizador, ese temporizador recibe una línea que omite un paso mientras el carrusel está en pausa. El botón permanece oculto hasta que el script lo ha conectado, de modo que nunca aparece sin un avance automático que poner en pausa. Para los visitantes cuyo dispositivo pide reducir el movimiento, el carrusel empieza en pausa. Los carruseles creados con otras bibliotecas quedan en manos de una persona.

Los elementos <blink> y <marquee> de las plantillas Twig pasan a ser elementos estáticos con el mismo contenido, las mismas clases y los mismos ids: un <span> para blink, un <div> para marquee o un <span> cuando el marquee está dentro de un párrafo o de un elemento de texto similar. Los ajustes de desplazamiento del marquee se eliminan, de modo que ningún texto se mueve por sí solo.

Un vídeo que se reproduce por sí solo recibe muted y playsinline, de modo que sigue reproduciéndose en silencio, como un vídeo de fondo, y en Safari en los móviles se reproduce dentro de la página en lugar de abrir el reproductor a pantalla completa. El audio que empieza por sí solo deja de hacerlo; los visitantes lo inician por su cuenta. La reproducción automática que establecen el código de una plantilla o un script, y los reproductores incrustados en marcos, quedan en manos de una persona. En un escaneo de Validiscan, el sonido que empieza por sí solo lo notifica la comprobación multimedia vs-media, que sustituye a la regla no-autoplay-audio de axe-core. vs-media, que también cubre los subtítulos y las transcripciones, es MANUAL, así que en Shopware un hallazgo así viene con orientación en lugar de con este cambio.

Un campo de formulario cuyo texto de etiqueta ya está en la página, justo antes del campo, se conecta con ese texto. Un <label> sin for recibe uno que apunta al campo. Un elemento de texto que el tema marca como título o etiqueta por su clase, como el nombre de un grupo de variantes en una página de producto, pasa a ser el <label> del campo, con sus clases y su propia línea. Los lectores de pantalla leen entonces la etiqueta cuando el campo recibe el foco. Un campo que solo tiene un placeholder queda en manos de una persona, porque redactar una etiqueta es una decisión de contenido.

Los campos que piden datos propios del cliente, como los de los formularios de registro, dirección, inicio de sesión, contacto y boletín informativo, reciben el valor de autocomplete correspondiente a lo que piden, como correo electrónico, nombre y apellidos, código postal, número de teléfono o contraseña. El valor se deduce del tipo, el nombre, el id, la etiqueta y el placeholder del campo. Las contraseñas reciben new-password en los formularios de registro y current-password en los demás. Los campos de búsqueda, de cupón, de cantidad, de captcha y de mensaje se dejan como están, y un valor que escribe el código de una plantilla queda en manos de una persona. Así, los navegadores pueden rellenar los campos y los productos de apoyo pueden saber para qué sirve cada uno.

Las partes de una página que el script del storefront actualiza en el mismo sitio, como el precio después de que un cliente elija una variante, la disponibilidad o los totales del carrito, pasan a ser regiones dinámicas de tipo polite. Los lectores de pantalla leen entonces el valor nuevo una vez, completo y sin interrumpir. Cuando un script sustituye el propio elemento en lugar de su contenido, una región dinámica no funcionaría, así que la receta deja ese elemento en manos de una persona.

Un marco incrustado sin título, como un mapa o un vídeo de YouTube o de Vimeo, recibe un título traducido, tomado de los archivos de snippets del tema, que dice qué muestra. La receta lee lo que muestra el marco a partir de su dirección, de su clase y su nombre, o de la plantilla que lo rodea. Un marco cuyo contenido no revela el código no recibe ningún título de la receta, porque un título inventado es peor que ninguno.

Cuando un texto no supera la comprobación de contraste y su color está definido en un solo lugar del tema, ese lugar pasa al tono más próximo del mismo matiz que alcanza el contraste requerido, de modo que el diseño sigue siendo reconocible. Un solo lugar puede ser un campo de color de theme.json junto con la variable SCSS que lo repite, una variable SCSS o una propiedad personalizada de CSS que se usa solo para texto, o una única declaración color. Un color que se usa en varios lugares o también como fondo o borde, y los campos de color básicos de Shopware para la marca, los bordes, los fondos, los mensajes de estado y el botón de compra, quedan en manos de una persona. Un color guardado en los ajustes del tema de la Administración prevalece sobre theme.json: si se cambió allí, también hay que cambiarlo allí. La regla color-contrast tiene el nivel ASSISTED, así que en un proyecto un hallazgo de contraste sigue la vía ASSISTED y esta receta no se le aplica.

Una imagen se marca como decorativa solo cuando la plantilla demuestra que no aporta nada: está dentro de un enlace o un botón que ya tiene nombre por otra vía, es un icono junto a su propia etiqueta de texto, o es un espaciador o un separador. Un <img> recibe un alt vacío, una imagen que imprime la etiqueta sw_thumbnails de Shopware recibe un alt vacío en sus atributos y los iconos SVG reciben aria-hidden="true", de modo que los lectores de pantalla los omiten en lugar de leer en voz alta el nombre de un archivo. Cualquier otra imagen es contenido, como los logotipos de los medios de pago del pie de página, y su alternativa textual necesita palabras que elige una persona. Las reglas que cubre esta receta tienen el nivel ASSISTED, así que en un proyecto sus hallazgos siguen la vía ASSISTED y esta receta no se les aplica.

Los elementos <div>, <span>, <i> y <li> de carruseles y banners de cookies en los que se puede hacer clic, y los enlaces sin dirección, pasan a ser botones de verdad cuando solo reaccionan al ratón. Las clases, los atributos data y los ids se conservan, de modo que el script del tema los encuentra como antes, y Enter y la barra espaciadora hacen ahora lo que hace un clic. Un elemento de lista conserva su lugar en la lista y recibe el botón en su interior. Un control sin texto recibe un nombre traducido según su finalidad, como «Show slide 2», y un breve restablecimiento de estilos mantiene su aspecto. Un control sin texto cuya finalidad no está clara, o cuyo estilo depende de su etiqueta o de su posición, queda en manos de una persona. En un proyecto, esta receta se prueba en los hallazgos de carrusel de vs-carousel; los hallazgos de la comprobación del banner de cookies vs-cookie-banner tienen el nivel ASSISTED y siguen la vía ASSISTED.

Los botones y enlaces que solo muestran un icono, como la búsqueda, el carrito, la cuenta, el enlace del logotipo, las flechas del carrusel, los botones de cantidad y las opciones de cookies, reciben un aria-label traducido que dice qué hacen. La finalidad se deduce de las clases del control, del destino de su enlace, del icono que contiene y del componente que lo rodea. Un control cuya finalidad no revela el código, como un enlace a una red social cuya red se guarda como dato, queda en manos de una persona, porque un nombre inventado es peor que ninguno. En un proyecto, esta receta se prueba en los controles de carrusel que notifica vs-carousel; los demás controles que solo tienen un icono los notifican reglas de nivel ASSISTED y siguen la vía ASSISTED.