Atributo de rol en HTML

1. Introducción al atributo rol en HTML
2. Utilice el atributo role para la accesibilidad en HTML

En este artículo, presentaremos el atributo HTML rol junto con su propósito.

Introducción al atributo rol en HTML

El atributo rol en HTML viene bajo la especificación WAI-ARIA (Iniciativa de Accesibilidad Web – Aplicaciones Accesibles de Internet Enriquecidas). El objetivo principal de WAI-ARIA es aumentar la accesibilidad de la interfaz web para ayudar a las personas con discapacidad.

Permite que el lector de pantalla utilice la información que proporcionamos para leer el contenido de un documento HTML. El atributo role define el rol de un elemento HTML que describe la semántica.

En primer lugar, comprendamos la diferencia entre los elementos HTML semánticos y no semánticos. Los elementos como <p>, <table> y <li> son el elemento semántico que representa los significados.

Se centra más en su funcionalidad que en su apariencia. El significado específico del elemento se presenta al navegador y al desarrollador.

Por ejemplo, la etiqueta <p> crea párrafos.

Por otro lado, los elementos HTML no semánticos son aquellos elementos que no tienen una explicación clara de su contenido. Algunos ejemplos son las etiquetas como <div> y <span>.

Dichas etiquetas no tienen ninguna información sobre el contenido que contienen. En otras palabras, no tienen semántica.

El atributo role proporciona semántica a los elementos no semánticos en HTML. Podemos escribir el rol de un elemento usando el formato role="role_type".

Aquí, role_type son los roles especificados en ARIA. En las secciones a continuación, veremos los diferentes casos de uso del atributo role.

Utilice el atributo role para la accesibilidad en HTML

Uno de los propósitos principales del atributo rol es proporcionar accesibilidad, especialmente para usuarios con discapacidades visuales. Con un lector de pantalla, el atributo rol lee el propósito exacto o el comportamiento de un elemento en particular.

Consideremos un escenario en el que el usuario de la aplicación web tiene una discapacidad visual. Necesitamos crear un botón que inicie la sesión del usuario.

Sin embargo, el framework no nos permite usar el elemento <button>. A pesar de la incapacidad del marco, aún podemos hacerlo posible usando la etiqueta <a>.

Pero no hay forma de que podamos decirle a la persona con discapacidad visual que hay un botón para iniciar sesión a menos que usemos el atributo rol.

Podemos usar el atributo role para definir el enlace como un botón en tal situación. Podemos hacerlo escribiendo el valor del atributo role como un "botón".

Como resultado, el lector de pantalla lee al usuario que Iniciar sesión es un botón. Por lo tanto, podrá iniciar sesión en el sistema.

Podemos agregar la extensión Lector de pantalla desde Chrome Web Store para el navegador Chrome. Cuando el usuario navega por la etiqueta <a> a través del teclado, el lector de pantalla leerá Iniciar sesión como un botón.

Código de ejemplo:

<a href="#" role="button"> Login </a>