Cabeceras

Se trata de un elemento siempre disponible en la parte superior de la pantalla. Proporciona un acceso a funciones de todo el sistema y elementos de navegación local.

Índice de apartados de esta página

• Tipos de cabeceras
• Anatomía de cabecera para aplicaciones web
• Anatomía de cabecera para sitios web o portales
• Accesibilidad
• Buenas prácticas

Tipos de cabeceras #

1. 1 Cabecera estándar. Elemento obligatorio en las aplicaciones y herramientas del Gobierno de Aragón.
2. 2 Cabecera pequeña. Banda que forma parte de la cabecera avanzada, obligatoria su presencia en los sitios web del Gobierno de Aragón.
3. 3 Cabecera avanzada. Elemento obligatorio en los portales web.

Anatomía de cabecera para aplicaciones web #

Se usa en intranets o aplicaciones web para escritorio o móviles y que suelen tener un acceso de usuarios restringido. Tiene menos altura al estar compuesta por una sola banda.

• Sin sesión iniciada

  

• Con sesión iniciada

  

1. Skip-link: Permite saltar directamente al contenido principal de la página. Lo usamos por accesibilidad. Está oculto y sólo se muestra al tomar el foco.
2. Banda gris: Tiene 56px de altura en todas sus variantes, fondo neutral-lighter y borde neutral-base inferior de 1px de grosor.
3. Logo Gobierno de Aragón Lo mostramos de forma expandida antes de la identificación del usuario. Cuando accede a la aplicación aparece de forma reducida, sólo con la bandera. En anchuras pequeñas y móviles siempre aparece reducido. Enlaza a la página de inicio de la aplicación.
4. Nombre de aplicación: Separado por dos líneas divisorias. En anchuras pequeñas se omiten y únicamente se muestra la etiqueta con el nombre. Cuando es necesario cambiar entre distintas aplicaciones, colocamos un listado en caja para facilitar la navegación. En dispositivos móviles esta función se encuentra dentro del menú lateral, a través del componente detalles.
5. Menú de navegación: En móviles o anchuras pequeñas, los items se encuentran dentro de un desplegable que abre un menú lateral.
6. Perfil con menú desplegable: Es una navegación o información relativa al usuario identificado (Ej: Perfil, Cerrar sesión...) y lo mostramos en el extremo derecha en escritorio. En anchuras pequeñas o móviles se encuentra dentro del menú lateral.

Anatomía de cabecera para sitios web o portales #

Esta es la cabecera por defecto para sitios web de submarcas del Gobierno de Aragón, es decir, sitios webs públicos en los que hay una comunicación "unidireccional" y, normalmente, no tienen un acceso de usuarios restringido.

1. Skip-link: Permite saltar directamente al contenido principal de la página. Lo usamos por accesibilidad. Está oculto y sólo se muestra al tomar el foco.
2. Cabecera pequeña: El logotipo debe quedar alineado a la izquierda y la banda, de 45px de altura, incluye un borde inferior de 1 px neutral-base. Enlaza a la página de incio del portal del Gobierno de Aragón.
3. Banda con el título del sitio web: Las letras del título del sitio web irán en blanco sobre fondo heading-base con ornamentos en heading-dark.
4. Subtítulo: Utilízalo para el nombre extendido de los títulos con acrónimos.
5. Banda con un menú de navegación: Tiene fondo neutral-lighter y borde inferior neutral-base de 1 px. En móviles o anchuras pequeñas, los items se encuentran dentro de un desplegable que abre un menú lateral.
6. Perfil con menú desplegable: Es una navegación o información relativa al usuario identificado (Ej: Perfil, Cerrar sesión...) y lo mostramos en el extremo derecha en escritorio. En anchuras pequeñas o móviles se encuentra dentro del menú lateral. Este elemento es opcional.
7. Banda con Hero opcional: Sección con una altura determinada en la que se puede encajar una imagen ilustrativa, animación o carrusel como presentación del portal.

Si tu organización tiene logotipo #

Si eres un instituto, empresa pública, fundación o similares y tu marca se encuentra en la galería de escudos y logotipos del Gobierno de Aragón, puedes incluirla en monocromo blanco, con unas dimensiones determinadas y una línea divisoria junto al título. En anchuras pequeñas, el logotipo escala y se apila sobre el título. De esta forma cumplirás accesibilidad y tu marca no competirá con la del Gobierno de Aragón. Si necesitas incluir más identificadores, hazlo en la zona habilitada del pie de página.

• Versión de escritorio

  

• Versión móvil

  

Accesibilidad #

Cómo funciona #

• Etiqueta <header>, presente en todas las páginas dentro del <body>.
• El menú de navegación de cabecera y su versión mobile están rodeado con la etiqueta <nav>.
• El skip link está rodeado con la etiqueta <nav>, sólo es visible cuando toma el foco y el lector de pantalla anuncia su etiqueta. Por defecto el enlace salta a la etiqueta <main>, donde se encuentra el contenido de la página. Es recomendable usar este componente al principio y al final de otras regiones donde es incómodo navegar con el teclado para poder saltarlas, por ejemplo iframes o galerías de imágenes.

Más información en la sección Landmark Regions de W3C

Buenas prácticas #

Aviso

No recomendamos que la posición de las cabeceras avanzadas quede fijada (stickies) ya que reduce mucho el área de visualización.

Incorrecto

No coloques fotografías en la banda del título de cabecera. Hazlo en el hero.

Incorrecto

No utilices tu logotipo en versiones que no sean monocromo.

No sustituyas el título y no lo coloques en otras zonas que no sean la definida para ello.

Incorrecto

No utilices tu logotipo en la cabecera si es de un departamento o un proyecto.