Paginado

Predeterminado (default)

Estado predeterminado de botones del paginado en una interfaz.

Sobre (hover)

Estado que adopta cada botón del paginado cuando un cursor pasa sobre él, cambiando su apariencia para indicar su interactividad a la persona usuaria.

En Foco (focus)

Es un principio de accesibilidad que asegura que cualquier elemento interactivo en una interfaz sea claramente visible cuando recibe la atención del usuario, especialmente al ser navegado con el teclado. En Obelisco se utiliza un borde o anillo (focus ring) por fuera del componente en un color distintivo.

Seleccionado

Estado que adopta el número de página seleccionado en el paginado, indicando visualmente que es la página en la que la persona usuaria se encuentra navegando.

Deshabilitado (disabled)

Estado que indica que los botones no están disponibles para la interacción, lo que significa que no pueden activarse.

La separación horizontal entre botones del paginado es de 8px.

El componente de Paginado está construido para ser accesible mediante navegación por teclado y reconocible por lectores de pantalla, comunicando sus diferentes estados de forma clara.

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Además, con el enter, puede accionar los elementos sobre el item en el que la persona está posicionada.

La etiqueta que engloba al paginado debe ser un <nav></nav>, el cual necesita un atributo aria-label que comunique que el componente es de paginación. Dentro de él debería tener una lista sin enumerar, <ul></ul>, con sus respectivos items, <li></li>.

Cada etiqueta <a></a> debe estar acompañada de aria-label indicando la página a la que se redirigía, por ejemplo: "Ir a la página 7".

Interactividad limitada

Cuando un botón está deshabilitado, por ejemplo el botón "Anterior", es importante indicarlo correctamente mediante el atributo "disabled". Además, debe evitarse que el foco del teclado llegue al componente, y debe comunicarse su estado a tecnologías de asistencia.

Funcionalidad técnica

El elemento que esté seleccionado, es decir, que marque la página en la que se encuentra la persona usuaria deberá tener activado el atributo aria-current="page".

<nav aria-label="Ejemplo de paginado numerado inicial">
  <ul class="pagination">
    <li class="page-item" style="opacity: 0;">
      <span class="page-link">
        <span class="page-previous-icon" aria- 
          hieden="true"></span>
        <span class="page-previous-text">Anterior</span>
      </span>
    </li>
    <li class="page-item active"><a class="page-link" href="#">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item no-events"><span class="page-link">...
     </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">10</a></li>
    <li class="page-item">
      <a class="page-link" href="#">
        <span class="page-next-text">Siguiente</span>
        <span class="page-next-icon" aria-hidden="true"></span>
      </a>
    </li>
  </ul>
</nav>

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

Cuando la secuencia en que se presenta el contenido afecta su significado, se puede determinar mediante programación una secuencia de lectura correcta.

El color no se utiliza como el único medio visual para transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento visual.

La presentación visual de los siguientes elementos tiene una relación de contraste de al menos 3:1 con respecto a los colores adyacentes: componentes de la interfaz de usuario; objetos gráficos.

No se produce pérdida de contenido ni funcionalidad al configurar todo lo siguiente y no cambiar ninguna otra propiedad de estilo: altura de línea establecida en 1,5; espaciado después de párrafos establecido al menos en 2 veces el tamaño de fuente; espaciado entre letras establecido al menos en 0,12 veces el tamaño de fuente; espaciado entre palabras establecido al menos en 0,16 veces el tamaño de fuente.

La presentación visual del texto y las imágenes del texto tiene una relación de contraste de al menos 4,5:1.

Toda la funcionalidad del contenido se puede operar a través de una interfaz de teclado.

Si el foco del teclado se puede mover a un componente de la página usando una interfaz de teclado, entonces el foco se puede mover lejos de ese componente usando solo una interfaz de teclado.

Si hay limitaciones de tiempo establecidas por el contenido, se debe cumplir una de las siguientes condiciones: desactivar, ajustar, extender, excepción en tiempo real, excepción esencial, excepción de 20 horas.

Para los componentes de la interfaz de usuario con etiquetas que incluyen texto o imágenes de texto, el nombre contiene el texto que se presenta visualmente.

En el contenido implementado mediante lenguajes de marcado, los mensajes de estado se pueden determinar mediante programación a través de roles o propiedades, de modo que puedan presentarse al usuario mediante tecnologías de asistencia sin recibir el foco.