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

La receta hace que el elemento <html> de las plantillas de cabecera tome su idioma de language_attributes() de WordPress, que imprime el idioma del sitio, o el idioma que establece un plugin multilingüe, para que los lectores de pantalla pronuncien bien la página. A una plantilla de cabecera que omite el idioma se le añade la llamada, y un valor lang fijo que no es válido se sustituye por ella. Si el valor erróneo procede del ajuste «Idioma del sitio» (Site Language) de la administración de WordPress, la receta no cambia nada, porque eso es un ajuste y no código del tema. Cuando el tema ya lee un campo de idioma para cada página, por ejemplo para las páginas legales en alemán de una tienda en inglés, un filtro en functions.php declara el idioma de esa página, y la cabecera y el pie del sitio conservan el idioma de la tienda. Sin un campo así, la receta no adivina el idioma.

Cada plantilla de cabecera sin enlace para saltar al contenido recibe un enlace «Skip to content» justo después de la etiqueta <body> de apertura, o después de la llamada a wp_body_open() que la sigue. Permanece oculto hasta que recibe el foco y lleva al contenido de la página. Si su tema es un tema hijo de Storefront y ha desactivado los enlaces para saltar al contenido de Storefront, se vuelven a activar en lugar de añadir uno nuevo. Donde las plantillas todavía no tienen un área principal, el contenedor de contenido de las plantillas de página, un <div> con el id main o con la clase site-main, pasa a ser un elemento <main>, que lo marca como el área principal de la página; cuando los estilos o los scripts del tema seleccionan ese contenedor como div, se deja como está. Las áreas de navegación cuya finalidad se ve en su id o en su clase reciben un nombre, como «Primary navigation», «Breadcrumb», «Footer navigation» o «Pagination». Un enlace para saltar al contenido que ya existe y no apunta a ningún sitio pasa a apuntar al contenido. El texto del enlace y los nombres se añaden en inglés.

WordPress genera por sí mismo el título de una página, a partir del nombre de la página o del producto, el número de página de una lista paginada y el nombre de la tienda. La receta repara lo que, en el tema, impide que ese título aparezca. Un filtro de título que devuelve un título personalizado, por ejemplo desde un campo de SEO, recurre al título generado cuando el campo está vacío. Un texto de <title> fijo en una plantilla de cabecera se sustituye por el título que genera WordPress. En un tema que no es un tema hijo y no imprime ningún título, se activa en functions.php la compatibilidad de WordPress con los títulos. Cuando el título procede de un plugin de SEO o de los ajustes propios de una página, la receta no cambia nada.

Un encabezado que se salta un nivel, como un h4 justo después de un h2, recibe el nivel siguiente al del encabezado anterior, en la plantilla o en la cadena PHP que lo imprime. Los títulos de los widgets y los encabezados del pie de página o de una barra lateral pasan a h2. Cuando el salto procede de una plantilla de WooCommerce que se muestra justo después del título de la página, como «Billing details» y «Shipping details» en el proceso de pago, los encabezados del mismo nivel de las plantillas vecinas se mueven con él. Solo cambia el nivel: cada encabezado conserva sus clases, y un encabezado que los estilos o los scripts del tema seleccionan por su nivel se deja como está. Un encabezado sin clase adopta el aspecto que el tema da a su nuevo nivel. En una página sin encabezado principal, el elemento que ya tiene el aspecto de su título, con una clase de título fijada en al menos 24 píxeles, se convierte en el h1. Si una página no tiene ningún elemento así, la receta no añade ningún encabezado y lo deja en manos de una persona.

La hoja de estilos principal del tema recibe un contorno para el foco del teclado: de 2 píxeles, continuo, a 2 píxeles del elemento, en un color que el tema ya usa. Es una variable de color cuyo nombre indica focus, accent, brand, primary o link, o bien el color de los enlaces o del texto del cuerpo. Se usa el primero de ellos que tenga un contraste de al menos 3:1 con el fondo de la página; si ninguno lo tiene, el primero se aclara o se oscurece sin salir del mismo matiz hasta que lo alcanza. En las zonas oscuras con texto claro, como una barra superior oscura, el contorno toma el color del texto claro. Un outline: none en el foco que no deja nada en su lugar se elimina de las reglas del tema; las reglas que ocultan el contorno solo en los clics del ratón se mantienen. Un tema que ya tiene un contorno de foco visible, y ninguna regla que lo oculte, se deja como está.

