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

Magento establece el idioma de una página a partir de la configuración regional de su vista de tienda, por ejemplo en para la configuración regional en_US, y lo imprime mediante su plantilla raíz. Cuando su tema sobrescribe esa plantilla e imprime su propio lang, normalmente el código de configuración regional en_US, que no es una etiqueta de idioma válida, o ningún lang, la plantilla vuelve a imprimir los atributos propios de Magento, de modo que cada página recibe un lang válido. Un lang establecido en el XML de layout con la forma de la configuración regional, como de_DE, pasa a ser de-DE. Una página cuyo contenido está en un idioma distinto del de su vista de tienda, como una página legal en alemán en una tienda en inglés, queda en sus manos: sírvala desde una vista de tienda en ese idioma, o marque el idioma en el propio contenido.

El tema Luma de Magento tiene un enlace «Skip to Content» en la parte superior de cada página que lleva al comienzo del contenido principal, y ese contenido es el área <main> de la página. Un tema puede perder ambos. Cuando el tema ha quitado el enlace en su XML de layout, la receta deshace esa eliminación. Cuando la plantilla de cabecera del propio tema nunca imprime el enlace, la receta lo añade allí con las clases de Luma; si las hojas de estilos del tema lo dejaran sin estilo, la receta añade estilos que lo mantienen oculto hasta que recibe el foco del teclado. Cuando el XML de layout renderiza el contenido principal como otro elemento, como un <div>, vuelve a ser <main>. Las áreas de navegación sin nombre reciben uno que dice qué contienen, como «Main menu», «Footer links» o «Breadcrumbs»; un área cuya finalidad no muestra el código, o que compartiría su nombre con otra, queda en manos de una persona. El contenido que está fuera de la cabecera, del área principal y del pie de página, como una barra de promociones, no se mueve: moverlo es un cambio en su layout que hace su desarrollador en el XML de layout.

Magento da a cada página un título propio, como el nombre del producto o de la categoría, o «Search results for:» y el término de búsqueda, con el prefijo o el sufijo definidos para su tienda. Un tema puede sobrescribirlo con un <title> vacío en el XML de layout, y entonces la página se queda sin título. La receta elimina esos títulos vacíos, de modo que vuelve a aplicarse el título propio de Magento. Los títulos con texto son redacción suya y se dejan como están. Si ningún archivo de layout del tema vacía el título, la receta no cambia nada: el título procede entonces de la propia página y de los ajustes de HTML Head de Magento Admin.

Un encabezado que se salta un nivel, como un h4 justo después de un h2, sube al nivel siguiente, y los encabezados que lo siguen en la misma plantilla, en su nivel o en uno más profundo, suben con él. Las clases se conservan, así que los estilos que el tema define por clase siguen aplicándose; su desarrollador comprueba los estilos que el tema define por la etiqueta del encabezado. Cuando el nivel del encabezado anterior no se puede leer ni en el escaneo ni en la misma plantilla, el encabezado queda en manos de una persona. Magento imprime el título de cada página como su h1. Un tema que oculta el título de una página con display: none elimina el único h1 de la página, así que la receta lo oculta solo visualmente, como ocultan el texto los propios estilos de Magento, y el h1 permanece en el esquema que usan los lectores de pantalla. Un título eliminado en el XML de layout queda en manos de una persona, porque restituirlo cambiaría el aspecto de la página.

La hoja de estilos del tema 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. El color procede de una variable de color de marca o primario; si no la hay, del botón primario y, en su defecto, del color de los enlaces, y se ajusta hasta que tiene un contraste de al menos 3:1 con el fondo de la página. Las zonas con un fondo propio, como una barra superior oscura, reciben un color de contorno que tiene ese contraste allí. Las reglas del tema que quitan el contorno de los enlaces, los botones y otros controles al recibir el foco se eliminan, salvo que muestren el foco de otra manera, como un borde o una sombra.

Un tabindex mayor que 0 lleva un elemento al principio del orden del teclado. Estos valores solo funcionan en relación unos con otros en toda la página, así que, una vez que se demuestra que un elemento notificado lleva uno en las plantillas del tema, la receta elimina todo tabindex positivo fijo de las plantillas del tema, también en elementos que el hallazgo no enumeraba. Los enlaces, los botones y los campos de formulario pierden el atributo; los demás elementos reciben tabindex="0", de modo que siguen siendo alcanzables y la tecla Tab recorre la página en su orden. Un tabindex que calcula el código PHP queda en manos de una persona. La comprobación vs-focus-order de Validiscan también notifica el foco que salta por la página por otros motivos, como un contenido que sus estilos colocan en otro lugar; es MANUAL, así que sus hallazgos vienen con orientación, no con este cambio.

