Grupo de botones de conmutación
Uso
Descripción general
El grupo de botones de conmutación es un elemento de control en el que el usuario selecciona una sola opción de entre un conjunto de dos a cuatro opciones mutuamente excluyentes. Este componente consta de varios botones de conmutación, con solo un botón activo o seleccionado en un momento dado.
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
- Al presentar a los usuarios de 2 a 4 opciones mutuamente excluyentes dentro de un formulario.
- Para alternar entre vistas.
Cuándo no se debe utilizar
- Cuando haya más de 4 opciones para que el usuario elija. En este caso, utilice el menú desplegable selección o cuadro combinado.
- Cuando haya entre 3 y 4 opciones en las experiencias móviles. En este caso, utilice el grupo de selección.
- Cuando solo haya una opción seleccionable. En este caso, use una casilla de verificación única.
Formato
Anatomía
El grupo de botones de conmutación consta de los siguientes elementos:
- Rótulo del grupo: Rótulo que describe el propósito del grupo de botones de conmutación.
- Botón de conmutación: Un botón individual dentro del grupo de botones de conmutación que representa una opción seleccionable.
- Rótulo del botón de conmutación: Rótulo de texto que describe la opción asociada al botón de conmutación.
Disposición, composición y alineación
Asegúrese de que todos los elementos de los botones de conmutación tengan el mismo ancho para mantener la coherencia e importancia visuales.
Prácticas recomendadas
Cuando se utiliza el grupo de botones de conmutación para alternar entre vistas, la acción de conmutación debe efectuar inmediatamente el cambio sin requerir acción adicional.
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.
Rótulos
Rótulo del grupo
Si bien no es estrictamente obligatorio incluir un rótulo principal de grupo, se recomienda hacerlo. En casos en los que el contexto es suficiente, el rótulo podría ser indefinido. A un grupo de botones de conmutación sin un rótulo visible se le debe dar un rótulo aria con aria-label o aria-labelledby. Este comunica el significado colectivo de todos los conmutadores.
Rótulos del botón de conmutación
Los rótulos de los botones de conmutación son obligatorios. Cada botón del grupo de conmutación debe tener un rótulo de texto claro y descriptivo para garantizar que los usuarios comprendan las opciones. Los rótulos deben ser concisos y garantizar la claridad. Trate de usar rótulos cortos y descriptivos que sean fáciles de leer y entender de un vistazo.
Uso de mayúsculas
El texto del rótulo aparece con mayúsculas como se usan en las oraciones. Escriba en mayúscula la primera letra de la primera palabra de una oración o frase y los nombres propios.
Para obtener orientación adicional sobre cómo implementar el uso de mayúsculas y minúsculas en las oraciones, consulte la sección Uso de mayúsculas, en la Guía de estilo de texto de la interfaz de usuario.
Comportamientos
Estados
Los botones de conmutación se comportan como botones y tienen los mismos estados interactivos. Para obtener más información, consulte la documentación del componente botón.
Interacciones
Ratón
Los usuarios seleccionan una opción de botón de conmutación haciendo clic en el botón deseado con el ratón.
Los usuarios solo pueden seleccionar un botón a la vez. Cuando un usuario elige una opción, la anterior se anula automáticamente.
Teclado
Cada botón puede recibir el foco a través del teclado. Utilice Tab y Shift+Tab para navegar entre los valores. Los usuarios pueden seleccionar cada botón con las teclas Spacebar y Enter.
Lector de pantalla
El grupo de botones de conmutación se asocia con el rótulo del grupo por medio del atributo WAI-ARIA aria-labelledby. El atributo aria-pressed alterna entre 'true' y 'false' para indicar el estado de cada botón. Esto ayuda a los usuarios ciegos y con discapacidad visual, ya que comunica el propósito del botón de conmutación.
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 el componente grupo de botones de conmutación en su aplicación:
- Asegúrese de que cada botón tenga un rótulo claro y conciso.
- Advierta a los usuarios si la selección de un componente de conmutación provocará un cambio en el contexto.