Un tabindex mayor que 0 lleva un elemento al principio del orden del teclado. La receta lo elimina de los enlaces, los botones y los campos de formulario, que pueden recibir 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. Solo se cambia la etiqueta de la plantilla que genera el elemento notificado. Un tabindex que imprime el código PHP o que establece un script queda en manos de una persona.

Dentro de un banner de cookies o de un carrusel que forma parte de su tema, los elementos <span>, <div>, <li> o <i> en los que se hace clic pero que solo funcionan con el ratón pasan a ser elementos <button> de verdad. Se conservan todas las clases y atributos, de modo que los estilos y los scripts del tema siguen funcionando, y ahora Enter y la barra espaciadora hacen lo que hace un clic. Un breve restablecimiento de estilos para exactamente esas clases mantiene su aspecto. Un botón que solo muestra un icono en el mismo banner o carrusel recibe un nombre en inglés, como se describe más abajo en los nombres de iconos. Un elemento al que no responde ningún script, uno que el tema estiliza o controla por el nombre de su etiqueta, o uno vacío cuya finalidad no está clara, se deja como está.

La receta elimina user-scalable=no y cualquier maximum-scale inferior a 2 de la etiqueta viewport, en las plantillas de cabecera o en el código PHP que imprime la etiqueta, para que los visitantes puedan volver a ampliar su tienda con el gesto de pellizco. Para la regla más estricta meta-viewport-large de axe-core, se elimina cualquier maximum-scale inferior a 5. Los demás ajustes del viewport quedan exactamente como estaban. Una etiqueta viewport cuyo contenido calcula PHP, o que imprime un plugin, queda en manos de una persona.

Los controles que el escaneo encontró con un tamaño inferior a 24 × 24 píxeles, como los iconos de redes sociales, las muestras de color o los botones de cantidad, reciben ese tamaño mínimo. La receta busca las reglas de las hojas de estilos que dan precisamente a esos elementos un ancho o un alto fijo inferior a 24 píxeles y lo sube a 24 píxeles; cuando el elemento maqueta su icono con flexbox o grid, el icono se centra para que no quede en una esquina. Un control cuyo tamaño procede del relleno (padding) o de su contenido no se puede medir a partir de las hojas de estilos 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 de las hojas de estilos del tema, como una variable CSS o como el color de la regla que da estilo a ese texto, ese color pasa al tono más próximo, más claro o más oscuro, del mismo matiz que alcanza el contraste que el escaneo midió como necesario, sobre todos los fondos que midió. Un color que está definido en varios lugares, que cambiaría también elementos cuyo contraste el escaneo no midió, o que el tema usa también para fondos o bordes, queda en manos de una persona.

Cuando el dispositivo del visitante está configurado para reducir el movimiento, un bloque al final de la hoja de estilos principal del tema hace que cada animación se ejecute una sola vez, durante un tiempo demasiado breve para verse, de modo que se detiene en su estado final; las transiciones pasan a ser instantáneas y se desactiva el desplazamiento suave. Cuando los propios scripts del tema inician el avance automático de un carrusel, con Slick, Swiper, Splide, Owl o Flickity, el avance automático solo se inicia para los visitantes que no han pedido reducir el movimiento. El movimiento que procede de un plugin o de un script en línea no se modifica.

Un carrusel de las plantillas de su tema que se mueve por sí solo recibe un botón visible para ponerlo en pausa y reanudarlo, con los textos en inglés «Pause slideshow» y «Play slideshow». El botón pasa a ser el primer elemento del carrusel, de modo que quienes usan el teclado llegan a él antes que a las diapositivas. Un script breve en el archivo de script principal del tema conecta el botón con el avance automático del propio carrusel: una animación CSS del tema, Slick, Swiper o Flickity. Para los visitantes cuyo dispositivo pide reducir el movimiento, el carrusel empieza en pausa. Un carrusel que controla un plugin o un script en línea queda en manos de una persona.

