Paginación
La paginación divide listas largas o grandes cantidades de contenido en páginas separadas. Este componente incluye controles de navegación, como botones de anterior y siguiente, que permiten a los usuarios desplazarse entre páginas.
InsureKidsNow.gov sigue las pautas proporcionadas por el Sistema de Diseño Web de los Estados Unidos (USWDS) para componentes como la paginación, manteniendo la autonomía sobre nuestra marca y colores.
- El color de fondo del indicador de página actual será#0D76AD y #17415F al pasar el cursor por encima.
- Al pasar el cursor sobre un indicador de página que no sea la página actual, el color del borde debería ser #0D76AD.
- El color para el texto y los símbolos es #0D76AD.
- El color del enlace visitado es #664166.
Paginación IKN
Anatomía y especificaciones visuales
Existen elementos específicos que requieren un estilo coherente, usando la paleta de colores y los estándares tipográficos definidos por IKN.
El componente de paginación incluye varias partes clave:
- Enlaces de página: enlaces individuales numerados que permiten el atajo a una página específica.
- Controles de navegación: enlaces o botones para navegar a la página anterior o siguiente.
- Indicador de página actual: elemento visual que resalta la página que el usuario está viendo en ese momento.
- Puntos suspensivos: se emplean para representar un rango de páginas que se omiten de la visualización inmediata para ahorrar espacio.
Notas de estilo visual
Todos los elementos del componente de paginación deben cumplir con las especificaciones fundamentales de IKN:
- Uso del color: los enlaces y los estados activos deben incorporar el color azul de la marca IKN (#007EAD), que es el color principal de la marca. Los colores del texto deben basar en la paleta neutra, como el gris oscuro (#363636) para el texto estándar.
- Tipografía: todo el texto dentro del componente debe ajustar a los estándares tipográficos definidos por IKN.
- Estado de enfoque: el indicador visual que garantiza la accesibilidad para los usuarios de teclado debe usar el color de contorno de enfoque IKN definido, que es #2491FF.
- Espaciado: use las unidades de espaciado IKN para lograr un relleno y márgenes uniformes alrededor y entre los elementos de navegación, lo que garantiza la legibilidad y un tamaño adecuado para los elementos táctiles. El botón secundario se emplea para acciones menos importantes o acciones que ocurren en la página actual. Su funcionalidad coincide con la de la variante de botón de Contorno del USWDS.
Guía de accesibilidad e implementación
Dado que IKN es un sitio web gubernamental, la accesibilidad es un estándar de diseño fundamental.
- Navegación mediante teclado: los usuarios deben poder navegar por todos los elementos de la paginación usando los controles estándar del teclado (como la tecla Tab). La navegación mediante teclado es una herramienta fundamental de accesibilidad.
- Gestión del enfoque: debe mostrar un indicador visual claro del enfoque al navegar mediante el teclado. El enfoque debe permanecer en el estado actual del componente hasta que el usuario navegue a otra página.
- Claridad para lectores de pantalla: los elementos del componente deben incluir los atributos y las etiquetas ARIA necesarios para identificar correctamente el componente y describir la página actual a los lectores de pantalla.
Especificaciones adicionales
Para obtener información adicional sobre especificaciones, pautas, accesibilidad y uso, consulte la sección de paginación en el sitio web de USWDS:
USWDS - Paginación