Pie de Página (Footer)

El pie de página (o footer en Inglés) se sitúa en la parte inferior de todos los activos digitales de Gobierno. Contiene información institucional o de acceso rápido que permite a los usuarios encontrar de forma sencilla la información que necesitan.

Uso

Cuándo usar

Debe estar presente obligatoriamente en todas las páginas del producto digital, utilizando el tipo de pie de página (footer) correspondiente.

Contextos de uso

El componente puede contener los siguientes elementos:

Enlaces de utilidad (teléfonos de emergencias, atención ciudadana, entre otros).
Información legal como términos y condiciones, políticas de privacidad y licencias de contenido.
Enlaces a redes sociales e información de contacto.
Marcas de identidad de la organización.
Indicador de utilidad acerca del contenido de la página.

Legales (predeterminado)

Se utiliza en los procesos destinados a trámites, consultas, servicios, transacciones y perfil ciudadano, donde se requiere un enfoque en el contenido y una navegación lineal.

Con información útil

Se utiliza en páginas orientadas a la asistencia al ciudadano, ofreciéndole canales de contacto y asistencia.

Con indicador de utilidad

Permite que las personas usuarias puedan dar feedback sobre la utilidad de los contenidos del sitio. Solo se utiliza en páginas informativas.

Contenido en esta página

Uso
Contextos de uso

Completo

<h2 class="sr-only">Navegación de pie de página</h2>
<footer class="main-footer">
  <div class="container">
    <section>
      <h3>Teléfonos útiles</h3>
      <ul class="list-inline">
        <li class="list-inline-item phone-items">
          <a href="tel:102">102 - Niñez y Adolescencia</a>
        </li>
        <li class="list-inline-item phone-items">
          <a href="tel:103">103 - Emergencias</a>
        </li>
        <li class="list-inline-item phone-items">
          <a href="tel:107">107 - SAME</a>
        </li>
        <li class="list-inline-item phone-items">
          <a href="tel:911">911 - Policía</a>
        </li>
        <li class="list-inline-item phone-items">
          <a href="tel:144">144 - Violencia de género</a>
        </li>
        <li class="list-inline-item phone-items">
          <a href="tel:147">147 - Atención ciudadana</a>
        </li>
      </ul>
      <a href="https://buenosaires.gob.ar/inicio/telefonos">
        Ver todos los teléfonos
      </a>
    </section>
    <section>
      <h3>Redes de la ciudad</h3>
      <ul class="list-inline">
        <li class="list-inline-item redes-items">
          <a href="https://www.facebook.com/GCBA">
            <i class="o-icon bx bxl-facebook-circle"></i>
            Facebook
          </a>
        </li>
        <li class="list-inline-item redes-items">
          <a href="https://www.instagram.com/gcba/">
            <i class="o-icon bx bxl-instagram-alt"></i>
            Instagram
          </a>
        </li>
        <li class="list-inline-item redes-items social-x">
          <a href="https://x.com/gcba">X</a>
        </li>
        <li class="list-inline-item redes-items">
          <a href="https://www.youtube.com/user/GCBA">
            <i class="o-icon bx bxl-youtube"></i>
            YouTube
          </a>
        </li>
        <li class="list-inline-item redes-items">
          <a
            href="https://ar.linkedin.com/company/gobierno-de-la-ciudad-de-buenos-aires"
          >
            <i class="o-icon bx bxl-linkedin-square"></i>
            LinkedIn
          </a>
        </li>
        <li class="list-inline-item redes-items">
          <a href="https://www.tiktok.com/@buenosaires">
            <i class="o-icon bx bxl-tiktok"></i>
            TikTok
          </a>
        </li>
        <li class="list-inline-item redes-items">
          <a href="https://www.pinterest.es/buenosaires/">
            <i class="o-icon bx bxl-pinterest"></i>
            Pinterest
          </a>
        </li>
      </ul>
    </section>
  </div>
  <hr class="divider" />
  <div class="container">
    <section class="footer-legal-section">
      <h3 class="sr-only">Información gubernamental</h3>
      <div class="row align-items-center">
        <div class="col-12 col-md-5 col-xl-4 footer-content-img">
          <img
            class="d-md-none"
            src="footer/logo-footer-mobile.svg"
            alt="Logo de Ciudad de Buenos Aires"
            height="48"
          />
          <img
            class="d-none d-md-inline"
            src="footer/logo-footer.svg"
            alt="Logo de Ciudad de Buenos Aires"
            height="40"
          />
          <img
            class="img-vamos-ba"
            src="footer/logo-footer-ba.svg"
            alt="Logo de Vamos Buenos Aires"
          />
        </div>
        <div class="col-12">
          <ul class="list-inline">
            <li class="list-inline-item">
              <a href="https://boletinoficial.buenosaires.gob.ar">
                Boletín oficial
              </a>
            </li>
            <li class="list-inline-item">
              <a
                href="https://buenosaires.gob.ar/inicio/terminos-y-condiciones"
              >
                Términos y condiciones
              </a>
            </li>
            <li class="list-inline-item">
              <a href="https://buenosaires.gob.ar/inicio/privacidad">
                Política de privacidad
              </a>
            </li>
            <li class="list-inline-item">
              <a
                href="https://buenosaires.gob.ar/jefedegobierno/legalytecnica/normativa/boletin-oficial-y-registro/oficios-judiciales"
              >
                Oficios judiciales
              </a>
            </li>
            <li class="list-inline-item">
              <a href="https://www.buenosaires.gob.ar/gobierno/transparencia">
                Transparencia
              </a>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <section>
      <div class="footer-license-text">
        Los contenidos de buenosaires.gob.ar están licenciados bajo Creative
        Commons Reconocimiento 2.5 Argentina License.
      </div>
    </section>
  </div>
