3

Mejorando la accesibilidad con aria-label

Jhean Carlos
Naftan
15753

El atributo aria-label en una etiqueta HTML ayuda a designar una descripción de referencia cuando no se tiene un texto visible o comprensible, por ejemplo:

<ahref="https://www.facebook.com/"aria-label="Ir a facebook.com"><iclass="logo-facebook"></i></a>

En este ejemplo se espera que la etiqueta de ancla <a> reciba texto de contenido, pero en en lugar de ello se implementa un logo (fuente), esto eso una mala práctica de accesibilidad ya que no se tiene una referencia del contenido de la etiqueta ancla, aria-label soluciona este problema implementando una descripción del contenido o acción de dicha etiqueta.

Este atributo se puede implementar en otras etiquetas como botones que no tengan un contenido claro para el usuario:

<button aria-label="Close"onclick="myDialog.close()">X</button>

Con esto ya se tiene una referencia de la acción que realizará el botón al ser presionado.

Escribe tu comentario
+ 2