Índice de páginas
Pie de página
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.
Índice de apartados de esta página
Anatomía #
- Contenedor: Fondo
neutral-lightery borde superiorneutral-basede 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 faciliten la navegación por información relevante para la persona usuaria. En la versión móvil recomendamos utilizar otros métodos de navegación para no ocupar demasiada altura.
- Enlaces a información relevante: Debe tener un enlace al mapa web y a la declaración de accesibilidad, además de otras posibles como contacto, aviso legal, política de cookies, etc. En la versión móvil se encuentran apiladas.
- 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 distintos datos 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.
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:
| 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é 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. |