Los elementos <blink> y <marquee> de las plantillas del tema, y de las cadenas PHP que los imprimen, 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. Los ajustes de desplazamiento del marquee se eliminan, de modo que ningún texto se mueve por sí solo. Un elemento que el código abre y cierra en lugares distintos queda en manos de una persona.

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, en los iPhone, se reproduce dentro de la página en lugar de a pantalla completa; si el vídeo tiene controles, los visitantes siguen pudiendo activar el sonido. El audio que empieza por sí solo deja de hacerlo. Los medios que inicia un script 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 de axe-core que cubre esta receta; vs-media es MANUAL (véase la lista de más abajo), así que en WooCommerce 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 plantilla, pero no está conectado con el campo, se conecta: el <label> situado justo antes del campo, o justo después de una casilla de verificación o de un botón de opción, recibe un for que apunta al campo, o un elemento de texto marcado como etiqueta se conecta mediante aria-labelledby. Los lectores de pantalla leen entonces la etiqueta cuando el campo recibe el foco, y al hacer clic en un <label> conectado el foco pasa al campo. 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 del cliente, como los de inicio de sesión, registro y proceso de pago, reciben el valor de autocomplete correspondiente a lo que piden, como correo electrónico, nombre de usuario, contraseña actual o nueva, nombre y apellidos, empresa, dirección, código postal, país o número de teléfono. El valor se deduce del tipo, el nombre, el id y la etiqueta del campo. Se sustituye un valor que falta, que es off o que no es válido; uno válido se conserva. Los campos de facturación y de envío propios de WooCommerce los imprime WooCommerce, no el tema, así que un filtro en functions.php establece sus valores. Se ejecuta después de los filtros propios del tema para esos campos, que pueden eliminar los valores. Los campos que no piden datos personales, como los de búsqueda, cupón o cantidad, se dejan como están, y lo mismo ocurre con un campo cuya finalidad no muestra el código.

Cuando un cliente elige otra talla u otro color, el área que muestra el precio y las existencias de la variación elegida se reescribe en el mismo sitio. Esa área pasa a ser una región dinámica, de modo que los lectores de pantalla anuncian el precio y las existencias nuevos sin que el cliente tenga que moverse hasta allí. El enlace al carrito de la cabecera se sustituye entero cuando se añade un producto, así que no puede llevar él mismo el anuncio. Junto a él, la receta añade un mensaje de estado oculto visualmente, y un breve bloque en el script del tema escribe en él «Product added to your cart.» o «Product removed from your cart.» cuando WooCommerce informa del cambio. Ambos mensajes se añaden en inglés. Un área que ya es una región dinámica o está dentro de una, o que el propio script del tema sustituye entera, se deja como está.

Los botones y enlaces que solo muestran un icono reciben un nombre que dice qué hacen, cuando el código muestra su finalidad: a partir del nombre del propio icono, de la clase o el id del control, o de adónde lleva un enlace, como el carrito, la página de la cuenta o una red social. Algunos ejemplos son «Search», «Cart», «My account», «Show password», «Close» y «Menu». El nombre es un texto oculto visualmente dentro del control, o un aria-label cuando el tema no tiene una clase para texto oculto, y se añade en inglés. Los nombres de las redes sociales son nombres de marca y se dejan como están. Un control cuya finalidad no muestra el código 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, como un logotipo junto al nombre de la tienda; es un icono pequeño 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 anunciar un gráfico sin nombre. Cualquier otra imagen es 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 en inglés que dice qué muestra. La receta lo toma del título de un archivo incrustado en el tema, del proveedor que figura en la dirección del marco o de palabras como map o video en su clase o su id. Un marco cuyo contenido no muestra el código no recibe ningún título genérico; queda en manos de una persona.