Botones que anuncian lo que hacen

Un botón solo es útil si los usuarios saben qué hace. Su nombre accesible es lo que un lector de pantalla lee en voz alta antes de que lo pulsen.

En un botón normal, el texto visible que contiene es el nombre accesible. Unas palabras claras producen un anuncio claro.

Etiquete un botón con la acción que realiza, como Guardar, Eliminar o Añadir al carrito. Un verbo indica exactamente qué sucederá.

Etiquetas como Aceptar, Enviar o Ir son imprecisas cuando varios botones las comparten. Nombre la acción específica para que cada una se entienda por sí sola.

Un botón con un icono y sin texto no tiene nombre accesible. Un lector de pantalla podría limitarse a decir «botón» y dejar al usuario intentando adivinar. 🤔

Dé un nombre mediante aria-label a un botón sin texto. El icono seguirá visible, pero la tecnología de asistencia anunciará qué hace.

Cuando una etiqueta ya nombra la acción, marque el icono interno con aria-hidden para que no se lea como ruido adicional.

Un botón de alternancia debe informar de su estado. Use aria-pressed para que los lectores de pantalla indiquen si está activado o desactivado.

Un botón que muestra u oculta un panel debe incluir aria-expanded para que los usuarios sepan si está abierto o contraído.

Una buena etiqueta es breve, pero precisa. Promete exactamente lo que hará el botón al pulsarlo, sin sorpresas después del clic.

Si un botón tiene texto visible, mantenga esas palabras dentro de su nombre accesible para que los usuarios del control por voz puedan pronunciar la etiqueta que ven.

Nombre cada botón según su acción, etiquete los que solo tienen un icono y exponga el estado mediante atributos aria. Así, los usuarios siempre sabrán qué hace cada uno. 👍