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

Un layout cuyo elemento <html> no tiene atributo lang, o lo tiene vacío o no válido, recibe el idioma que muestra su tienda, de modo que los lectores de pantalla pronuncien la página en el idioma correcto. Cuando el tema ya guarda el idioma propio de una página en un metacampo, por ejemplo en las páginas legales en alemán de una tienda en inglés, el layout usa ese metacampo si está definido. Sin un campo así, la receta no adivina el idioma de una página.

Un enlace «Skip to content» pasa a ser el primer elemento de cada página. Permanece oculto hasta que una persona que usa el teclado llega a él, y lleva al contenido principal, que se marca como el área principal de la página. Las áreas de navegación que aparecen en la misma página reciben nombres distintos, como «Main menu», «Footer menu» o «Breadcrumbs», y el contenido que queda fuera de todas las áreas de la página, como una barra de anuncios, pasa a ser una región con nombre. Un enlace para saltar al contenido que ya existe y no apunta a ningún sitio pasa a apuntar al contenido principal. Cuáles de estos cambios se hacen depende de lo que haya encontrado el escaneo.

Todo layout cuyo <title> falte, esté vacío o sea el mismo texto fijo en todas las páginas recibe un título construido con las variables de Shopify. Si su layout principal ya tiene un título que nombra la página, los demás layouts reciben el mismo. En caso contrario, el título contiene el título de la página, el número de página de una lista paginada y el nombre de la tienda, con la palabra «página» traducida mediante los archivos de idioma del tema.

Un encabezado que se salta un nivel, como un h4 justo después de un h2, recibe el nivel inmediatamente inferior al del encabezado anterior, en el archivo de sección donde está escrito. Cuando el tema da estilo a los encabezados según su nivel, una pequeña regla de estilo conserva el aspecto anterior del encabezado. En una página sin encabezado principal, el elemento que ya parece su título se convierte en el h1; en la página de inicio, esto se hace con la opción del propio tema de mostrar el logotipo como h1. Si una página no tiene ningún elemento así, la receta no añade ningún encabezado oculto, porque eso es una decisión de contenido.

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 acento de su tema (o en el color del texto, o en negro o blanco, cuando el tema no tiene color de acento), aclarado u oscurecido dentro del mismo matiz hasta alcanzar un contraste de al menos 3:1 con el fondo de la página. Las reglas del tema que seguirían ocultando el contorno pierden su outline: none, salvo que muestren el foco de otra manera, por ejemplo con un borde o una sombra. El contorno tiene un solo color para todo el tema, así que en las secciones con un esquema de colores oscuro puede necesitar un color más claro, algo 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 elimina de los enlaces, los botones, los campos de formulario y otros elementos que de todos modos pueden recibir el foco, 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 plantilla del tema queda en manos de una persona. La receta también se ocupa de los hallazgos de la comprobación del orden del foco vs-focus-order que tratan de un tabindex mayor que 0; el resto de esa comprobación sigue siendo MANUAL.

Los elementos clicables construidos con <div> o <span> que solo funcionan con el ratón, como los puntos de un carrusel o las opciones de un banner de cookies, se convierten en elementos <button> de verdad. Se conservan todas las clases y atributos, de modo que el script del tema sigue funcionando, y ahora Enter y la barra espaciadora hacen lo que hace un clic. Un botón sin nombre recibe uno a partir de su finalidad, por ejemplo «Load slide 2 of 3», y un pequeño restablecimiento de estilos conserva su aspecto. Un elemento al que no responde ningún script, o cuya finalidad no está clara, se deja como está.

La receta elimina user-scalable=no y cualquier maximum-scale inferior a 5 de las etiquetas viewport de los archivos Liquid del tema, de modo que los visitantes puedan ampliar su tienda con el gesto de pellizco hasta el 500 %. Los demás ajustes del viewport quedan exactamente como estaban. Un límite de zoom que establece el código de plantilla del tema queda en manos de una persona.

Los controles que el escaneo encontró demasiado pequeños, como los iconos de la cabecera, las muestras de color o los botones de cantidad, reciben un tamaño mínimo de 24 × 24 píxeles mediante una regla de la hoja de estilos principal que los selecciona por su clase. Los iconos que contienen conservan su tamaño. Un enlace u otro elemento que el tema deja en línea pasa a inline-flex con su icono centrado, porque los elementos en línea ignoran el tamaño mínimo.

