3.4: WAI-ARIA estática frente a dinámica

Última actualización
Guardar como PDF

Page ID: 152562

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

Incluso si no usas JavaScript, hay una buena cantidad que puedes hacer con WAI-ARIA estática para mejorar la accesibilidad de un sitio web o aplicación web. Es posible que ya hayas recopilado de la discusión de estados y propiedades que algunos WAI-ARIA pueden escribirse directamente en el HTML de una página web (por ejemplo, propiedades y puntos de referencia). Otros necesitan actualizarse dinámicamente en función de la entrada del usuario o el contexto (por ejemplo, estados y algunas propiedades).

Algunos de los atributos estáticos de WAI-ARIA que es probable que utilice se enumeran a continuación, con sus descripciones del W3C.

Propiedades estáticas globales

aria-describedby: Identifica el elemento (o elementos) que describe el objeto.
aria-labelledby: Identifica el elemento (o elementos) que etiqueta el elemento actual.
aria-label: Define un valor de cadena que etiqueta el elemento actual.
aria-controls: Identifica el elemento (o elementos) cuyo contenido o presencia son controlados por el elemento actual.
aria-owns: Identifica un elemento (o elementos) para definir una relación parent/child visual, funcional o contextual entre elementos DOM donde la jerarquía DOM no puede ser utilizada para representar la relación.
aria-details: Identifica el elemento que proporciona una descripción detallada y ampliada del objeto.

A continuación se muestra un ejemplo de algunos de estos atributos en acción. Aunque este ejemplo necesitaría algunas secuencias de comandos para manejar la apertura y cierre del submenú, y actualizando dinámicamente aria-expanded a false cuando el submenú está cerrado, y actualizar el elemento activo al que se hace referencia en aria-activedescendant, puedes hacerte una idea de la semántica que se están aplicando para hacer que la lista anidada se anuncie como un menú. Mire o escuche la salida del lector de pantalla en el video que sigue al cuadro de código a continuación para comprender cómo se leen los atributos WAI-ARIA. Examine el código en el cuadro de código para entender qué WAI-ARIA se está utilizando para producir esa salida.

Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

¿Cómo funciona el marcado anterior?

Navegando con la tecla Tab, el enfoque primero va al div “menu_container”, que se hace enfocable por teclado con el atributo tabindex="0".
Allí el lector de pantalla lee el contenido del div “selector”, identificado por aria-details, describiendo para qué se utiliza el menú. Este div está oculto a la vista pero disponible para lectores de pantalla. Este div podría hacerse visible para que esté disponible para todos.
A continuación, las “ofrendas” UL recibe foco, también se hace enfocable con tabindex="0".
Ahí, el lector de pantalla lee el contenido del div “navhowto”, identificado por aria-describedby, explicando cómo navegar por el menú. Este div está oculto a la vista para la mayoría de los usuarios.
A continuación, usando las teclas de flecha como lo indica el div “navhowto”, el elemento de menú 'Inicio' toma el foco, anunciando “menubar expandido con submenú, Inicio, menú”. Probablemente un poco más detallado en este caso de lo que necesita ser, pero así es como ChromeVox maneja los elementos del menú.
Usando la tecla Flecha abajo, el enfoque se mueve al elemento del menú “Cursos”, anunciando “Cursos, menú expandido con submenú”. El atributo aria-haspopup es lo que hace que un lector de pantalla anuncie un submenú. aria-expanded="true” hace que el lector de pantalla anuncie que el menú está expandido.
Usando la Flecha Abajo, el enfoque se mueve hacia el submenú, anunciando “Menú con dos elementos, Economía, menuitem 1 de dos”. El submenú se anuncia como un menú propio, identificado agregando role="menu” al UL que contiene los dos elementos del submenú.
Por último, usando la Flecha Abajo, el lector de pantalla anuncia “Ciencias de la Computación, menuitem dos de dos”.

Aquí hay un video que muestra cómo ChromeVox leería el menú descrito anteriormente:

Video: Ejemplo de menú con WAI-ARIA (0:33)

Miniaturas para el elemento incrustado “Ejemplo de menú con WAI-ARIA”

Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/wafd/?p=272

La mayoría de los elementos WAI-ARIA descritos en la serie de pasos anteriores se pueden usar estáticamente escribiendo los atributos directamente en el HTML. El aria-activedescendant normalmente se actualizaría dinámicamente con script a medida que se seleccionan los elementos del menú. El aria-expanded también se actualizaría dinámicamente cambiando entre true y false cuando el submenú se alterna abierto o cerrado.

Aquí hay algunos atributos más estáticos de WAI-ARIA, que veremos con un poco más de detalle más adelante a medida que complete las actividades.

Atributos estáticos del widget

aria-haspopup: Indica la disponibilidad y el tipo de elemento popup interactivo, como menú o diálogo, que puede ser activado por un elemento.
aria-modal: Indica si un elemento es modal cuando se muestra
aria-readonly: Indica que el elemento no es editable sino que por lo demás es operable.
aria-required: Indica que se requiere la entrada del usuario en el elemento antes de que se pueda enviar un formulario.

Regiones estáticas vivas

aria-live: Indica que un elemento se actualizará y describe los tipos de actualizaciones que los agentes de usuario, las tecnologías de asistencia y el usuario pueden esperar de la región en vivo.
aria-atomic: Indica si las tecnologías de asistencia presentarán toda, o solo partes de, la región modificada en función de las notificaciones de cambio definidas por el atributo aria-relevant.
aria-relevant: Indica qué notificaciones activará el agente de usuario cuando se modifique el árbol de accesibilidad dentro de una región activa.

Toolkit: Para obtener una lista completa de roles, consulte la sección 1 en las Matrices de rol de ARIA.