Introducción a ARIA y a la semántica de HTML no nativa
Hasta ahora, hemos alentado el uso de elementos HTML nativos porque te brindan foco, soporte de teclado y semánticas incorporadas, pero hay momentos en que un diseño sencillo y HTML nativo no bastan. Por ejemplo, actualmente no hay elemento HTML estandarizado para una construcción de IU muy común, el menú emergente. Tampoco hay un elemento HTML que brinde una característica semántica como "el usuario necesita conocer esto lo antes posible".
En esta lección, entonces, exploraremos cómo expresar los semantics que el HTML no puede expresar por su cuenta.
Las especificaciones de Aplicaciones de Internet de fácil acceso de la Iniciativa de accesibilidad web (WAI-ARIA o solo ARIA) son buenas para unir áreas con problemas de accesibilidad que no se pueden administrar con HTML nativo. Funciona permitiéndote especificar atributos que modifican la forma en que un elemento se traduce al árbol de accesibilidad. Veamos un ejemplo.
En el siguiente fragmento, usamos un elemento de lista como tipo de casilla de verificación personalizada. La clase “checkbox” de CSS le brinda al elemento las características visuales solicitadas.
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
Si bien esto funciona bien para usuarios con visión, un lector de pantalla no brindará ninguna indicación de que el elemento sirve como casilla de verificación, por lo que los usuarios con baja visión pueden perderse el elemento por completo.
Sin embargo, mediante el uso de atributos de ARIA podemos brindarle al elemento la información que falta para que el lector de pantalla pueda interpretarla correctamente. Aquí, agregamos los atributos role y aria-checked para identificar explícitamente el elemento como casilla de verificación y especificar que está marcada de manera predeterminada. El elemento de lista ahora se agregará al árbol de accesibilidad y un lector de pantalla lo informará correctamente como una casilla de verificación.
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA funciona cambiando y mejorando el árbol de accesibilidad del DOM estándar.
A pesar de que ARIA nos permite modificar sutilmente (o radicalmente) el árbol de accesibilidad de cualquier elemento de la página, es lo único que eso cambia. ARIA no mejora nada del comportamiento inherente del elemento. No hará que el elemento pueda tener el foco ni le brindará objetos de escucha de eventos de teclado. Esa sigue siendo parte de nuestra tarea de desarrollo.
Es importante comprender que no es necesario redefinir la semántica predeterminada. Sin importar su uso, un elemento <input type="checkbox"> HTML estándar no necesita un atributo ARIA role="checkbox" adicional para anunciarse correctamente.
También vale la pena mencionar que ciertos elementos HTML tienen restricciones sobre los roles y atributos de ARIA que se pueden usar en ellos. Por ejemplo, a un elemento <input
type="text"> estándar no se le puede aplicar un rol o atributo adicional.
Consulta especificaciones de ARIA en HTML para obtener más información.
Veamos qué otras capacidades puede ofrecer ARIA.
¿Qué puede hacer ARIA?
Como viste con el ejemplo de la casilla de verificación, ARIA puede modificar la semántica de un elemento existente o agregar semántica a elementos en los que no existen semánticas nativas. También puede expresar patrones semánticos que no existen en HTML, como un menú o un panel de pestañas. A menudo, ARIA nos permite crear elementos estilo widget que no serían posibles con HTML básico.
- Por ejemplo, ARIA puede agregar texto de descripción y etiqueta adicional que solo se expone a las APIs de tecnología de accesibilidad.
<button aria-label="screen reader only label"></button>
- ARIA puede expresar relaciones de semantic entre elementos que extienden la conectividad superior/secundaria estándar, como una barra de desplazamiento personalizada que controla una región específica.
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- Y ARIA puede hacer que ciertas partes de la página estén "vivas", entonces inmediatamente le informan a la tecnología asistencial cuando cambian.
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
Uno de los aspectos centrales del sistema ARIA es su colección de roles. Un rol en términos de accesibilidad se refiere a un indicador de atajo de un patrón específico de IU. ARIA brinda un vocabulario de patrones que podemos usar a través del atributo role en cualquier elemento HTML.
Cuando aplicamos role="checkbox" en el ejemplo anterior, estábamos diciendo a la tecnología de asistencia que el elemento debía seguir el patrón de "casilla de verificación". Es decir, garantizamos que tendrá un estado de verificación (esté marcado o no marcado), y que el estado se pueda activar o desactivar con el mouse o la barra espaciadora, como un elemento de casilla de verificación de HTML estándar.
De hecho, debido a que las interacciones del teclado son tan importantes en el uso de lectores de pantalla, es muy importante asegurarse de que, cuando se crea un widget personalizado, el atributo role siempre se aplique en el mismo lugar que el atributo tabindex. Esto garantiza que los eventos del teclado vayan al lugar correcto y que, cuando el enfoque se centre en un elemento, su rol se transmita con precisión.
Las especificaciones de ARIA describen una taxonomía de valores posibles para el atributo role y los atributos de ARIA asociados que se pueden usar en conjunto con esos roles. Esta es la mejor fuente de información definitiva sobre cómo los atributos y roles de ARIA trabajan juntos y cómo se pueden usar de una manera compatible con los navegadores y las tecnologías de accesibilidad.
Sin embargo, las especificaciones son densas. Un lugar más accesible para comenzar es el documento Prácticas de autoría de ARIA, que explora las prácticas recomendadas para usar los roles y las propiedades disponibles de ARIA.
ARIA también ofrece roles de punto de referencia que extienden las opciones disponibles en HTML5. Consulta las especificaciones de Patrones de diseño de roles de punto de referencia para obtener más información.