Campos de formulario sin etiqueta

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.

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.

Un campo confuso en el checkout es un carrito abandonado. Esto no es solo cumplimiento: es conversión.

Cómo se arregla

Asocia un <label> con el atributo for al id del campo, o envuelve el campo dentro del label. El placeholder no cuenta: desaparece al escribir y muchos lectores de pantalla no lo anuncian.

<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>

En tu plataforma

• Shopify

  Los formularios del checkout de Shopify ya vienen etiquetados. Revisa los que has añadido tú: newsletter en el pie, buscador del cabecero y formularios de apps de terceros.

• 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.

• PrestaShop

  Revisa los módulos de newsletter y de búsqueda, que a menudo usan solo placeholder.

Relacionado

• Botón de imagen sin texto alternativo
• Marco incrustado sin título
• El placeholder hace de etiqueta
• Botones sin nombre