6.2: Deslizadores
- Page ID
- 152593
\( \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}\)Los deslizadores generalmente permiten a los usuarios seleccionar un valor entre los valores mínimo y máximo arrastrando un pulgar deslizante a lo largo de una barra deslizante o pista.
Funciones, estados y propiedades de WAI-ARIA utilizados en un control deslizante
- tabindex= "[0 | -1]”
- role="slider”
- aria-valoremin= "[número]”
- aria-valuemax= "[número]”
- aria-valuenow= "[número]”
El siguiente JSFiddle presenta un widget de control deslizante típico. Revise el marcado JavaScript y HTML. Pruebe el control deslizante presentado bajo la pestaña Resultado con ChromeVox para entender cómo funciona sin que se agreguen características de accesibilidad. Puedes trabajar en JSFiddle haciendo clic en “Editar en JSFiddle” en la parte superior, a la derecha, copiando el código de Accesibilidad/Wai-Aria que se describe a continuación para corregir la accesibilidad del deslizador antes de completar la Actividad 8 en la página que sigue.
Define algunas instrucciones que describan cómo usar el control deslizante para los usuarios de lectores de pantalla.
Agrega un tabindex="0" para que el teclado del pulgar deslizable sea enfocable. Asigne un role="slider” al cuadro de texto para que se anuncie como un control deslizante en lugar de un campo de entrada de texto. Establezca los valores aria-valuemin, aria-valuemax y aria-valuenow, y haga referencia a las instrucciones con aria-describedby. Usando .on ('keydown') haga referencia a la función OnKeyDown para agregar operabilidad del teclado al control deslizante.
Crear una <div>para las instrucciones del lector de pantalla.
Establezca dinámicamente el valor de aria-valuenow basado en el valor en el que se encuentra el pulgar deslizante.
Elimina el acceso al teclado del campo de texto original.
Adición de operabilidad del teclado
Las prácticas de autoría de WAI-ARIA definen la funcionalidad de teclado recomendada para un control deslizante, que se enumeran
Interacción con el teclado para un control deslizante
- Flecha derecha: Aumenta el valor del control deslizante en un paso.
- Flecha arriba: Aumenta el valor del control deslizante en un paso.
- Flecha izquierda: Disminuye el valor del control deslizante en un paso.
- Flecha abajo: Disminuye el valor del control deslizante en un paso.
- Inicio: Establezca el control deslizante en el primer valor permitido en su rango.
- Fin: Establezca el control deslizante en el último valor permitido en su rango.
- Page Up (Opcional): Incremente el control deslizante en una cantidad mayor que el cambio de paso realizado por Flecha Arriba.
- Page Down (Opcional): Decremente el control deslizante en una cantidad mayor que el cambio de paso realizado por Flecha Abajo.
- El foco se coloca en el control deslizante (el objeto visual que el usuario del mouse movería, también conocido como el pulgar).
- En algunas circunstancias, invertir la dirección del cambio de valor para las teclas especificadas anteriormente (por ejemplo, tener Flecha Arriba disminuya el valor) podría crear una experiencia más intuitiva.
Fuente: W3C WAI-ARIA 1.1 Mejores Prácticas
Añadir manejo de eventos de teclado a nuestro widget de control deslizante. En nuestro caso, agregaremos los controles de flecha izquierda y derecha para mover el pulgar deslizante a lo largo de la barra deslizante, y los controles Fin y Inicio para mover el pulgar deslizante entre el inicio y el final de la barra deslizante.
Slider Accesible en Acción
Mira el siguiente video de ChromeVox interactuando con un control deslizante. Las teclas de flecha se utilizan para mover el pulgar deslizante a lo largo de la barra deslizante, y las teclas Inicio y Fin se utilizan para mover el pulgar deslizante entre el inicio y el final de la barra deslizante. Puede notar que ChromeVox interpreta “min” como “minuto” en lugar de min y max que definen el rango a lo largo de la barra deslizante. Apunta a que el slider que actualices en la actividad que sigue en la siguiente página opere y anuncie como el del video.
Video: Slider Accesible
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=349