</footer>

Solo legales

<h2 class="sr-only">Navegación de pie de página</h2>
<footer class="main-footer">
  <div class="container">
    <section class="footer-legal-section">
      <h3 class="sr-only">Información gubernamental</h3>
      <div class="row align-items-center">
        <div class="col-12 col-md-5 col-xl-4 footer-content-img">
          <img
            class="d-md-none"
            src="footer/logo-footer-mobile.svg"
            alt="Logo de Ciudad de Buenos Aires"
            height="48"
          />
          <img
            class="d-none d-md-inline"
            src="footer/logo-footer.svg"
            alt="Logo de Ciudad de Buenos Aires"
            height="40"
          />
          <img
            class="img-vamos-ba"
            src="footer/logo-footer-ba.svg"
            alt="Logo de Vamos Buenos Aires"
          />
        </div>
        <div class="col-12">
          <ul class="list-inline">
            <li class="list-inline-item">
              <a href="https://boletinoficial.buenosaires.gob.ar">
                Boletín oficial
              </a>
            </li>
            <li class="list-inline-item">
              <a
                href="https://buenosaires.gob.ar/inicio/terminos-y-condiciones"
              >
                Términos y condiciones
              </a>
            </li>
            <li class="list-inline-item">
              <a href="https://buenosaires.gob.ar/inicio/privacidad">
                Política de privacidad
              </a>
            </li>
            <li class="list-inline-item">
              <a
                href="https://buenosaires.gob.ar/jefedegobierno/legalytecnica/normativa/boletin-oficial-y-registro/oficios-judiciales"
              >
                Oficios judiciales
              </a>
            </li>
            <li class="list-inline-item">
              <a href="https://www.buenosaires.gob.ar/gobierno/transparencia">
                Transparencia
              </a>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <section>
      <div class="footer-license-text">
        Los contenidos de buenosaires.gob.ar están licenciados bajo Creative
        Commons Reconocimiento 2.5 Argentina License.
      </div>
    </section>
  </div>
</footer>

Con indicador

