Control deslizante
Uso
Descripción general
El control deslizante es un elemento de control en el que el usuario selecciona un solo valor o un intervalo de valores de entre un conjunto fijo de opciones. Proporciona una representación visual de un intervalo ajustable de valores o contenido. Los usuarios pueden elegir un valor específico moviendo un controlador horizontalmente a lo largo de una pista.
Cuándo se debe utilizar
- Para seleccionar un solo valor o un intervalo de valores de entre un conjunto fijo de opciones.
- Cuando al usuario no le importe el valor preciso, sino solo el intervalo aproximado.
Cuándo no se debe utilizar
- Para ajustar los campos numéricos en una pequeña cantidad discreta. En su lugar, utilice el selector numérico.
- Para seleccionar un valor preciso. En su lugar, utilice la entrada de número.
Fuente: Nielsen Norman
Formato
Anatomía
El control deslizante consta de los siguientes elementos:
- Rótulo del control deslizante: Texto que describe el propósito del control de selección.
- Valor mínimo: El valor más bajo en el intervalo que el usuario debe seleccionar.
- Pista rellena: Indicador visual que resalta el intervalo seleccionado o el progreso a lo largo del control deslizante desde el punto de inicio hasta la posición actual.
- Controlador: Ícono que el usuario puede mover al punto deseado en el intervalo de valores. Los valores seleccionados aparecen debajo del controlador del control deslizante.
- Pista: Línea horizontal que representa un intervalo de valores que los usuarios pueden seleccionar.
- Valor máximo: El valor más alto en el intervalo que el usuario debe seleccionar.
Ubicación de los rótulos
Muestre los rótulos de los controles deslizantes encima o al lado del control deslizante, en lugar de debajo del control, para que permanezcan visibles mientras el usuario selecciona un valor.
Composición, disposición y orientación
Para los idiomas de izquierda a derecha (por ejemplo, idiomas escritos en alfabeto latino, cirílico, griego moderno, índico y del sudeste asiático), el valor mínimo aparece en el extremo izquierdo de la pista y el valor máximo está en el extremo derecho.
Para los idiomas de derecha a izquierda (por ejemplo, idiomas escritos en árabe y hebreo), la orientación de los valores se invierte.
Contenido
Pautas generales de redacción
- En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
- Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
- Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
- Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
- Las palabras y las oraciones deben ser breves.
Inclusión de un rótulo
Use el rótulo del control deslizante para indicar qué valor está cambiando el usuario. El rótulo debe ser corto y conciso. Limítelo a una sola línea de texto.
Uso de mayúsculas al igual que en las oraciones
Los rótulos de los controles deslizantes usan mayúsculas y minúsculas en la primera palabra de una frase y nombres propios y no llevan puntuación.
Para obtener más información sobre cómo implementar el uso de mayúsculas y minúsculas, consulte la Guía de estilo de texto de la interfaz de usuario.
Comportamientos
Estados
El control deslizante tiene cinco estados visuales, que sirven para comunicar el estado: habilitado, con cursor encima, activo, en foco y deshabilitado.
| Ilustración | Estado | Descripción |
|---|---|---|
 | Habilitado | Indica al usuario que el elemento está habilitado para la interacción. |
 | Con cursor encima | Indica que el usuario ha colocado el cursor sobre el controlador del control deslizante. |
 | En foco | Indica que el usuario está haciendo clic en el controlador del control deslizante. |
 | Activo | Indica que el controlador del control deslizante tiene el foco y que se puede usar el teclado para seleccionar un valor. El estado en foco se puede utilizar con todos los demás estados (incluso deshabilitado). |
 | Deshabilitado | Comunica al usuario que el elemento no es interactivo. |
Interacciones
Ratón
Los usuarios pueden seleccionar un valor numérico moviendo el control deslizante con el ratón. De forma predeterminada, el valor cambia en incrementos de uno.
Use la propiedad step para controlar los incrementos en los que el valor cambia a medida que el usuario mueve el controlador. Cuando se establece la propiedad step, el valor del control deslizante solo cambiará a valores que sean múltiplos del valor de paso especificado. Por ejemplo, si el control deslizante tiene un intervalo de 0 a 100 y establece la propiedad step en 5, el control deslizante solo permitirá al usuario seleccionar valores que sean múltiplos de 5 (0, 5, 10, 15, ..., 100). Esto significa que el controlador deslizante saltará de uno a otro de estos valores específicos a medida que el usuario lo arrastre.
Teclado
El control deslizante puede recibir el foco con el teclado. Los valores se pueden aumentar y disminuir usando las teclas de flecha.
Lector de pantalla
Este componente incluye el rol WAI-ARIA de “control deslizante” y el atributo aria-orientation de 'horizontal' para comunicar su propósito y orientación. El controlador deslizante y su rótulo están asociados a través de aria-labelledby. Del mismo modo, los atributos de aria-valuemin, aria-valuemax y aria-valuenow se incluyen para proporcionar significado a los usuarios de lectores de pantalla. Los cambios en el valor se comunican por medio de role='alert'.
Accesibilidad
Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:
- La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
- El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
- El elemento se puede operar con teclado, así como con mouse.
- Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.
El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.
Asegúrese de revisar la guía a la que se hace referencia en las Prácticas de creación de WAI-ARIA para controles deslizantes.