Cómo el atributo ‘role’ mejora la accesibilidad web
Cuando empecé a trabajar en el desarrollo web, no tenía mucha experiencia en lo que se refería a la accesibilidad web. Sin embargo, pronto aprendí que era un aspecto clave a tener en cuenta en cualquier proyecto. Una de las herramientas que descubrí para mejorar la accesibilidad de mis sitios web fue el atributo ‘role’ de HTML.
El atributo ‘role’ permite describir el propósito semántico de un elemento en una página web. Esto es especialmente útil para los usuarios que dependen de tecnologías de asistencia, como lectores de pantalla, que utilizan esta información para navegar por el contenido.
Por ejemplo, si tienes un botón que dispara una acción en la página, puedes añadir el atributo ‘role=“button”’. De esta manera, le estás diciendo que el elemento es un botón y que espera una acción del usuario.
<button role="button" onclick="alert('Hola!')">Haz clic en mi</button>
De manera similar, si tienes un elemento que actúa como un menú de navegación, puedes añadir el atributo ‘role=“navigation”’. Esto le dice al lector de pantalla que se trata de un menú de navegación y que puede saltarlo si no está interesado en el contenido.
<nav role="navigation">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/productos">Productos</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
El uso del atributo ‘role’ en HTML puede mejorar significativamente la accesibilidad de tus sitios web para los usuarios que dependen de tecnologías de asistencia. No te cuesta nada añadir este atributo, y puede hacer una gran diferencia para tus usuarios. Te animo a que lo incorpores a tus futuros proyectos.
Los diferentes valores que el atributo ‘role’ puede tener
Una de las grandes ventajas del atributo ‘role’ de HTML es su capacidad para describir con precisión y claridad lo que un elemento específico de la página web hará. A través de este atributo, es posible entender fácilmente cómo los elementos interactúan dentro de la página y qué papel tienen en la experiencia general del usuario.
Hay varios valores que el atributo ‘role’ puede tener, cada uno de ellos indicando un papel distinto que juega el elemento en cuestión. Algunos de estos valores son:
| Propiedad | Descripción |
|---|---|
| role=“button” | Se utiliza para indicar que un elemento en la página es un botón que el usuario puede interactuar. Este valor es especialmente útil para elementos que, por su apariencia o interacción, no se pueden distinguir fácilmente de otros elementos no interactivos. |
| role=“menuitem” | Se utiliza para indicar que un elemento forma parte de un menú en la página. Este valor es útil para indicar qué elementos se pueden seleccionar dentro de un menú y cuáles no. |
| role=“tab” | Se utiliza para indicar que un elemento es una pestaña en una interfaz de usuario. Este valor es especialmente útil para interfaces de usuario complejas donde hay varias pestañas que el usuario puede seleccionar. |
| role=“list” | Se utiliza para indicar que un elemento forma parte de una lista en la página. Este valor es útil para elementos que, por su aspecto o estructura, no se pueden distinguir fácilmente de otros elementos no listados. |
| role=“dialog” | Se utiliza para indicar que un elemento es un cuadro de diálogo en la página. Este valor es especialmente útil para elementos que requieren una interacción del usuario y que pueden ser críticos para la experiencia general del usuario. |
Cada uno de estos valores es útil para diferentes contextos en una página web, y es posible utilizar varios valores para un mismo elemento. En cualquier caso, el atributo ‘role’ ayuda a los desarrolladores web a crear experiencias de usuario claras y accesibles, permitiendo que la página sea fácil de entender y usar para todos los usuarios.
<button role="button">Haz clic aquí</button>
<ul role="menu">
<li role="menuitem">Opción 1</li>
<li role="menuitem">Opción 2</li>
<li role="menuitem">Opción 3</li>
</ul>
<div role="tablist">
<button role="tab">Pestaña 1</button>
<button role="tab">Pestaña 2</button>
<button role="tab">Pestaña 3</button>
</div>
Usando el atributo ‘role’ para identificar partes de una página
El atributo ‘role’ de HTML es una herramienta muy útil para identificar elementos dentro de una página con discapacidad visual o auditiva. También puede ser muy útil para mejorar la estructura y la navegabilidad de una página web. En este artículo, descubrirás diferentes maneras de usar este atributo para crear una experiencia de usuario más accesible e intuitiva.
Para empezar, puedes usar el atributo ‘role’ para definir el tipo de contenido de un elemento. Por ejemplo, si tienes un menú de navegación, puedes usar ‘role=“navigation”’ para identificarlo como tal. De esta manera, los usuarios pueden saltar rápidamente a la sección de navegación en lugar de tener que leer toda la página.
Otro uso típico es para identificar áreas de contenido principal y secundario. Por ejemplo, si tienes un nombre de página, un contenido principal y un contenido secundario, puedes asignar roles de ‘heading’, ‘main’ y ‘complementary’. Así, los usuarios con discapacidad visual pueden usar sus lectores de pantalla para saltar directamente a la sección de contenido principal.
El atributo ‘role’ también se puede utilizar para identificar elementos interactivos, como botones y formularios. Por ejemplo, ‘role=“button”’ para un botón o ‘role=“form”’ para un formulario.
El atributo ‘role’ es una herramienta poderosa para mejorar la experiencia del usuario en la web. Es fácil de usar y puede hacer una gran diferencia para las personas con discapacidades. Con este breve tutorial, deberías tener una buena idea de cómo puedes empezar a implementarlo en tus propios proyectos. ¡Inténtalo por ti mismo!
<!-- Ejemplo de cómo usar role para definir la navegación -->
<nav role="navigation">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contáctanos</a></li>
</ul>
</nav>
Cómo el atributo ‘role’ es útil para dispositivos de asistencia
El atributo ‘role’ en HTML puede resultar muy útil para personas con discapacidades visuales o auditivas. Nosotros mismos lo descubrimos cuando realizamos la prueba de accesibilidad en nuestro sitio web, evidenciando que no estábamos utilizando el atributo ‘role’ en algunos elementos.
Este atributo permite definir el papel o función de un elemento en la página web, lo que facilita la navegación para quienes usan dispositivos de asistencia tales como lectores de pantalla o teclados especiales. Por ejemplo, al utilizar ‘role=“navigation”’ en la etiqueta de la barra de navegación, indicamos claramente su función para los dispositivos de asistencia.
Además, el atributo ‘role’ puede ser utilizado en combinación con otros atributos de accesibilidad como ‘aria-labelledby’, ‘aria-describedby’, y ‘aria-live’, los cuales permiten a los dispositivos de asistencia proporcionar información adicional a los usuarios con discapacidades.
Veamos un ejemplo de cómo usar ‘role’ con otros atributos de accesibilidad. Supongamos que tenemos una sección de noticias y cada noticia se encuentra contenida en un ‘div’. En este caso, podríamos utilizar los siguientes atributos:
<div
role="article"
aria-labelledby="titulo-noticia"
aria-describedby="resumen-noticia"
aria-live="polite"
>
<h2 id="titulo-noticia">Título de la noticia</h2>
<p id="resumen-noticia">Breve resumen de la noticia</p>
<p>Contenido detallado de la noticia</p>
</div>
En el fragmento de código anterior, hemos utilizado ‘role=“article”’ para indicar que cada ‘div’ funciona como un artículo. Luego, utilizamos ‘aria-labelledby’ y ‘aria-describedby’ para proporcionar información adicional sobre el contenido del artículo. Por último, hemos utilizado ‘aria-live=“polite”’ para asegurarnos de que los usuarios reciban inmediatamente la información actualizada sobre ese artículo.
Como resultado, gracias al uso del atributo ‘role’, nuestros usuarios realmente podrán entender el propósito y función de cada elemento de la página web, permitiéndoles navegar a través del sitio con mayor facilidad. ¡Incluso nosotros mismos hemos notado la diferencia en la navegación, haciéndola más clara y alineada con los estándares de accesibilidad!