<h2 class="sr-only">Navegación de pie de página</h2>
<div class="footer-info">
  <div class="container">
    <h3 class="footer-info-text">¿Te fue útil esta página?</h3>
    <div class="footer-info-actions">
      <button class="btn btn-outline-secondary">Sí, me fue útil</button>
      <button class="btn btn-outline-secondary">No me sirvió</button>
    </div>
  </div>
</div>
<footer class="main-footer">
  <div class="container">
    <section>
      <h3>Teléfonos útiles</h3>
      <ul class="list-inline">
        <li class="list-inline-item phone-items">
          <a href="tel:102">102 - Niñez y Adolescencia</a>
        </li>
        <li class="list-inline-item phone-items">
          <a href="tel:103">103 - Emergencias</a>
        </li>
        <li class="list-inline-item phone-items">
          <a href="tel:107">107 - SAME</a>
        </li>
        <li class="list-inline-item phone-items">
          <a href="tel:911">911 - Policía</a>
        </li>
        <li class="list-inline-item phone-items">
          <a href="tel:144">144 - Violencia de género</a>
        </li>
        <li class="list-inline-item phone-items">
          <a href="tel:147">147 - Atención ciudadana</a>
        </li>
      </ul>
      <a href="https://buenosaires.gob.ar/inicio/telefonos">
        Ver todos los teléfonos
      </a>
    </section>
    <section>
      <h3>Redes de la ciudad</h3>
      <ul class="list-inline">
        <li class="list-inline-item redes-items">
          <a href="https://www.facebook.com/GCBA">
            <i class="o-icon bx bxl-facebook-circle"></i>
            Facebook
          </a>
        </li>
        <li class="list-inline-item redes-items">
          <a href="https://www.instagram.com/gcba/">
            <i class="o-icon bx bxl-instagram-alt"></i>
            Instagram
          </a>
        </li>
        <li class="list-inline-item redes-items social-x">
          <a href="https://x.com/gcba">X</a>
        </li>
        <li class="list-inline-item redes-items">
          <a href="https://www.youtube.com/user/GCBA">
            <i class="o-icon bx bxl-youtube"></i>
            YouTube
          </a>
        </li>
        <li class="list-inline-item redes-items">
          <a
            href="https://ar.linkedin.com/company/gobierno-de-la-ciudad-de-buenos-aires"
          >
            <i class="o-icon bx bxl-linkedin-square"></i>
            LinkedIn
          </a>
        </li>
        <li class="list-inline-item redes-items">
          <a href="https://www.tiktok.com/@buenosaires">
            <i class="o-icon bx bxl-tiktok"></i>
            TikTok
          </a>
        </li>
        <li class="list-inline-item redes-items">
          <a href="https://www.pinterest.es/buenosaires/">
            <i class="o-icon bx bxl-pinterest"></i>
            Pinterest
          </a>
        </li>
      </ul>
    </section>
  </div>
  <hr class="divider" />
  <div class="container">
    <section class="footer-legal-section">
      <h3 class="sr-only">Información gubernamental</h3>
      <div class="row align-items-center">
        <div class="col-12 col-md-5 col-xl-4 footer-content-img">
          <img
            class="d-md-none"
            src="footer/logo-footer-mobile.svg"
            alt="Logo de Ciudad de Buenos Aires"
            height="48"
          />
          <img
            class="d-none d-md-inline"
            src="footer/logo-footer.svg"
            alt="Logo de Ciudad de Buenos Aires"
            height="40"
          />
          <img
            class="img-vamos-ba"
            src="footer/logo-footer-ba.svg"
            alt="Logo de Vamos Buenos Aires"
          />
        </div>
        <div class="col-12">
          <ul class="list-inline">
            <li class="list-inline-item">
              <a href="https://boletinoficial.buenosaires.gob.ar">
                Boletín oficial
              </a>
            </li>
            <li class="list-inline-item">
              <a
                href="https://buenosaires.gob.ar/inicio/terminos-y-condiciones"
              >
                Términos y condiciones
              </a>
            </li>
            <li class="list-inline-item">
              <a href="https://buenosaires.gob.ar/inicio/privacidad">
                Política de privacidad
              </a>
            </li>
            <li class="list-inline-item">
              <a
                href="https://buenosaires.gob.ar/jefedegobierno/legalytecnica/normativa/boletin-oficial-y-registro/oficios-judiciales"
              >
                Oficios judiciales
              </a>
            </li>
            <li class="list-inline-item">
              <a href="https://www.buenosaires.gob.ar/gobierno/transparencia">
                Transparencia
              </a>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <section>
      <div class="footer-license-text">
        Los contenidos de buenosaires.gob.ar están licenciados bajo Creative
        Commons Reconocimiento 2.5 Argentina License.
      </div>
    </section>
  </div>
