10.1 Accesibilidad
La accesibilidad (accessibility) del contenido web es una parte importante del diseño web moderno. Está destinada a garantizar que todos los usuarios, incluidas las personas con discapacidades, puedan interactuar fácilmente con las páginas web.
Una de las herramientas clave para lograr este objetivo son los atributos ARIA (Accessible Rich Internet Applications), que mejoran la accesibilidad del contenido web, haciéndolo más comprensible y accesible para tecnologías de asistencia, como los programas de lectura de pantalla.
¿Qué es ARIA?
ARIA (Accessible Rich Internet Applications) es un conjunto de atributos especiales que se pueden agregar a los elementos HTML para mejorar su accesibilidad. Estos atributos proporcionan información adicional sobre la estructura y el comportamiento de los elementos, lo que ayuda a las tecnologías de asistencia a interpretar y interactuar mejor con el contenido web.
Principales atributos ARIA para mejorar la legibilidad del texto:
Atributo aria-label
El atributo aria-label se usa para proporcionar una etiqueta de texto a un elemento que será leída por el lector de pantalla.
Este atributo es útil cuando el elemento no tiene una etiqueta visible o cuando se requiere una descripción más detallada.
Ejemplo de uso:
<button aria-label="Cerrar diálogo">X</button>
Atributo aria-labelledby
El atributo aria-labelledby vincula un elemento con otra etiqueta en la página, utilizando el id de la etiqueta. Esto es útil,
cuando es necesario vincular un elemento a una etiqueta ya existente, proporcionando contexto y descripción.
Ejemplo de uso:
<h2 id="section-title">Título de la sección</h2>
<p aria-labelledby="section-title">Este es un párrafo de texto relacionado con el título de la sección.</p>
Atributo aria-describedby
El atributo aria-describedby conecta un elemento con uno o más elementos que contienen una descripción,
utilizando sus id. Este atributo es útil para proporcionar información adicional o contexto a un elemento.
Ejemplo de uso:
<input type="text" aria-describedby="input-description">
<p id="input-description">Introduce tu nombre.</p>
10.2 Role
Atributo role
El atributo role define el rol de un elemento, indicando a las tecnologías de asistencia cómo deben interpretar dicho elemento.
Existen muchos roles, tales como button, navigation, main, article y muchos otros.
Ejemplo de uso:
<nav role="navigation">
<ul>
<li><a href="#home">Inicio</a></li>
<li><a href="#about">Acerca de</a></li>
<li><a href="#contact">Contacto</a></li>
</ul>
</nav>
Atributo aria-live
El atributo aria-live se utiliza para contenido que se actualiza dinámicamente. Informa al lector de pantalla que el contenido
dentro del elemento ha cambiado y necesita ser anunciado. Los valores incluyen off, polite y assertive.
Ejemplo de uso:
<div aria-live="polite">
<p>Aquí se mostrará información importante.</p>
</div>
Atributo aria-hidden
El atributo aria-hidden indica a las tecnologías de asistencia si un elemento debe estar accesible para los usuarios.
El valor true oculta el elemento de las tecnologías de asistencia, mientras que el valor false lo hace accesible.
Ejemplo de uso:
<div aria-hidden="true">
<p>Este texto estará oculto para los lectores de pantalla.</p>
</div>
Atributo aria-expanded
El atributo aria-expanded indica si un elemento está expandido o colapsado. Se utiliza a menudo en elementos de
control, tales como "acordeones" y menús desplegables.
Ejemplo de uso:
<button aria-expanded="false" aria-controls="menu">Menú</button>
<ul id="menu" hidden>
<li><a href="#item1">Elemento 1</a></li>
<li><a href="#item2">Elemento 2</a></li>
<li><a href="#item3">Elemento 3</a></li>
</ul>
Atributo aria-controls
El atributo aria-controls indica qué elemento está controlado por el elemento actual. Se utiliza junto
con atributos como aria-expanded para crear elementos de control interactivos.
Ejemplo de uso:
<button aria-controls="content" aria-expanded="false">Mostrar/Ocultar</button>
<div id="content" hidden>
<p>Contenido oculto.</p>
</div>
GO TO FULL VERSION