9.7: WAI-ARIA- Iniciativa de Accesibilidad Web - Aplicaciones de Internet Ricas Accesibles
- Page ID
- 154687
WAI-ARIA es quizás la tecnología de accesibilidad web más importante que se ha presentado desde la introducción de WCAG 1.0. Permite a los desarrolladores de aplicaciones web o interactividad web personalizada definir roles específicos, estados y propiedades para interacciones personalizadas que las tecnologías de asistencia son capaces de entender. Aunque WAI-ARIA está dirigido principalmente a desarrolladores, otros al menos deberían entender dónde y cuándo se acostumbra.
WAI-ARIA es una especificación W3C que define una colección de atributos que se pueden usar dentro de elementos HTML para agregar información semántica. Por ejemplo, un desarrollador puede querer crear un menú de navegación, a menudo usando el marcado de lista HTML para estructurar los elementos del menú y JavaScript para controlar qué elementos del menú mostrar en un momento dado. Sin usar WAI-ARIA, dicho menú puede ser accesible en el sentido de que un usuario de AT podría navegar por sus elementos y abrir elementos del menú, pero serán anunciados por el AT como una colección de listas anidadas. Al agregar roles de menú ARIA a estos elementos de lista, AT los anunciará como partes de un menú, ya sea que estén abiertos o cerrados, y si tienen submenús, etc.
Al auditar la interactividad web personalizada, se debe usar un lector de pantalla como ChromeVox para navegar a través de una herramienta o widget para determinar si WAI-ARIA se ha utilizado para agregar roles, estados y propiedades a la función. También puede examinar el código usando la herramienta Inspeccionar en varios navegadores, para ver qué ARIA se está utilizando para operar la herramienta y ver la actualización de ARIA dinámicamente, a medida que cambian los estados y las propiedades. En los informes de auditoría, se pueden hacer recomendaciones para usar ARIA para hacer que los elementos sean más significativos, por lo tanto, más utilizables por los usuarios de AT. Consulte la Directriz 4.1.2 (Nivel A).
La especificación completa de WAI-ARIA y las prácticas de autoría WAI-ARIA se pueden encontrar en el sitio web del W3C. Al menos escanee estos documentos para familiarizarse con su contenido para que pueda consultarlos en sus auditorías al hacer recomendaciones relacionadas con ARIA.
Kit de herramientas: Marque estos dos documentos para agregarlos a su kit de herramientas.
WAI-ARIA en Acción
El siguiente es un extracto HTML de un gran menú principal de navegación que ha sido marcado con WAI-ARIA. El marcado contiene los atributos básicos de ARIA utilizados para crear un menú principal utilizable AT. Lea los comentarios en el cuadro a continuación y examine el marcado que describe para desarrollar su comprensión de cómo se usa WIA-ARIA.
Técnico: Un ejemplo de un menú principal creado con marcado de lista HTML desordenado.
La primera línea de marcado a continuación crea un contenedor alrededor del menú, le da un papel de navegación, se describe con el texto en el elemento menu_keys span a continuación referenciado usando aria-describedby, y se hace enfocable por teclado con tabindex="0". Cuando se accede con un lector de pantalla, se anuncia como navegación y describe al usuario cómo navegar por el menú.
<div role="navigation" aria-describedby="menu_keys" tabindex="0"> <span id="menu_keys" style="font-size:0;"> Main Menu: Use arrow keys to move left and right and up and down through menus </span>
El menú en sí es una lista básica anidada desordenada. JavaScript inyecta el ARIA dinámicamente. A los ULs se les da un papel de la tabla de menú, a los elementos de la lista se les da un papel de menuitem. Donde ocurre una lista anidada (que es un submenú) aria-haspopout se establece en true para indicar al lector de pantalla que hay un submenú presente. El aria-activedescenant se establece en el ID del elemento padre del submenú que actualmente tiene foco.
<ul id="nav" role="menubar" aria-describedby="menukeys">
<li role="menuitem">Home </li>
<li id="activeItem" role="menuitem" aria-haspopout="true">
Courses and Programs
<ul role="menubar" aria-activedescendant="activeItem">
<li role="menuitem" aria-haspopout="true">Areas of Interest
<ul>
<li role="menuitem">Information Technology</li>
<li role="menuitem">Communication and Media</li>
<li role="menuitem">Business Systems and Strategies</li>
…
</ul>
</li>
…
</ul>
</li>
…
</ul>
</div>
Para ver el menú en acción, vea el siguiente video. Escucha atentamente cómo el menú es anunciado por ChromeVox.
Video: WIA-ARIA Navegación Principal
Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/pwaa/?p=1512
El menú del video anterior usa los scripts del menú desplegable accesibles de MooTools para inyectar los atributos ARIA apropiados cuando son necesarios. Afortunadamente muchas de las interacciones comunes, como menús, acordeones y tabpanels por ejemplo, tienen scripts de código abierto disponibles para agregar rápidamente en el ARIA apropiado.
Cuándo usar ARIA
Aunque ARIA es una necesidad para los desarrolladores que crean interactividad personalizada para la Web, hay momentos en los que debe y no debe usarse.
Utilice ARIA:
- Cuando se usa HTML de una manera no estándar (por ejemplo, haciendo una casilla de verificación de un div)
- Cuando se necesita navegación dentro de la página (use puntos de referencia ARIA)
- Al crear widgets web como deslizadores, datepickers, tooltips, tabpanels, acordeones, etc.
No utilice ARIA:
- Cuando hay una manera de crear la misma interactividad con HTML estándar
- Cuando se usa HTML de una manera estándar (por ejemplo, un formulario HTML no necesita rol = “formulario” agregado porque tiene ese rol por defecto)
Atributos Clave de ARIA
Técnico: Aquí hay algunos atributos WAI-ARIA que se utilizan a menudo y son relativamente fáciles de entender.
aria-describedby
Este atributo es muy útil para agregar instrucciones o descripciones de elementos web para usuarios de AT. En el ejemplo de menú anterior, aria-describedby se utiliza para proporcionar instrucciones sobre el uso del menú, en ese caso haciendo referencia a un elemento de span oculto que contiene una descripción de la navegación del teclado.
También podría usarse para proporcionar información adicional sobre una característica en particular, como describir el formato de un campo de formulario de contraseña. Si la contraseña debe incluir números, letras y caracteres especiales, ese texto podría colocarse después del campo de contraseña en un elemento span y a través de su atributo ID, referenciado usando aria-describedby en el elemento de entrada para el campo de contraseña. Con el marcado de ejemplo a continuación, un lector de pantalla anunciaría la etiqueta para el campo de contraseña, seguido del formato para la contraseña. Sin hacer referencia al elemento format span, esta información puede pasar desapercibida para los usuarios de AT.
<label for="pass">Password</label> <input type="password" id="pass" aria-describedby="format"> <span id="format"> must contain numbers, letters, and special characters </span>
aria-live vs. rol de alerta
El atributo aria-live, a menudo referido como región viva, debe usarse en lugares donde la información se actualiza dinámicamente en una página, sin que la página misma se vuelva a cargar. De lo contrario es poco probable que los usuarios de AT noten que se están produciendo cambios El atributo aria-live se puede establecer en “cortés”, como se ve en el fragmento de código a continuación, en cuyo caso un lector de pantalla esperará hasta una interrupción en la salida del lector de pantalla para leer el contenido. O bien, aria-live se puede configurar en “asertivo” en cuyo caso un lector de pantalla interrumpirá lo que sea que se esté leyendo para leer los cambios dentro de la región en vivo. Las regiones en vivo son útiles para cosas como fuentes de noticias (por ejemplo, Twitter o sitios de noticias), aplicaciones de chat en vivo, transmisiones de redes sociales, banners rotativos u otro tipo de información de actualización automática.
<div id="news_feed" aria-live="polite"> //updating content goes here </div>
Por otro lado, el atributo role="alert”, a menudo llamado alerta ARIA, es un tipo especial de región viva asertiva, que debe usarse en lugares donde se presentan comentarios. Si, por ejemplo, un campo obligatorio en un formulario se deja vacío, y se inyecta un mensaje de error inmediatamente debajo del campo para indicar el error (como el que aparece en el fragmento de código a continuación), este tipo de mensajes de retroalimentación son buenos candidatos para las alertas ARIA. De lo contrario dichos mensajes pueden pasar desapercibidos para los usuarios de AT. O, después de enviar satisfactoriamente un formulario para registrarse, por ejemplo, el mensaje que aparece en la página después de enviar el formulario indicando que el registro fue exitoso, también sería un buen candidato para una alerta ARIA.
<div id="username_feedback" role="alert"> <p style="color:red;">Username field cannot be empty.</p> </div>
roles y hitos
ARIA proporciona una amplia gama de roles que se pueden usar para asignar una aplicación funcional a elementos HTML particulares. Ya te han presentado el rol de “alerta”, y los roles asociados con un menú de navegación.
Hay un conjunto particular de roles que se denominan puntos de referencia. Estos deben usarse cuidadosamente en una interfaz de usuario para definir regiones a lo largo de esa interfaz de usuario. Los lectores de pantalla pueden enumerar estos puntos de referencia y los usuarios pueden saltar a cualquiera de ellos para navegar directamente a un área relevante de una página.
Cuando se utilizan puntos de referencia, todas las áreas de una página deben estar contenidas dentro de una región marcada. Estas regiones, introducidas de nuevo en la Unidad 2 (2.4.1 Proporcionar formas de navegar), se presentan nuevamente aquí:
Lista completa de roles emblemáticos:
- banner: Asociado con el área de encabezado de una página. Sólo debe haber un punto de referencia de banner por página.
- complementario: Una sección de contenido que complementa el contenido principal pero que también conserva su significado cuando se separa del contenido principal. A menudo se usa con una región que contiene artículos publicitarios o promocionales alineados en el lado derecho de la página. Puede haber múltiples áreas definidas como complementarias.
- contentinfo: Contiene el contenido que normalmente se encuentra en el pie de página de una página, como declaraciones de derechos de autor y privacidad. Solo debe haber un hito contentinfo por página.
- form: Contiene elementos de entrada de formulario que pueden ser editados y enviados por el usuario. Múltiples elementos pueden tener el rol de formulario.
- main: El contenido principal de la página. Sólo debe haber un hito principal por página.
- navigation: Una colección de enlaces de navegación utilizados para navegar por el sitio o página. Puede haber múltiples elementos con la navegación de roles.
- search: Una herramienta de búsqueda.
- application: Representa una unidad funcional única, y los comandos del teclado son manejados por la aplicación en lugar del navegador o la propia tecnología de asistencia. Un reproductor de películas incrustado, un widget de calendario u otro software personalizado incrustado en el contenido web son ejemplos en los que se puede usar el rol de la aplicación. Este rol debe usarse con moderación, ya que puede crear cierta confusión para los usuarios del lector de pantalla cuando los comandos de teclado comienzan a funcionar de manera diferente.
tabindex
Aunque el atributo HTML tabindex existe desde HTML4, para su uso con elementos HTML específicos, con HTML5 se puede usar con cualquier elemento para agregar enfoque de teclado a elementos que normalmente no reciben foco, usando tabindex="0".
En el código para el menú de arriba, notarás tabindex en el elemento div de apertura. Normalmente los divs no reciben enfoque de teclado. En el caso del menú, es necesario agregar foco al div contenedor para que se lea la descripción a la que se refiere aria-describedby. Cuando el div recibe foco, el lector de pantalla anunciará “Menú principal: Use las teclas de flecha para moverse hacia la izquierda y hacia la derecha y hacia arriba y hacia abajo a través de los menús”.
aria-expandido
El estado aria-expanded se utiliza para los menús que tienen conmutadores para abrir y cerrar submenús, y también para informar a los usuarios de AT si un elemento de menú tiene un submenú, y si ese submenú está abierto o no.
El siguiente marcado es de un menú lateral, con conmutadores para abrir y cerrar secciones del menú. Notarás que aria-expanded está establecido en true, indicando a AT que un submenú está abierto siguiendo este elemento. Si el submenú estuviera cerrado, aria-expanded se establecería en false, actualizado dinámicamente por el JavaScript que controla la interactividad del menú lateral.
<span id="acc_tab_2170" class="navtoggler active" tabindex="0" aria-expanded="true" role="tab" aria-selected="false"> Archived Calendars </span>
aria-label
Cuando los formularios se formatean de una manera que impide el uso del elemento etiqueta HTML para asociar explícitamente una etiqueta con un campo de formulario, solo entonces se debe usar aria-label para etiquetar el elemento form. Si se puede usar etiqueta, se debe usar en lugar de la versión ARIA.
Un buen ejemplo de un caso en el que se podría usar aria-label es en un formulario de búsqueda. Estas formas generalmente no incluyen un elemento de etiqueta.
<form> <input type="text" id="search" aria-label="Enter search terms" /> </form>
aria-labeledby
Este atributo se puede utilizar con formularios no estándar para asociar una etiqueta o varias etiquetas con un campo de formulario. Por ejemplo, puede tener un formulario de entrada de datos dispuesto en una tabla, como el de la siguiente figura, en la que el contenido de las celdas de encabezado de tabla proporciona etiquetas para múltiples campos de entrada.
Considere la siguiente tabla, en la que el contenido de las celdas de encabezado proporciona etiquetas para cada campo de entrada de formulario en la columna siguiente. En el marcado que sigue a la figura, se puede ver cómo se ha utilizado aria-labelledby para asignar los valores en las celdas de encabezado como etiquetas para cada elemento de formulario.
| Nombre | Correo electrónico | Iniciar sesión |
|---|---|---|
John Smith | jsmith | |
Figura: Tabla utilizada para diseñar un formulario de entrada de datos.
<table> <tr> <th id="name_label">Name</th> <th id="email_label">Email</th> <th id="login_label">Login</th> </tr> <tr> <td><input type="text" id="name" aria-labelledby="name_label"/></td> <td><input type="text" id="email" aria-labelledby="email_label"/></td> <td><input type="text" id="loginl" aria-labelledby="login_label"/></td> </tr> … </table>
Si existe la opción de usar el elemento label sobre usar aria-labelledby, entonces se debe usar label. Si se utilizan tanto label como aria-labelledby en el mismo elemento de entrada, aria-labelledby anulará la etiqueta.