</footer>

Variantes

Completo
Solo legales
Con indicador

Anatomía

Elemento	Carácter
Indicador de utilidad	Opcional, se puede usar en páginas informativas.
Información útil	Opcional, se requiere según el contenido de la página
Legales	Obligatorio, se requiere en todas las páginas.

Variantes

El pie de página (footer) tiene 3 variantes/bloques: legales, con información útil, y con indicador de utilidad. La variante de legales es obligatoria y debe incluirse en todas las pantallas. Las demás pueden incluirse según la necesidad.

Legales

Contiene el logo y el escudo de la Ciudad de Buenos Aires, e información legal.

Información útil

Contiene teléfonos útiles y redes sociales de la Ciudad.

Indicador de utilidad

Está compuesto de una pregunta y dos acciones posibles de la misma jerarquía.

Dispositivos tablet

Dispositivos mobile

Contenido en esta página

Anatomía
Variantes
Legales
Información útil
Indicador de utilidad
Dispositivos tablet
Dispositivos mobile

Navegación alternativa

Todos los elementos del pie de página (footer) pueden recorrerse utilizando la navegación por teclado u otras herramientas de asistencia como lectores por voz.

TABENTER

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Además, con el enter, puede accionar los elementos sobre los que esté posicionada como botones, enlaces, entre otros.

Encabezados ocultos para navegación

Se crearon encabezados ocultos con la clase sr-only para facilitar la navegación de los distintos bloques del pie de página.

<h2 class="sr-only">Navegación de pie de página</h2>
<footer class="main-footer">  
          ...  
  <hr class="divider" />  
  <div class="container">    
    <section class="footer-legal-section">      
      <h3 class="sr-only">Información gubernamental</h3>     
           ...
    </section>
  </div>
</footer>

Criterios WCAG aplicados

Success Criterion 1.4.11 Non-Text Contrast (Level AA)

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Success Criterion 1.3.1 Info and Relationships (Level A)

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

Success Criterion 1.4.10 Reflow (Level AA)

El contenido puede presentarse sin pérdida de información o funcionalidad y sin necesidad de desplazarse en dos dimensiones, siempre que el desplazamiento vertical se ajuste a un ancho equivalente a 320 píxeles CSS y el desplazamiento horizontal a una altura equivalente a 256 píxeles CSS, excepto en aquellas partes del contenido que requieran un diseño bidimensional para su uso o significado.

Success Criterion 1.4.4 Resize Text (Level AA)

Excepto por los subtítulos e imágenes de texto, el texto puede redimensionarse hasta un 200 % sin tecnología de asistencia, sin pérdida de contenido ni funcionalidad.

Success Criterion 2.1.1 Keyboard (Level A)

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Success Criterion 2.1.2 No Keyboard Trap (Level A)

Si el foco del teclado puede moverse a un componente de la página utilizando una interfaz de teclado, también debe ser posible mover el foco fuera de ese componente usando únicamente la misma interfaz de teclado. Si se requiere algo más que las teclas de flecha, tabulador u otros métodos estándar para salir, se debe informar al usuario sobre el método necesario para mover el foco.

Success Criterion 2.4.7 Focus Visible (Level AA)

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible.

Contenido en esta página

Navegación alternativa
Encabezados ocultos para navegación
Criterios WCAG aplicados