3.9: Actividad 3- Búsqueda del tesoro de WAI-ARIA

Última actualización
Guardar como PDF

Page ID: 152573

\( \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}}\)

Búsqueda del tesoro de WAI-ARIA

El objetivo general de la instrucción aquí es proporcionar las herramientas y el conocimiento necesarios para que la interactividad web sea accesible para los usuarios de lectores de pantalla. En esta actividad, utilizará ChromeVox y revisión de código para identificar WAI-ARIA utilizado en toda la página de inicio del Showcase de Auditoría de Accesibilidad Web.

Requerimientos

Aunque solo hemos tocado los detalles de WAI-ARIA, en esta actividad, estarás pasando algún tiempo examinando la página de inicio del sitio web de la Web Accessibility Auditing Showcase. Utilice una combinación de lo siguiente para determinar cómo se utilizan los elementos WAI-ARIA:

Prueba con ChromeVox para escuchar cómo suena WAI-ARIA con un lector de pantalla.
Revisar el código fuente.

Para obtener las calificaciones completas de esta actividad, enumere al menos cinco elementos habilitados para WAI-ARIA estáticos y cinco dinámicos en su respuesta. Incluya una breve descripción para cada uno. Aquí hay algunos ejemplos confeccionados de lo que podrías reportar en tus hallazgos:

aria-describedby: utilizado en el div exterior del menú lateral, para anunciar instrucciones sobre cómo funciona el menú lateral con un teclado
tabindex="0": se utiliza para dar acceso de teclado a los botones personalizados en la Encuesta de usuarios
role="menu”: utilizado para hacer que la lista de navegación principal aparezca como un menú a los lectores de pantalla

Finalmente, aquí está el sitio web de la Web Accessibility Auditing Showcase. Revisa solo la página de inicio.

Punto Clave: Hay WAI-ARIA estático y dinámico utilizado en esta página. Puede Ver Fuente para encontrar cualquier WAI-ARIA estático que se esté utilizando. Usa la herramienta Inspeccionar de tu navegador para encontrar WAI-ARIA dinámico. Interactuar con el sitio para producir cambios en la dinámica WAI-ARIA, y anotar esos cambios.

Nota: No todas las marcas relacionadas con Aria comienzan con el prefijo “aria-”. Escanee la documentación de WAI-ARIA introducida en esta unidad para obtener una lista de todas las posibles marcas WAI-ARIA que pueda encontrar. Además, no todas las mejoras de accesibilidad son WAI-ARIA. Por ejemplo, alt es una característica de accesibilidad del elemento HTML img. Puedes mencionar estas otras características de accesibilidad; sin embargo, no contarán para tu marca en esta actividad.

Rúbrica de Gradaje

Criterios	Puntos
Se listan al menos cinco instancias de WAI-ARIA estática que se utilizan en la página.	5.0 ptos
Se listan al menos cinco instancias de WAI-ARIA dinámico que se utilizan en la página.	5.0 ptos
Puntos Totales:	10.0