El atributo “role” en HTML es una forma de proporcionar información semántica a las tecnologías de asistencia, como lectores de pantalla, sobre el propósito y la función de un elemento. El atributo “role” se puede utilizar para describir elementos que no existen nativamente en HTML o que existen pero aún no tienen un soporte completo en el navegador. El atributo “role” también se puede utilizar para mejorar la accesibilidad de elementos HTML existentes mediante la adición de roles más específicos.
El atributo “role” es parte de la especificación de Accessible Rich Internet Applications (ARIA), que define un conjunto de roles, estados y propiedades que se pueden utilizar para hacer que el contenido web sea más accesible. Los roles de ARIA se agregan a elementos HTML mediante "role="tipo de rol", donde el tipo de rol es el nombre de un rol en la especificación de ARIA. Algunos roles requieren la inclusión de estados o propiedades de ARIA asociados, mientras que otros solo son válidos en asociación con otros roles.
Definición del Atributo role HTML
El atributo “role” describe la función de un elemento en programas que pueden utilizarlo, como lectores de pantalla o ampliadores de pantalla.
Ejemplo de uso:
<a href="#" role="button">Enlace de botón</a>Nota
Los lectores de pantalla leerán este elemento como “botón” en lugar de “enlace“.
Existen cuatro categorías de roles:
- Roles abstractos
- Roles de widgets
- Roles de estructura de documentos
- Roles de hitos (landmarks)
Ejemplos de Uso del Atributo “role”
Aquí tienes algunos ejemplos de cómo usar el atributo “role” en HTML con fragmentos de código y comentarios.
Uso del atributo “role” en elementos no semánticos
Los elementos no semánticos en HTML, como <div> y <span>, no tienen un rol por defecto. Se les puede asignar un rol utilizando el atributo “role” para indicar su función o significado. Por ejemplo, un elemento <div> puede recibir el rol de “alert” para indicar que contiene un mensaje importante que requiere la atención del usuario.
<!-- Un elemento div con el rol de alerta -->
<div role="alert">
<p>Advertencia: Este sitio utiliza cookies.</p>
</div>Uso del atributo “role” en widgets personalizados
Los widgets personalizados son componentes interactivos que se crean utilizando HTML, CSS y JavaScript. Pueden no tener un elemento HTML nativo correspondiente o tener comportamientos diferentes al elemento nativo.
Por ejemplo, se puede crear un widget personalizado de pestañas utilizando elementos <div> y JavaScript. El atributo “role” se puede utilizar para asignar roles a la pestaña y sus pestañas anidadas, así como estados y propiedades de ARIA para indicar su estado y relación.
<!-- Un widget personalizado de pestañas con roles, estados y propiedades -->
<div role="tablist">
<!-- Cada pestaña tiene un rol de pestaña y un estado aria-selected -->
<div role="tab" id="tab1" aria-selected="true">Pestaña 1</div>
<div role="tab" id="tab2" aria-selected="false">Pestaña 2</div>
<div role="tab" id="tab3" aria-selected="false">Pestaña 3</div>
</div>
<!-- Cada panel de pestañas tiene un rol de panel de pestañas y una propiedad aria-labelledby -->
<div role="tabpanel" id="panel1" aria-labelledby="tab1">
<p>Contenido de la pestaña 1</p>
</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>
<p>Contenido de la pestaña 2</p>
</div>
<div role="tabpanel" id="panel3" aria-labelledby="tab3" hidden>
<p>Contenido de la pestaña 3</p>
</div>
Uso del atributo “role” en elementos semánticos
Los elementos semánticos en HTML, como <article> y <nav>, tienen un rol por defecto que coincide con su significado. Sin embargo, a veces puede ser necesario anular o refinar su rol utilizando el atributo “role“.
Por ejemplo, se puede asignar el rol de “breadcrumbs” (migas de pan) a un elemento <nav> para indicar que contiene una lista de enlaces que muestran la ubicación del usuario dentro de la jerarquía del sitio.
<!-- Un elemento nav con el rol de migas de pan -->
<nav role="breadcrumbs">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/blog/role-attribute">Cómo utilizar el atributo "role" en HTML para la accesibilidad</a></li>
</ul>
</nav>
El atributo “role” en HTML es una herramienta útil para mejorar la accesibilidad del contenido web al proporcionar información semántica a las tecnologías de asistencia. El atributo “role” se puede utilizar para describir elementos no semánticos, widgets personalizados y elementos semánticos con mayor especificidad.
Sin embargo, se debe utilizar el atributo “role” con precaución y solo cuando sea necesario, ya que puede anular o entrar en conflicto con la semántica nativa de los elementos HTML. También es importante seguir la especificación de ARIA y utilizar roles, estados y propiedades válidos que sean apropiados para cada elemento.
