Casilla de verificación

El componente de casilla de verificación permite a los usuarios seleccionar uno o más elementos de una lista de opciones. También puede usarse para una única opción que se puede activar o desactivar, como por ejemplo, aceptar los términos del servicio.

Las casillas de verificación se usan cuando los usuarios pueden seleccionar cualquier número de opciones de una lista, incluyendo ninguna, todas o algunas. Si los usuarios solo pueden seleccionar una opción de una lista, use botones de opción en su lugar. Cada casilla de verificación funciona de forma independiente de las demás en una lista, lo que permite realizar selecciones múltiples.

Imagen de marca de IKN:

Aunque seguimos las pautas de USWDS, para el color de fondo del componente de casilla de verificación seleccionado, empleamos el color azul de la marca IKN: #0D76AD.

Anatomía y especificaciones visuales

Una casilla de verificación es un componente sencillo, pero sus partes deben diseñarse e implementarse correctamente para garantizar una experiencia de usuario impecable.

Etiqueta: El texto que describe la opción. Se ubica junto al campo de entrada de la casilla de verificación y es esencial para el contexto y la accesibilidad.

Entrada de casilla de verificación: la casilla cuadrada con la que los usuarios interactúan para seleccionar o deseleccionar una opción. Proporciona una indicación visual de su estado actual (marcada o desmarcada).

Texto de ayuda (opcional): texto complementario que se puede colocar debajo de la etiqueta para proporcionar orientación o aclaración adicional sobre la opción.

Para mantener una interfaz coherente, todas las casillas de verificación deben ajustarse a los siguientes estados visuales.

Estado predeterminado: en su estado predeterminado, la casilla de verificación está desmarcada. Aparece como un cuadrado vacío con un borde gris estable de 1 pixel y un fondo blanco.

Estado seleccionado: al seleccionarlo, aparece un ícono de marca de verificación dentro del recuadro. El ícono es de color oscuro y de alto contraste para que sea claramente visible.

Estado al pasar el cursor: cuando un usuario pasa el cursor sobre la casilla de verificación y su etiqueta, el color del borde de la casilla se oscurece para indicar que es interactiva.

Estado de enfoque: cuando un usuario navega a una casilla de verificación mediante el teclado, debe aparecer un contorno azul estable de 2 pixeles (#0D76AD) alrededor del campo de entrada de la casilla y su etiqueta. Este contorno visible es fundamental para los usuarios de teclado y constituye un requisito clave de accesibilidad.

Estado deshabilitado: una casilla de verificación deshabilitada no es interactiva. Tiene un fondo y un borde gris claro, y su etiqueta tiene una opacidad reducida. Este estado puede ser marcado o desmarcado, pero el usuario no puede modificarlo.

Estado de error: cuando se requiere marcar un grupo de casillas de verificación y el usuario no realiza ninguna selección, se produce un error. Debería aparecer un mensaje de error encima del grupo que describa el problema.

Guía de accesibilidad e implementación

Garantizar la accesibilidad de las casillas de verificación es fundamental para todos los usuarios. Las siguientes pautas son obligatorias para cualquier implementación en InsureKidsNow.gov.

Conectar etiquetas mediante programación. Cada <input type="checkbox"> debe tener una < label > correspondiente. El atributo `for` de la etiqueta debe coincidir exactamente con el ID del input. Esto crea un vínculo programático que permite a los lectores de pantalla anunciar la etiqueta cuando la casilla de verificación recibe el foco.

Aumentar el área en la que se puede hacer clic. La etiqueta en sí debe formar parte del área en la que se puede hacer clic. Vincular la etiqueta y el campo de entrada con `for` e `id` logra esto, facilitando la selección del elemento, especialmente para usuarios con discapacidades motoras o que emplean dispositivos móviles.

Agrupar casillas de verificación relacionadas. Al presentar una lista de opciones relacionadas, estas deben agruparse dentro de un elemento ` < fieldset > `. El elemento ` < legend > ` se debe usar para proporcionar una pregunta o indicación descriptiva clara para todo el grupo de casillas de verificación. Esto brinda a los usuarios de lectores de pantalla el contexto necesario antes de que encuentren las opciones.

Admite la navegación mediante teclado. Todas las casillas de verificación deben poder operar únicamente con un teclado.

Tabulador: mueve el enfoque a la siguiente casilla de verificación en la secuencia.

Barra espaciadora: activa o desactiva la selección de la casilla de verificación actualmente seleccionada (marcada o desmarcada).

Indique claramente las opciones requeridas. Si se requiere seleccionar al menos una opción de un grupo, indique este requisito en el texto de la del < legend > grupo de casillas de verificación. Por ejemplo: "Seleccione todas las opciones que correspondan (obligatorio)".

Especificaciones adicionales

Para obtener información adicional sobre especificaciones, pautas, accesibilidad y uso, consulte el componente de casilla de verificación en el sitio web de USWDS:

USWDS - Casilla de verificación