Conmutador
Uso
Descripción general
Un conmutador componente que alterna entre dos estados posibles: activo e inactivo. El conmutador se utiliza para opciones globales, como en las páginas de configuración, cuando el usuario debe activar o desactivar algo.
Para obtener una guía detallada sobre cuándo utilizar este componente, examine el siguiente árbol de decisiones del componente de la interfaz de usuario.
Cuándo se debe utilizar
Para alternar el estado de una aplicación entre dos opciones, como activado/desactivado y activo/inactivo. Asegúrese de que los conmutadores surtan efecto inmediatamente y no requieran ninguna acción adicional.
Cuándo no se debe utilizar
- Para una selección de verdadero/falso dentro de un formulario. En su lugar, use el grupo de selección o el grupo de botones de conmutación.
- Si se requiere presionar un botón para aplicar un ajuste. En su lugar, use la casilla de verificación.
Formato
Anatomía
El conmutador consta de los siguientes elementos:
- Rótulo: Texto conciso que describe la función específica o la configuración de los controles de conmutación.
- Pista: Camino horizontal a lo largo del cual los usuarios deslizan el control del conmutador.
- Control: Elemento móvil que los usuarios deslizan a lo largo de la pista para alternar el estado del conmutador.
Ubicación de los rótulos
El rótulo para el conmutador puede aparecer en la parte superior (predeterminada y recomendada) o a la izquierda de la entrada misma.
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.
Texto del rótulo
Los rótulos deben comunicar claramente qué función o configuración controla el conmutador, como “Guardar automáticamente”.
Texto de ayuda
Los conmutadores son un control de selección bien conocido y, por lo general, no requieren una explicación adicional. Es decir, no es necesario indicar a los usuarios que “alternen” el conmutador.
Utilice un texto de ayuda permanente cuando la información sea esencial para comprender el funcionamiento del conmutador y deba estar siempre visible.
Comportamientos
Estados
El conmutador tiene dos estados principales: no seleccionado y seleccionado.
| Ilustración | Estado | Descripción |
|---|---|---|
 | No seleccionado | Indica el estado “desactivado”. |
 | Seleccionado | Indica el estado “activado”. |
Además de los estados no seleccionado y seleccionado, los conmutadores también tienen estados para habilitado, con cursor encima, activo, en foco y deshabilitado.
| Ilustración | Estado | Descripción |
|---|---|---|
 | Habilitado | Comunica al usuario que el elemento está habilitado para la interacción (estado predeterminado). |
 | Con cursor encima | Indica que el usuario ha colocado un cursor sobre el elemento. |
 | Activo | Indica que el usuario está haciendo clic o tocando el elemento. |
| En foco | Proporciona retroalimentación que indica que el usuario resaltó el elemento, normalmente mediante un método de entrada como teclado o voz. El estado en foco se puede utilizar con todos los demás estados (incluso deshabilitado). |
 | Deshabilitado | Comunica al usuario que el elemento está deshabilitado y que no es interactivo. El elemento está atenuado. |
Interacciones
Ratón
Un usuario interactúa con un componente conmutador haciendo clic en él con un ratón para alternar entre sus estados activado y desactivado. Para indicar el nuevo estado, la pista cambia de color y el controlador cambia de posición.
Teclado
El componente conmutador puede recibir el foco con el teclado. La clave Space activa y desactiva el conmutador.
Lector de pantalla
El conmutador es de tipo “entrada” y también incluye el rol aria de 'switch'. Deriva su nombre accesible del valor del rótulo de texto e incluye este nombre como parte de un atributo aria-label. Cambiar el valor del rótulo en Storybook también cambia el valor de aria-label. El valor de aria-checked cambia de 'true' a 'false' dependiendo del estado del elemento; este cambio es expresado por los lectores de pantalla como “activado” y “desactivado”, respectivamente.
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.
Cuando utilice este componente dentro de su aplicación, asegúrese de que el texto del rótulo del interruptor sea significativo y comprensible.