DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Menú vertical

Navegación

Se compone de un listado de elementos anidados que poseerán los enlaces a cada una de las secciones del sitio web en concreto. El número de páginas que puede contener es mayor que en el menú horizontal, ya que no está limitado en espacio. Podría compararse a un índice.

Índice de apartados de esta página

Tipos de menú vertical

  1. 1
  2. 2

    Nav

  3. 3

    Árbol de navegación

  1. 1 Por defecto. Listado de elementos con apariencia de link cuando el usuario hace hover con el cursor.
  2. 2 Nav. Listado de elementos que resaltan con un contenedor azul cuando el usuario hace hover con el cursor. Se utiliza como componente de navegación local.
  3. 3 Árbol de navegación. Utilizamos el componente árbol para anidar enlaces que puedes mostrar y ocultar. Utiliza el parámetro type=navigation para poder usarlo.

Accesibilidad

Cómo funciona

  • Rodeado con la etiqueta <nav>, debe tener un aria-label que describa el tipo de navegación.
  • Dentro se encuentra una lista sin orden <ul> con una serie de <li> que contienen un enlace marcado con un id único. Cuando una página está activa tiene un atributo aria-current=page.
  • Si usas un árbol de navegación, la lista <ul> tendrá un role=tree. Cada lista anidada tiene un role=group y cada item tiene un role=treeitem. El aria-expanded de cada item padre indica al lector de pantalla si está contraído o no. Esta variable se basa en el patrón Navegation Treeview de W3C
  • Si incluyes svg personalizados, asegúrate de que tienen los atributos role=presentation y aria-hidden=true.
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 componente Permite crear un id concreto para cada item.
aria-label Dentro del parámetro Nunjucks attributes Descibe el tipo de navegación.
title Dentro del parámetro Nunjucks attributes cuando se usa un target en el item. Anuncia que el enlace se abrirá en una nueva ventana o pestaña.

Buenas prácticas

  • Los diferentes items deben estar lógicamente relacionadas pero ser mutuamente excluyentes. No hay más de un contenido por pestaña.
  • La lista de items debe alinearse a la izquierda, y puede ser organizada mediante separadores o subitems.
  • Al encontrarse dentro de la página enlazada por el item, éste debería marcarse como activo.
  • Los items pueden contener texto descriptivo.