Botón

Los botones llaman la atención sobre las acciones importantes y permiten a los usuarios iniciar un cambio de un estado actual a un estado futuro. En todo InsureKidsNow.gov (IKN), seguimos principalmente las pautas del Sistema de Diseño Web de EE. UU. (USWDS) y de los Centros de Servicios de Medicare y Medicaid (CMS) para garantizar que nuestros botones sean accesibles, coherentes e intuitivos.

Especificaciones de estilo y color

Usamos colores específicos de la marca para nuestros botones principales con el fin de honrar nuestra identidad de marca, pero aparte de eso, nos esforzamos por seguir las pautas de diseño visual de USWDS. Usamos dos tipos principales de botones: Primario (sólido) y Secundario (con contorno), con personalizaciones específicas aplicadas a la paleta de colores, extraída de los colores de la marca IKN.

Botón principal (sólido)

El botón principal resalta la acción más importante de una página. Normalmente se reserva para acciones que permiten al usuario avanzar al siguiente paso de un proceso, como por ejemplo, enviar un formulario.

Botón secundario (contorno)

El botón secundario se emplea para acciones menos importantes o acciones que tienen lugar en la página actual. Se alinea funcionalmente con la variante de botón de contorno de USWDS.

Consistencia del estado de enfoque

Mantenemos el mismo color de contorno de enfoque que se emplea en el estilo de enfoque estándar de USWDS. Este indicador visual garantiza la accesibilidad para los usuarios de teclado. El color de contorno de enfoque actual de IKN es el #2491FF.

Guía de accesibilidad e implementación

Una implementación adecuada es vital porque las tecnologías de asistencia gestionan los botones y los enlaces de forma diferente.

Semántica de botones frente a enlaces

• Use el elemento HTML < button > si la función realiza alguna acción en la página, como enviar un formulario, abrir un cuadro de diálogo o cancelar una acción. Los usuarios de teclado pueden activar los elementos < button > usando la barra espaciadora o la tecla Intro.
• Use una etiqueta de anclaje < a > (enlace) si la función simplemente lleva a algún lugar (navegación). Los enlaces normalmente solo se activan pulsando la tecla Intro.

Estado de enfoque visible

Todos los botones deben mostrar un estado de enfoque claramente visible cuando los usuarios naveguen hacia ellos mediante el teclado. Esto es fundamental para la accesibilidad.

Área mínima de clic

El área mínima requerida para hacer clic o pulsar un botón debe ser de al menos 44x44 pixeles para ayudar a los usuarios con limitaciones de movilidad.

Claridad del lector de pantalla

Los lectores de pantalla deben anunciar la finalidad del botón y la acción resultante cuando se les enfoca. Para los botones con íconos que carecen de texto visible, se debe emplear un atributo aria-label o aria-labelledby para proporcionar un nombre accesible.

Especificaciones adicionales

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