DESY

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

Índice de páginas

Pestañas

Menú horizontal que permite visualizar distintos paneles con información, permaneciendo en la misma página.

Índice de apartados de esta página

Anatomía

Contenido

Pestaña 1

Panel 1. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

  • Pestaña: Contienen el título del panel correspondiente y en móviles se apilan verticalmente. Pueden estar desactivadas cuando el panel no se encuentre disponible. Opcionalmente también pueden contener iconos que apoyen a la etiqueta de título. Cuando hay un alto número de ellas es posible incluir scroll horizontal.
  • Panel: Marco con el contenido relativo a la pestaña.

Accesibilidad

Cómo funciona

Elementos <button> con aria-selected, aria-controls que apunta al contenido del panel, id único y role=tab. Esta lista de elementos la rodea un contenedor con role=tablist y un aria-label que describe el tipo de información.

El panel de cada pestaña es un contenedor con role=tabpanel, id único, un aria-labelledby que apunta al botón que muestra dicho panel y un tabindex=0 que permite tomar el foco.

Cuando una pestaña toma el foco, la persona puede desplazarse entre ellas con las flechas del teclado para mostrar los paneles y tabular para acceder al contenido.

Basado en el patrón tabs de W3C

Qué tener en cuenta
Qué usar Dónde Función
idPrefix Parámetro Nunjucks dentro del componente Permite crear id únicos para los items del listado
id Parámetro Nunjucks dentro del item Permite crear un id concreto para el item.
tablistAriaLabel Parámetro Nunjucks dentro del componente Crea un aria-label para el componente que describa el tipo de información que contiene.
title y headingLevel Parámetros Nunjucks dentro del componente Establece el texto y nivel del encabezado.
aria-label Dentro del parámetro Nunjucks attributes Describe el tipo de navegación.