En el artículo de hoy te cuento cómo hacer botones de manera que sean accesibles para tecnologías asistivas con diferentes tipos de contenido.
Para llevarlo a algo tangible, usaremos de ejemplo un botón borrar construido de 3 maneras diferentes:
- Un botón con texto que diga “borrar”.
- Un botón con ícono de tacho de basura.
- Un botón con un ícono de tacho de basura junto al texto de “borrar”.
Lo esencial: un botón en HTML
Si lo que queremos construir es un botón, no nos importa tanto lo que ponemos adentro sino comunicar que es un elemento interactivo que se usa para realizar una acción. Por eso mismo usamos la etiqueta button de HTML para darle los atributos semánticos correspondientes.
<button type="button">
<!-- Contenido -->
</button>Primer caso: un botón con texto
Una vez declarado el botón, procedemos a especificar la acción. Al ser un botón textual, solo tenemos que escribir el texto dentro de la etiqueta button y esto ya alcanza para que las texnologías asistivas lo lean correctamente.
<button type="button">
Borrar
</button>Caso 2: un botón con un ícono
Si lo que queremos es un botón visual, en lugar de texto, agregamos una etiqueta con el svg correspondiente. Lo cual nos quedaría así:
<button type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
<path d="M3 6h18M9 6v12m6-12v12M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14"
fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
</button>Ahora, el problema con este código es que las tecnologías de apoyo no tienen manera de adivinar que el tacho de basura se corresponde con la acción de borrar.
Un botón con ícono accesible en HTML
Para que el botón sea accesible debemos indicarle a las tecnologías asistivas su significado. Acá es donde entran los atributos aria para hacer su magia. Para que el componente sea interpretado correctamente debemos:
- Incluir el atributo aria-label en la etiqueta button con el valor de la acción correspondiente. De esta manera el lector podrá enunciar la acción correctamente.
- Sumar el atributo aria-hidden con valor ‘true’ en el ícono para que el lector de pantalla sepa que debe ignorarlo.
- Agregar el atributo focusable con valor ‘false’ en el ícono para complementarlo con el aria hidden y asegurarse de que las tecnologías asistivas lo ignoren.
A efectos prácticos nos quedará un botón:
<button type="button" aria-label="Borrar">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="16" height="16" height="16">
<path d="M3 6h18M9 6v12m6-12v12M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14"
fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
</button>Caso 3: botón con ícono más texto accesibles en HTML
Aunque este caso puede parecer un poco más complejo a simple vista, la realidad es que es incluso más fácil que si el botón fuera solo un ícono. En este botón deberemos incluir:
- El ícono: con sus atributos aria-hidden=’true’ y focusable=’false’ para que lo ignoren las tecnologías asistivas.
- El texto de la acción: solo con esto las tecnologías de apoyo ya podrán leer la acción específica.
Con estos atributos, nuestro código quedaría así:
<button type="button">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="16" height="16" height="16">
<path d="M3 6h18M9 6v12m6-12v12M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14"
fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
Borrar
</button>Y de esta manera, nos aseguramos que nuestros botones sean accesibles tanto si son solo texto, solo ícono o combinan ambas opciones. Recordá que un buen diseño no es solo aquel que se ve bien, sino el que pueda ser consumido por la mayor cantidad de personas posibles.
