Ejemplos de paginación
Además, dado que es probable que las páginas tengan más de una sección de navegación de este tipo, es recomendable proporcionar una etiqueta-aria descriptiva para & lt; nav & gt; para reflejar su propósito. . Por ejemplo, si el componente de paginación se utiliza para navegar entre un conjunto de resultados de búsqueda, una etiqueta adecuada podría ser aria-label = "Páginas de resultados de búsqueda" .
Estados desactivados y activos
Los enlaces de paginación se pueden personalizar para diferentes circunstancias. Utilice .disabled para los enlaces en los que no se puede hacer clic y .active para indicar la página actual.
Mientras que la clase .disabled usa pointer-events: none para intentar deshabilitar la funcionalidad de enlace de & lt; a & gt; s, esa propiedad CSS aún no está estandarizada y no tiene en cuenta la navegación con el teclado. Como tal, siempre debe agregar tabindex = "- 1" en los enlaces deshabilitados y usar JavaScript personalizado para deshabilitar completamente su funcionalidad.
Opcionalmente, puede cambiar los anclajes activos o deshabilitados por & lt; span & gt; , u omitir el ancla en el caso de las flechas prev / Siguiente, para eliminar la funcionalidad de clic y evitar el enfoque del teclado mientras se conserva estilos.
Paginación con color
Además, dado que es probable que las páginas tengan más de una sección de navegación de este tipo, es recomendable proporcionar una etiqueta-aria descriptiva para & lt; nav & gt; para reflejar su propósito. . Por ejemplo, si el componente de paginación se utiliza para navegar entre un conjunto de resultados de búsqueda, una etiqueta adecuada podría ser aria-label = "Páginas de resultados de búsqueda" .
Trabajar con iconos
¿Desea utilizar un icono o símbolo en lugar de texto para algunos enlaces de paginación? Asegúrese de proporcionar la compatibilidad adecuada con el lector de pantalla con los atributos aria .
Tamaño de la paginación
¿Te apetece una paginación más grande o más pequeña? Agregue .pagination-lg o .pagination-sm para tamaños adicionales.
Alineación
Cambie la alineación de los componentes de paginación con utilidades flexbox .