5.7: Barras de progreso
- Page ID
- 152612
\( \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}\)Las barras de progreso generalmente se implementan cuando un usuario tiene que esperar a que se complete un proceso, ya sea que esté esperando que finalice una carga, se compilen datos, se genere un informe o cualquier otro proceso que tarde más de unos segundos en completarse.
Para la mayoría de los usuarios, generalmente hay una representación visual del progreso, como una barra de estado o un indicador circular de progreso. A medida que avanza un proceso, un espectador puede estimar cuándo estará completo. Para los usuarios ciegos, sin embargo, la presentación visual no proporciona información útil, por lo que necesitarán poder recuperar el valor actual de alguna otra manera.
Roles, estados y propiedades en una barra de progreso
- role="barra de progreso”
- tabindex = [0|-1]
- aria-valuenow = “0"
- aria-valuemin = “0"
- aria-valuemax = “[valor máximo definir en opciones predeterminadas]”
- aria-describedby = “[ID de instrucción]”
- rol = “región”
- aria-live = “asertivo”
- aria-atomic = “adiciones”
- aria-hidden = “[verdadero|falso]”
El siguiente JSFiddle presenta un widget típico de barra de progreso. Revisa el marcado de JavaScript y HTML y prueba la barra de progreso presentada bajo la pestaña de resultados con ChromeVox para entender cómo funciona sin ninguna característica de accesibilidad agregada. Puedes trabajar en JSFiddle haciendo clic en el botón Editar en “JSFiddle” en la parte superior, derecha. Copia el código Accesibilidad/wai-aria que se describe a continuación para corregir la accesibilidad de la barra de progreso antes de completar la Actividad 7 en la página que sigue.
WAI-ARIA para hacer accesible la barra de progreso
En este ejemplo, hemos agregado WAI-ARIA a una barra de progreso, pero debido al soporte limitado para los atributos WAI-ARIA progressbar
por lectores de pantalla que no sean ChromeVox, también hay una solución con la función jQuery .data ()
para generar el valor actual para usuarios de JAWS o NVDA lectores de pantalla. Puede consultar el archivo ik_progressbar_data.js para la solución alternativa. No obstante, para la Actividad 7, asegúrese de comenzar desde el archivo ik_progressbar.js para el envío de la asignación. Para experimentar con la versión .data ()
del archivo JavaScript de la barra de progreso, puede ajustar la referencia al archivo en el archivo progressbar.html.
Primero, como es típico, crear algunas instrucciones que describan cómo operar la barra de progreso con un lector de pantalla y teclado y agregarlas a las opciones predeterminadas.
Actualiza la función init ()
para agregar el WAI-ARIA requerido. Primero establece tabindex=” -1"
para estar seguro de que la barra en sí no es focalizable por el teclado por defecto, y asocia la barra con las instrucciones para que cuando la barra reciba el foco se lean las instrucciones. Establezca algunos valores predeterminados para aria-valuemin
, aria-valuenow
y aria-valuemax
. Además, agregue acceso de teclado a la barra con una referencia on (keydown)
a la función onKeyDown ()
, que se describe a continuación.
Agregue a las notificaciones <div>atributos de región en vivo para que cuando se presione Espacio/Intro y se agregue el porcentaje de progreso, o si “¡Cargando completado!” se agrega, son leídos en voz alta por el lector de pantalla.
Finalmente, cree el <div>con instrucciones referenciadas por su ID con
aria-describedby
agregado a la barra <div>y ocultarlo por defecto.
Reemplace los datos (value)
en la función getValue ()
, utilizada para recuperar el valor actual de la barra de progreso cuando se presionan las teclas Barra espaciadora o Enter, con un atributo aria-valuenow
. Esto reemplaza el .data (valor)
necesario para funcionar con lectores de pantalla que no sean ChromeVox.
En la función setValue ()
, agregue un tabindex=” -1"
para eliminar el enfoque del teclado de la barra cuando se alcance el valor máximo y para agregar el mensaje “Cargando Completo” a la notificación<div>. Finalmente, agregue el valor actual del progreso al presionar una tecla o el valor máximo (si el progreso está completo) a un atributo
aria-valuenow
. Esto reemplaza la solución alternativa .data ()
, que es necesaria para funcionar con lectores de pantalla que no sean ChromeVox.
Adición de operabilidad del teclado
El acceso al teclado para una barra de progreso es relativamente simple. Por lo general, no hay interacción con el mouse o el teclado. Generalmente uno espera y, cuando se completa el progreso, continúa con alguna otra acción. Para los usuarios de lectores de pantalla, sin embargo, necesitarán poder obtener el valor de progreso actual usando una pulsación de teclas.
Para permitir que se recupere el valor actual, configura los controles de teclado Enter y Barra espaciadora con la función OnKeyDown ()
. Esto también activa la función notify ()
. Cuando se presiona una de esas teclas, emite el valor a la notificación <div>que hemos configurado como región en vivo.
Barra de progreso accesible en acción
Mira el siguiente video para ver cómo ChromeVox interactúa con una barra de progreso. Cuando se presiona el botón Ejecutar demostración, se proporcionan instrucciones sobre cómo anunciar el progreso. Al presionar la barra espaciadora o la tecla Enter se anuncia el progreso porcentual en un momento dado. Cuando el progreso haya terminado, se anuncia “Loading Complete”. Apunta a que la barra de progreso que actualices en la actividad en la siguiente página opere y anuncie como la del video.
Video: Barra de progreso accesible