Campos de formulario sin etiqueta en WooCommerce

WCAG 1.3.1, 3.3.2, 4.1.2 (A) · EN 301 549 9.1.3.1, 9.3.3.2, 9.4.1.2

Hay campos de formulario sin nombre accesible: ni <label>, ni aria-label, ni aria-labelledby.

Dónde tocarlo en WooCommerce

Los campos del checkout de WooCommerce llevan label por defecto; los problemas suelen venir de plugins de campos personalizados o de temas que ocultan el label por diseño.

En WooCommerce conviven el tema y los plugins. Antes de editar el tema, crea un tema hijo: si no, la próxima actualización se lleva tus cambios por delante.

<input type="email" name="email">

<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email" autocomplete="email">

<!-- O envolviendo -->
<label>Código postal
  <input type="text" name="cp" autocomplete="postal-code">
</label>

Por qué importa

Un campo sin etiqueta se anuncia como «cuadro de texto» y nada más. En un buscador es molesto; en la dirección de envío del checkout hace que la compra sea imposible de completar sin adivinar.

En otras plataformas

• Campos de formulario sin etiqueta en Shopify
• Campos de formulario sin etiqueta en PrestaShop