Cuando un texto no supera la comprobación de contraste y su color está definido en un solo lugar, ese color pasa al tono más próximo del mismo matiz, más claro o más oscuro, que alcanza el contraste exigido sobre todos los fondos que el escaneo registró para él. Ese lugar puede ser la regla de la hoja de estilos que da estilo al texto, o una variable CSS o un ajuste de color de config/settings_data.json que ninguna otra parte del tema utiliza. Un color calculado en Liquid o definido más de una vez queda en manos de una persona, y lo mismo ocurre con un color compartido, porque cambiarlo afectaría a pares de colores que el escaneo no midió.

Cuando el dispositivo de un visitante está configurado para reducir el movimiento, un bloque al final de la hoja de estilos principal hace que cada animación CSS se ejecute una sola vez, durante un tiempo demasiado breve para verse, acorta las transiciones y desactiva el desplazamiento suave. Cuando es el script del tema el que inicia el avance automático de un carrusel, ese inicio se omite para esos visitantes. Esta receta no modifica el movimiento que controla un script de terceros.

Un carrusel que se mueve por sí solo recibe, entre sus controles, un botón visible, con el texto traducido, para ponerlo en pausa y reanudarlo; el botón solo se muestra cuando el avance automático está activado. Un script breve en el archivo de script principal del tema conecta el botón con el avance automático del propio carrusel: el carrusel de Dawn, Swiper, Slick, Flickity, Splide o una animación CSS. Para los visitantes cuyo dispositivo pide reducir el movimiento, el carrusel empieza en pausa.

Los elementos <blink> y <marquee> del tema 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 enlace. Se eliminan los ajustes de desplazamiento del marquee, 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 hace un vídeo de fondo, y el filtro video_tag de Shopify recibe muted: true. El audio que empieza por sí solo deja de hacerlo. Los reproductores incrustados de YouTube y Vimeo quedan en manos de una persona. En un escaneo de Validiscan, el sonido que empieza por sí solo lo notifica la comprobación de contenido multimedia vs-media, que sustituye a la regla de axe-core que esta receta cubre. vs-media tiene el nivel MANUAL, y en Shopify esta receta no se usa para sus hallazgos.

Cuando el texto de la etiqueta de un campo de formulario ya está visible en la página pero no está conectado con el campo, la receta los conecta: un <label> situado junto al campo recibe un for que apunta a él, o un texto justo antes del campo, como el nombre de una opción de talla o de color, pasa a ser su etiqueta mediante aria-labelledby, de modo que el diseño no cambia. 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 de dirección, de cuenta, de inicio de sesión y de contacto que el escaneo marcó reciben el valor de autocomplete correspondiente a lo que piden, como correo electrónico, nombre y apellidos, calle y número, código postal, país, número de teléfono o contraseña. El valor se deduce del tipo, el nombre, la etiqueta y el placeholder del campo. Cuando un snippet imprime sus campos a partir de parámetros, los campos imprimen un parámetro autocomplete, y cada llamada render del snippet le pasa el valor que corresponde a sus propios argumentos. Así, los navegadores pueden rellenar los campos y los productos de apoyo pueden saber para qué sirve cada uno. Un campo cuya finalidad el código no muestra se deja como está.

La parte de una página que el script del tema reescribe cuando un cliente elige otra variante o cambia una cantidad, como el precio, el aviso de existencias o el subtotal del carrito, se marca como región de estado. Los lectores de pantalla anuncian entonces el valor nuevo sin que el cliente tenga que moverse hasta allí. El propio script del tema no se modifica. Un área que también contiene botones o enlaces, que se leerían en voz alta con ella, se deja como está.

Los botones y enlaces que muestran solo un icono, como los de búsqueda, carrito, cuenta, las flechas de un carrusel, los botones de cantidad y las opciones de cookies, reciben un nombre que dice qué hacen, cuando el código muestra su finalidad. El nombre es un texto oculto visualmente dentro del control, o un aria-label cuando el tema no tiene una clase para texto oculto. Un enlace con el logotipo cuya imagen no tiene alternativa textual recibe el nombre de su tienda. Un control cuyo nombre tendría que salir de su propio contenido queda en manos de una persona.

Una imagen se marca como decorativa solo cuando el código demuestra que no aporta nada: está dentro de un enlace o un botón que tiene su propio texto, es un icono junto a su propia etiqueta de texto, o es un espaciador o un separador. Un <img> recibe entonces un alt="" vacío, y un icono SVG recibe aria-hidden="true", de modo que los lectores de pantalla lo omiten en lugar de leer en voz alta un nombre de archivo o la palabra «imagen». Todas las demás imágenes son contenido, y su alternativa textual queda 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 que dice qué muestra. La receta lo toma de la dirección de origen o del contenido del marco. Un marco cuyo contenido el código no muestra no recibe ningún título genérico; queda en manos de una persona.