Saltar al contenido principal
LibreTexts Español

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

    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]”
    Lectura sugerida: Se puede encontrar información adicional sobre la creación de deslizadores accesibles en las Mejores Prácticas de WAI-ARIA.

    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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Define algunas instrucciones que describan cómo usar el control deslizante para los usuarios de lectores de pantalla.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Crear una <div>para las instrucciones del lector de pantalla.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Establezca dinámicamente el valor de aria-valuenow basado en el valor en el que se encuentra el pulgar deslizante.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    Elimina el acceso al teclado del campo de texto original.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    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.
    Nota:
    1. El foco se coloca en el control deslizante (el objeto visual que el usuario del mouse movería, también conocido como el pulgar).
    2. 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.

    Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

    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

    Miniaturas para el elemento incrustado “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


    This page titled 6.2: Deslizadores is shared under a CC BY-SA license and was authored, remixed, and/or curated by Digital Education Strategies, The Chang School.