La receta elimina user-scalable=no y cualquier maximum-scale inferior a 2 de la etiqueta viewport en el XML de layout del tema, como default_head_blocks.xml, donde Luma la declara, o en sus plantillas, para que los visitantes puedan hacer zoom en la página 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. Un valor de viewport que calcula el código PHP se enumera para que lo compruebe su desarrollador. Si la etiqueta que bloquea el zoom no procede del tema, por ejemplo de los ajustes de HTML Head de Magento Admin o de un módulo, la receta no cambia nada.

Los botones y enlaces que el escaneo encontró demasiado pequeños, como los iconos de redes sociales o los botones de cantidad, reciben un tamaño mínimo de 24 × 24 píxeles en un bloque al final de la hoja de estilos del tema. El bloque reutiliza los selectores con los que el tema los hizo pequeños, o sus propias clases, y establece un ancho y un alto mínimos, que prevalecen sobre un ancho o un alto menores. Los iconos del interior y la maquetación que los rodea se mantienen como están. Un enlace u otro elemento en línea sin una regla display pasa a inline-flex, porque los elementos en línea ignoran un tamaño mínimo. Un control sin una clase a la que pueda dirigirse la hoja de estilos queda en manos de una persona.

Cuando el dispositivo del visitante está configurado para reducir el movimiento, un bloque al final de cada hoja de estilos del tema desactiva las animaciones, las transiciones de 5 segundos o más y el desplazamiento suave que inicia esa hoja de estilos, selector por selector. Cuando los propios scripts del tema en web/js inician un carrusel con el avance automático activado, el carrusel empieza sin avance automático para esos visitantes. Una regla anidada dentro de otra regla LESS se enumera para su desarrollador. Las animaciones del código propio de Magento o de las extensiones no están en los archivos del tema y necesitan su propia protección.

En Magento esta receta no añade ningún botón de pausa. El carrusel de Page Builder funciona con los propios scripts de Magento, y un tema no puede darle un botón de pausa sin sobrescribir el código de Magento. La receta usa en su lugar el ajuste del propio carrusel: en todos los carruseles de Page Builder de los archivos del tema que avanzan automáticamente, el avance automático se desactiva, como hace el interruptor «Autoplay» de Page Builder, y se activan las flechas cuando el carrusel no tendría de otro modo ninguna forma de pasar de una diapositiva a otra. Las animaciones CSS infinitas que mueven un carrusel por sí solas se eliminan. Las diapositivas solo cambian entonces cuando el visitante usa los puntos o las flechas: nada se mueve por sí solo, así que no hay nada que poner en pausa. Un carrusel almacenado en la base de datos de Magento no es un archivo del tema: usted desactiva su avance automático con el ajuste «Autoplay» de Page Builder. Un carrusel que los propios scripts del tema inician con avance automático, como uno de Slick o de Swiper, necesita un botón de pausa conectado a ese script, y eso queda en manos de una persona.

Los elementos <blink> y <marquee> de las plantillas del tema pasan a ser elementos estáticos con el mismo contenido, las mismas clases y los mismos ids: un <span> para blink y un <div> para marquee. Los atributos propios del marquee, como su velocidad y su dirección de desplazamiento, se eliminan, y también el estilo text-decoration: blink de las hojas de estilos del tema, de modo que ningún texto se mueve ni parpadea por sí solo.

Un vídeo de las plantillas del tema que se reproduce por sí solo recibe muted y playsinline, de modo que sigue reproduciéndose en silencio y dentro de la página en los móviles. El audio deja de empezar por sí solo. Los reproductores incrustados de YouTube y Vimeo que empiezan por sí solos pasan a empezar sin sonido. La reproducción automática que activa el código PHP queda 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 de axe-core que cubre esta receta. vs-media, que también cubre los subtítulos y las transcripciones, es MANUAL, así que en Magento 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, antes del campo, se conecta con ese texto. Un <label> sin for recibe uno que apunta al campo. Un texto de etiqueta en un <span> o un <strong>, como un texto «Sort By» con la clase sorter-label de Luma junto al menú de ordenación de una página de categoría, pasa a ser un <label> con las mismas clases. Un texto de etiqueta en un elemento de bloque, como <div class="label">, conserva su elemento HTML y se conecta mediante aria-labelledby. El texto debe estar en un contenedor sin ningún otro campo, de modo que no pueda pertenecer a otro. 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 las plantillas del tema que piden datos propios del cliente, en los formularios de dirección, cuenta, inicio de sesión, contacto y boletín informativo, reciben el valor de autocomplete correspondiente a lo que piden, como correo electrónico, nombre, número de teléfono, dirección de la calle, código postal o contraseña. El valor se deduce del tipo, el nombre, el id, la etiqueta, el placeholder y el título del campo, con las mismas reglas que la comprobación de formularios de Validiscan, y los campos de facturación y de envío reciben su sección, como en shipping given-name. Cuando se notifica un campo de un formulario, se tratan todos los campos de ese formulario. Las contraseñas reciben new-password en los formularios de registro y de restablecimiento y en los formularios con más de un campo de contraseña, y current-password en los demás. Los campos de cupón, búsqueda, destinatario de un regalo, comentario, cantidad y CAPTCHA nunca reciben un valor. Un valor que escribe el código de la plantilla, o un valor válido que parece erróneo para el campo, queda en manos de una persona.

