4.9: Actividad 4- WAI-ARIA Hitos y Alertas
- Page ID
- 152629
\( \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}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)Puntos de referencia y alertas de WAI-ARIA
Se agregaron puntos de referencia a la especificación WAI-ARIA como una forma de proporcionar una navegación fácil dentro de una página web para usuarios de tecnología de asistencia. Antes de los puntos de referencia, a menudo se usaban enlaces de derivación (y todavía lo son) que permitirían a un usuario lector de pantalla saltar desde la parte superior de una página, generalmente, a un ancla colocada estratégicamente más abajo en la página. En la primera parte de esta actividad agregarás un conjunto de roles emblemáticos a una interfaz de usuario (UI) de un sitio web.
Las regiones vivas se introdujeron en WAI-ARIA como una forma de presentar contenido cambiante a los usuarios de tecnología de asistencia. Los mensajes de retroalimentación son buenos candidatos para una región en vivo, por lo que el contenido de un mensaje de retroalimentación se lee al usuario automáticamente cuando aparece sin necesidad de buscar en la página para determinar si una acción se completó correctamente o, alternativamente, si una acción produjo un mensaje de error. El rol de “alerta” de WAI-ARIA es un tipo de región viva ideal para presentar mensajes de retroalimentación de error o éxito. En la Parte 2 de esta actividad, agregarás role="alert”
a los mensajes de error cuando se envíe el formulario del archivo landmarks.html con campos obligatorios faltantes o no válidos, y cuando se envíe con éxito.
En tu copia de los archivos de actividad, abre y edita el archivo landmarks.html. Cuando hayas completado ambas partes de la actividad, vuelve a enviar el archivo a tu repositorio de GitHub Pages o subirlo a la ubicación que hayas elegido para publicar tus archivos de actividad para marcar o enviar una URL de GitHack.
Requerimientos
Parte 1: Monumentos
Agregue los roles de hito apropiados a los elementos dentro de la página. Asegúrese de que todo el contenido de la página esté contenido dentro de una región marcada y, dependiendo del tipo de contenido de la página, aplique el punto de referencia correcto para ese tipo de contenido.
Cuando haya agregado todos los puntos de referencia apropiados, pruebe el archivo con ChromeVox (teclas: Cvox + L + punto y coma) para asegurarse de que todos estén funcionando correctamente.
Parte 2: Mensajes de error y comentarios en vivo
El formulario de la página tiene tres campos obligatorios. Si envía el formulario sin entrada válida para estos campos, se genera un mensaje de error debajo de cada campo que tiene entrada no válida. Agrega role="alert”
al primer mensaje de error, así, cuando aparece, ChromeVox lo lee automáticamente junto con el envío de foco al primer campo en error para que pueda ser corregido. Haga lo mismo para el mensaje de comentarios que aparece cuando se envía el formulario sin errores.
CONSEJO: busque en join.lib.js en los archivos de actividad.
Rúbrica de Gradaje
Criterios | Puntos |
---|---|
Contenido Contenido: Todo el contenido está contenido dentro de una región marcada. | 2.0 ptos |
Puntos de referencia correctos: Se han utilizado hitos apropiados para cada región. | 3.0 ptos |
Mensajes anunciados: El primer mensaje de error/Feedback se anuncia cuando se envía el formulario con y sin entrada no válida. Cuando se corrige el primer campo requerido, se anuncia el siguiente mensaje de error/Feedback, y así sucesivamente, por lo que cualquier campo con contenido no válido se lee en voz alta. | 4.0 ptos |
Hitos Distinguibles: Las regiones emblemáticas con el mismo papel son distinguibles entre sí. | 1.0 ptos |
Puntos Totales: | 10.0 |