aria-label: cómo etiquetar botones, enlaces y campos

Por qué importa

Sin nombre, un lector de pantalla solo dice “botón” o “enlace”, y el usuario no sabe si ese botón abre el menú, vacía el carrito o cierra una ventana. Un formulario de contacto o de pago con campos sin etiqueta puede ser imposible de completar.

Los nombres accesibles también los usan el control por voz (“pulsa Buscar”) y otras tecnologías de apoyo, y son un requisito de WCAG, la referencia de las normas de accesibilidad en Europa. Suelen faltar en los mismos sitios: iconos de redes sociales, botones de solo icono y campos de newsletter con texto de ejemplo pero sin etiqueta.

Cómo lo comprueba Posiciona

Analizamos el HTML de la página: botones, enlaces con destino y campos de formulario, salvo los de tipo hidden. Un elemento tiene nombre si tiene texto, aria-label, aria-labelledby o title; los enlaces, también si contienen una imagen con alt, y los campos, si tienen un <label> asociado o que los envuelve. Un campo con solo placeholder no cuenta. La nota es el porcentaje de elementos con nombre, y listamos los que fallan.

En la nota de Accesibilidad esta comprobación cuenta como “importante” (peso 3 de 5).

Cómo solucionarlo

Siempre que puedas, usa texto visible: un botón que dice “Añadir al carrito” no necesita nada más.
En botones y enlaces de solo icono, añade aria-label con la acción o el destino: “Abrir menú”, “Buscar”, “Ver carrito”, “Instagram”. Marca el icono con aria-hidden="true" para que el lector no intente leerlo.
Da a cada campo de formulario una etiqueta <label> cuyo for apunte al id del campo. Si por diseño no quieres que se vea, ocúltala visualmente con una clase de “solo lectores de pantalla”, pero no la borres.
No uses el placeholder como etiqueta: desaparece al escribir, suele tener poco contraste y no todas las tecnologías de apoyo lo tratan como nombre del campo.
Pon alt a las imágenes que son el único contenido de un enlace, como el logo que lleva a la portada, describiendo el destino (“Inicio de Tu Tienda”) más que el dibujo.
Prueba con un lector de pantalla gratuito (NVDA en Windows, VoiceOver en Mac y iPhone, TalkBack en Android) recorriendo la cabecera y el formulario principal.

Botón y enlace con solo iconoHTML

<button type="button" aria-label="Abrir menú">
  <svg aria-hidden="true" focusable="false" width="24" height="24">…</svg>
</button>

<a href="https://www.instagram.com/tutienda" aria-label="Instagram de Tu Tienda">
  <svg aria-hidden="true" focusable="false" width="24" height="24">…</svg>
</a>

Campo de formulario con etiquetaHTML

<label for="newsletter-email">Tu correo electrónico</label>
<input type="email" id="newsletter-email" name="email" autocomplete="email" placeholder="nombre@ejemplo.com">

En WordPress

El bloque Iconos sociales ya incluye el nombre de cada red para los lectores de pantalla. Si tu tema o un plugin pone iconos a mano, añade el aria-label en sus ajustes o en el HTML.
En los plugins de formularios (Contact Form 7, WPForms, Gravity Forms), mantén las etiquetas de los campos aunque el diseño use textos de ejemplo; si no quieres que se vean, ocúltalas con la clase screen-reader-text de WordPress en lugar de borrarlas.

En Shopify

En Shopify, los botones de icono suelen estar en los snippets y secciones de la cabecera (Tienda online → Temas → Editar código, archivos como header.liquid). Añade ahí el aria-label; muchos temas toman esos textos de sus traducciones.
Revisa el formulario de newsletter del pie y el buscador: si solo tienen texto de ejemplo, añade una etiqueta con la clase visually-hidden, que ya incluyen muchos temas de Shopify.

Preguntas frecuentes

¿Es mejor aria-label o un texto oculto visualmente?

Los dos funcionan con los lectores de pantalla. El texto oculto con una clase como visually-hidden o screen-reader-text se gestiona como cualquier otro texto del tema y suele traducirse mejor con los traductores automáticos; aria-label es más cómodo para iconos sueltos. Evita usar title como única etiqueta: no todos los lectores lo anuncian y en móvil no se ve.

¿Hay que poner aria-label a todo?

No. La primera regla de ARIA es no usarla si un elemento HTML ya hace el trabajo: un <button> con texto, un <label> o un alt bien escrito son mejores. Poner aria-label a elementos que ya tienen texto puede sustituir ese texto para el lector y crear confusión. Úsalo solo donde falta un nombre, como en los iconos.