Los propios scripts de Magento reescriben el texto de contenedores fijos cuando un cliente elige una talla o un color, o añade un producto al carrito. La receta convierte esos contenedores de las plantillas del tema en regiones dinámicas, de modo que los lectores de pantalla leen el valor nuevo sin que el cliente tenga que moverse hasta allí. El bloque de precio y el contador del minicarrito se leen completos cuando cambian; el mensaje de existencias y los mensajes de la página, como el aviso de que se ha añadido un producto al carrito, reciben role="status". Los scripts en sí no se modifican. Cuando el tema marca toda la página como región dinámica, lo que hace que los lectores de pantalla lean en voz alta cada cambio, esa marca se elimina. Cuando esa marca la añade el script de una extensión mientras la página se ejecuta, queda en manos de una persona.

Un marco incrustado sin título, como un mapa, un vídeo de YouTube o de Vimeo, un calendario, un formulario o un widget de reseñas, recibe un título traducible que dice qué muestra. La receta lee lo que muestra el marco a partir de su dirección, incluidas las partes fijas de una dirección que construye el código PHP, y de sus clases, su id y su nombre. Un marco cuyo contenido no revela el código no recibe ningún título de la receta y queda en manos de una persona.

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 color más próximo del mismo matiz que alcanza el contraste requerido sobre todos los fondos que el escaneo midió para él. Un solo lugar puede ser una variable LESS o una propiedad personalizada de CSS que se usa solo para el color del texto, o una única regla color. Cuando el tema incluye un styles-m.css compilado, recibe el mismo cambio. Un color que se usa en varios lugares, también como fondo o borde, o en reglas cuyo fondo el escaneo no midió, queda en manos de una persona.

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 texto o un nombre, como un recuadro de promoción con su propio encabezado; es un icono, de 48 píxeles como máximo o con una clase o un nombre de archivo de 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 el nombre de un archivo. Cualquier otra imagen se trata como contenido, y su alternativa textual necesita palabras que elige una persona.

Los elementos <div> y <span> en los que se puede hacer clic, en carruseles y banners de cookies, pasan a ser botones de verdad. La receta considera que un elemento es un control solo cuando el código lo dice: tiene role="button", un manejador de clics o un binding de clic de Knockout, o una clase o un atributo data que el script del tema selecciona para gestionar los clics. Las clases, los atributos data y los atributos ARIA se conservan, de modo que los estilos y los scripts del tema encuentran el control como antes, y Enter y la barra espaciadora hacen ahora lo que hace un clic. Un breve restablecimiento de estilos al final de la hoja de estilos del tema mantiene su aspecto, también al pasar el ratón y al recibir el foco, y los contornos de foco no se tocan. Un control que contiene bloques, enlaces o campos, o que no tiene clase, queda en manos de una persona.

Los botones y enlaces que solo muestran un icono, como los de búsqueda, minicarrito, cuenta, lista de deseos, comparar, menú, cerrar, anterior y siguiente, y las opciones de un banner de cookies, reciben un aria-label que dice qué hacen, con la redacción del tema Luma de Magento cuando Luma tiene una, como «Search», «My Cart» o «Allow Cookies». La finalidad se deduce de las clases, el id, los atributos data y el destino del enlace del control, de su icono y del formulario o el banner de cookies que lo rodea. Un control cuya finalidad no revela el código, como un enlace a una red social construido en un bucle a partir de una dirección guardada como dato, o un enlace cuyo único contenido es la foto de un producto, queda en manos de una persona, porque su nombre depende del contenido de su tienda.