4.4: Diálogos de alerta y mensaje de WAI-ARIA
- Page ID
- 152641
\( \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}\)Proporcionar comentarios después de que un usuario complete una acción es una característica crítica de accesibilidad. La retroalimentación puede ser un mensaje de error cuando algo ha salido mal. Adicionalmente, puede ser una confirmación o advertencia, después de lo cual un usuario tiene que tomar una decisión antes de continuar. O bien, podría ser retroalimentación de finalización que se presenta después de que se haya producido una acción en particular para indicar que fue exitosa.
Este último suele ser pasado por alto por los desarrolladores. Sin embargo, para las personas que usan un lector de pantalla, la notificación de que una acción fue exitosa puede ser tan importante como proporcionar mensajes de error. Cuando se proporciona retroalimentación de finalización, los usuarios del lector de pantalla no necesitan buscar en el contenido de la pantalla para estar seguros de que la acción que acaban de completar fue exitosa; el proceso puede llevar bastante tiempo.
En cada tipo de retroalimentación, es fundamental que los mensajes sean de fácil acceso. La mejor estrategia para hacer que los comentarios sean accesibles es usar las funciones de alerta o diálogo de alerta de WAI-ARIA. Estos son ambos tipos de regiones vivas. Cuando cambia el contenido del elemento contenedor con role="alert”, el contenido que aparece es leído automáticamente en voz alta por los lectores de pantalla. Una alerta WAI-ARIA tiene implícitas aria-live="assertive” y aria-atomic="true” (a cubrir con más detalle en la sección sobre regiones vivas). Esto significa que, cuando aparezca el mensaje, interrumpirá lo que sea que el lector de pantalla esté en medio de la lectura, y se leerá todo el contenido del elemento, a diferencia de solo el nuevo contenido agregado (i.e., aria-atomic="false”).
alerta vs. alertdialog
Los comentarios de error, advertencia y finalización generalmente se crearán con role="alert”, mientras que los comentarios de confirmación a menudo usarán role="alertdialog”. Utilice role="alert” cuando no se necesite ninguna entrada del usuario. Use role="alertdialog” cuando se espera la entrada del usuario, con foco enviado al diálogo. Al menos un elemento del diálogo debe poder enfocarse al usar role="alertdialog”.
Mira y escucha el siguiente video para entender cómo ChromeVox maneja las alertas de WAI-ARIA.
Video: Alertas WAI-ARIA (1:09)
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=308
Diálogos modales
Los diálogos modales interrumpen a los usuarios y requieren acción. Son apropiados cuando la atención de los usuarios necesita dirigirse hacia información importante.
Los diálogos modales se definen usando role="alertdialog” y aria-modal="true”. Tenga en cuenta qué se usa WAI-ARIA para los modales, y tenga en cuenta que cuando se muestre un diálogo modal, el enfoque debe enviarse al diálogo, y debe permanecer en el diálogo hasta que se complete cualquier interacción (por ejemplo, haciendo clic en el botón de confirmación) y el diálogo se cierre. Cuando se cierra el diálogo, el enfoque debe ser devuelto a la ubicación desde donde se abrió el diálogo.
Diálogos
Los diálogos se utilizan como lo son los diálogos modales, excepto que aún es posible interactuar con el otro contenido de la página. Estos se definen usando role="dialog”.