DESY

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

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

  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

    Anatomía de la cabecera para aplicaciones web sin sesión iniciada
  • Con sesión iniciada

    Anatomía de la cabecera para aplicaciones web cons esión iniciada
  1. Banda gris: Tiene 56px de altura en todas sus variantes, fondo neutral-lighter y borde neutral-base inferior de 1px de grosor.
  2. 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.
  3. 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.
  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.
Construcción de la cabecera para aplicaciones web

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.

Anatomía de la cabecera para sitios web o portales
  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 y sin ningún logotipo 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: Con 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.
Construcción de la cabecera para sitios web o portales

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

    Dónde situar el logotipo en la versión de escritorio de la cabecera
  • Versión móvil

    Dónde situar el logotipo en la versión de móvil de la cabecera

Accesibilidad

Cómo funciona

Rodeado con la etiqueta header, debe estar presente en todas las páginas y se encuentra al mismo nivel que el footer y el main, 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

Qué tener en cuenta
Qué usar Dónde Función
role=img y aria-label SVG de logotipos personalizados El logotipo actúa como una imagen y el lector de pantalla describe el nombre definido con el aria-label.
href Componente skip-link Tiene que apuntar al id del elemento al que quieres saltar.

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.

Uso incorrecto de la cabecera. Hay una fotografía con gradiente en la banda de cabecera.
Incorrecto

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

Uso incorrecto de la cabecera. El logo se ha colocado en su versión de varios colores y en zonas no habilitadas.
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.

Uso incorrecto de la cabecera. El logo de la institución se ha colocado en su versión de varios colores y en zonas no habilitadas.
Incorrecto

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