DESY

Sistema de Diseño del Gobierno de Aragón.

Tabla

Componente para ordenar valores relacionados en filas y columnas.

Anatomía

Título de tabla
Seleccionar fila Filas Etiqueta de filtro 1 Pulsa para ordenar por esta columna Etiqueta de filtro 2 Pulsa para ordenar por esta columna Etiqueta de filtro 3 Pulsa para ordenar por esta columna
Fila 1 Enero 85€ 95€
Fila 2 Febrero 75€ 55€
Fila 3 Marzo 165€ 125€
  • Título de tabla: Caption que debe ser visible o, en su defecto, estar únicamente disponible para lectores de pantalla.
  • Cabecera de la tabla: Define la información de las columnas. Opcionalmente, si existe un alto número de filas, puede contener elementos de filtrado como selectores, barras de búsqueda y botones de ordenación ascendente/descendente.
  • Botones de selección: Opcionalmente para cada fila, se pueden incluir inputs de selección múltiple o selección única dependiendo de las acciones que deba ejercer el usuario sobre los distintos items.
  • Filas: Relacionan cada término con uno o varios parámetros del mismo. Pueden añadirse botones en las últimas celdas de cada fila para realizar acciones sobre los items.

Accesibilidad

Cómo funciona

Elemento table con role=grid que contiene un caption descriptivo, una fila de encabezado thead, un cuerpo tbody y una fila inferior tfoot.

Cada elemento contiene una serie de celdas dentro de una fila tr. Cuando la celda forma parte de la cabecera se trata de un elemento th con scope=col o scope=row, mientras que en el resto de celdas son elementos td. Además, las celdas de cabecera tienen un tabindex=-1 que impide que el foco entre en ellas y un id único.

En una columna ordenable, la celda de cabecera con el accionable necesita un aria-sort que indique si el orden es ascendente, descendente o no existe. La etiqueta accionable se encuentra dentro de un contenedor con role=button. Los iconos de filtrado poseen aria=hidden y una etiqueta con .sr-only que indica Pulsa para ordenar por esta columna

En el caso de que se configuren otros inputs, deben llevar label visible o con .sr-only y estar identificados con id único.

Cuando el foco entra en la tabla, la persona puede navegar entre las celdas con las flechas de direccción.

Basado en el patrón table de W3C

Qué tener en cuenta
Qué usar Dónde Función
idPrefix Parámetro Nunjucks dentro del componente Permite crear id únicos para celdas de cabecera e inputs.
caption Parámetro Nunjucks dentro del componente Describe la tabla con un título como encabezado. Siempre debe estar.

Recuerda

  • Para que tu tabla sea accesible, consulta el patrón de acciones de tabla para saber cómo mostrar información adicional y realizar acciones en lote.
  • Establece el orden predeterminado por el que se muestran los datos a través del icono accionable de la etiqueta en la cabecera de la columna (flecha arriba o flecha abajo).
  • Asegúrate de que los datos pueden visualizarse en anchuras pequeñas. Utiliza scroll y coloca los botones de desplazamiento al principio de la tabla.
  • No utilices tablas como elemento de maquetación.