Pie de página

Componentes principales

El pie de página es una herramienta muy útil para facilitar la navegación del usuario hacia recursos clave del sitio web, no sólo para mostrar información de contacto, información legal o redes sociales.

La política sobre el uso de los logotipos de los Fondos Europeos ha cambiado y deberás tenerlo en cuenta para incluirlos en tu componente. Consulta el apartado Financiación Europea para saber cómo utilizarlos.

Anatomía
Enlaces
Financiación Europea
Accesibilidad

Anatomía #

Contenedor: Fondo neutral-lighter y borde superior neutral-base de 1px, con una línea divisoria entre los dos bloques en la versión de escritorio.
Enlaces opcionales: Columnas de enlaces a las diferentes secciones del sitio web que facilitan la navegación. En la versión móvil se apilan.
Enlaces a información relevante: Es obligatorio enlazar al mapa web y a la declaración de accesibilidad de la web. Según el caso, deberás incluir otras, consulta el apartado de enlaces.
Información: Nombre de la organización a la que se le atribuye la autoría de la página, licencias bajo las que se encuentra el contenido y captionClasses de contacto.
Logotipos: La banda de la financión de la Unión Europea se encuentra en la zona inferior. Puedes seleccionar una financiación de las que proponemos o utilizar un .svg personalizado.

Enlaces #

Según el contenido de tu web deberás enlazar distintas páginas:

Aviso legal: Es un documento que establece las responsabilidades legales y condiciones de uso del sitio web. Si recabas información de usuarios (IP, cookies, comentarios...) o tienes actividad económica es obligatorio.
Política de cookies: Listado de las cookies de tu web y para qué se utilizan. Más información en el patrón de configurar cookies.
Política de privacidad: Es un documento legal en el que el titular de la web debe informar sus clientes y usuarios sobre los datos personales que se recopilan al navegar en el sitio. Más información en el patrón de aceptar políticas de privacidad.
Accesibilidad: Se trata de un modelo normalizado de declaración de accesibilidad que se obtiene tras realizar una revisión de accesibilidad de tu sitio web. Es obligatorio. Más información en el patrón de página de la declaración de accesibilidad.
Mapa web: Es obligatorio y sirve para facilitar la navegación. Más información en el patrón de página del mapa web.

Financiación Europea #

Deberás colocar una banda con varios logotipos dependiendo de tu financiación en el pie de página de una web o en el encabezado de algunos documentos. Esta banda debe tener unos márgenes y espaciados determinados. Para configurar la tuya puedes hacerlo a través de las variables del componente, en nuestra librería de Figma, construirla a partir de las normativas de comunicación o descargarla de nuestro repositorio de logotipos en Bitbucket.

A través de las variantes del componente puedes seleccionar uno de los siguientes fondos:

Bandas de financiación europea
Nombre	Variable	Banda de logotipos
FEDER Logotipo por defecto.	Sin definir - `logo.type: FEDER`
FEADER	`logo.type: FEADER`
FSE+	`logo.type: FSE+`
Plurifondo	`logo.type: plurifondo`
Sólo UE Cuando se financia sólo una parte de un proyecto mayor y no pueden separarse.	`logo.type: UE`
Sin financiación europea Oculta el logotipo feder predeterminado y permite incluir otros personalizados.	`noLogo: true`	—

Accesibilidad #

Cómo funciona #

Rodeado con la etiqueta <footer>, debe estar presente en todas las páginas y se encuentra al mismo nivel que el <header> y el <main>, dentro del <body>.

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`.
`title`	Enlaces que contienen un logotipo SVG	El lector de pantalla anuncia qué se va a encontrar la persona tras el enlace.