Cabecera de página multimedia

La Cabecera de página Multimedia es el área principal de una página que brinda información introductoria para orientar a la persona usuaria en el propósito de la misma. El componente principal es un elemento multimedia qué puede ser de tipo imagen o video. También, puede contener accionables como botones, campos de búsqueda y otros.

Uso

Cuándo usar

Opcionalmente puede estar presente en las páginas de área que requieran un componente principal que funcione como introducción al contenido multimedia (video o imagen), y que inmediatamente capte la atención de la persona usuaria.

Cuándo no usar

En caso de que no se cuente con una imagen o video de calidad que representen el área, se debe utilizar el componente Cabecera institucional (ver documentación).

Disposición

Se ubica siempre en la parte superior del sitio, inmediatamente debajo del Encabezado (header) principal, actuando como punto de inicio y orientación del contenido de la página.

Imagen y Video

En dispositivos desktop

El contenedor de la cabecera ocupa el 100% del ancho de la pantalla, manteniendo el orden de lectura de izquierda a derecha en sentido horizontal de los elementos como formas y multimedia.

Cabecera de página disposición desktop

Responsive en tamaños de pantalla grandes

Entre 1200 a 1400px: Hasta pantallas de 1400px. las alineaciones de texto y forma de la cabecera van a estar en sincronía con el resto del contenido principal de la página para compensar los pesos visuales del componente en la interfaz.

Cabecera de página disposición desktop

Mayor a 1920px: Para pantallas con resoluciones mayores a 1920 px., la página mantiene un ancho fijo y se extienden márgenes en blanco para ocupar el espacio disponible de la pantalla.

Cabecera de página disposición desktop

En dispositivos tablet

La cabecera ocupa el 100% del ancho de la pantalla, incluyendo los márgenes, manteniendo una disposición vertical de la estructura. Esto quiere decir que, en el orden de lectura, migas de pan, título, descripción y accionables, se van a ubicar primeros, y, por debajo, la multimedia.

Cabecera de página disposición tablet

En dispositivos Mobile

Al igual que en dispositivos tablet, la cabecera ocupa el 100% del ancho de la pantalla, incluyendo los márgenes, manteniendo una disposición vertical de la estructura. Los elementos deben posicionarse uno debajo del otro. En el siguiente orden: Migas de pan, Título, Subtítulo, accionables. Los accionables deben ocupar el 100% del ancho de la pantalla.
El desplegable va a tener el texto centrado y la flecha de despliegue a la derecha del accionable.

Cabecera de página disposición tablet

Contenido en esta página

Uso
Disposición
Imagen y Video
En dispositivos desktop
En dispositivos tablet
En dispositivos Mobile

Con imagen

Título de la página

Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo brevemente su función.

<div class="container-headers">
  <header class="hero-landing">
    <img src="/Obelisco-V2/images/hero/hero_multimedia.jpg" alt="Imagen de fondo" />
    <div class="ob-bg"></div>
    <div class="container hero-landing-container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página 2</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página 3</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página anterior</a>
          </li>
        </ol>
      </nav>

      <div class="row">
        <div class="col-12 col-lg-8 w-100">
          <h1>Título de la página</h1>
          <p class="text-xl">
            Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo
            brevemente su función.
          </p>
          <div class="d-grid d-sm-grid d-md-flex flex-wrap search-container">
            <div class="search-wrapper">
              <label htmlFor="search-home" class="sr-only">
                Buscar
              </label>
              <input
                type="text"
                id="search-home"
                name="search-home"
                maxLength={100}
                autoComplete="off"
                class="form-control"
                placeholder="¿En qué te podemos ayudar?"
              />
              <div class="search-btn-container">
                <button class="btn btn-lg btn-primary btn-search">
                  <p>Buscar</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                  >
                    <path
                      d="M11.3137 10.0598H10.6553L10.422 9.83477C11.422 8.6681 11.9387 7.07643 11.6553 5.38477C11.2637 3.0681 9.33034 1.2181 6.99701 0.934766C3.47201 0.501433 0.505339 3.4681 0.938672 6.9931C1.22201 9.32643 3.07201 11.2598 5.38867 11.6514C7.08034 11.9348 8.67201 11.4181 9.83867 10.4181L10.0637 10.6514V11.3098L13.6053 14.8514C13.947 15.1931 14.5053 15.1931 14.847 14.8514C15.1887 14.5098 15.1887 13.9514 14.847 13.6098L11.3137 10.0598ZM6.31367 10.0598C4.23867 10.0598 2.56367 8.38477 2.56367 6.30977C2.56367 4.23477 4.23867 2.55977 6.31367 2.55977C8.38867 2.55977 10.0637 4.23477 10.0637 6.30977C10.0637 8.38477 8.38867 10.0598 6.31367 10.0598Z"
                      fill="white"
                    ></path>
                  </svg>
                </button>
              </div>
              <div class="search-results bg-light">
                <div>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

Con vídeo

Título de la página

Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo brevemente su función.

<div class="container-headers">
  <header class="hero-landing">
    <video src='/images/hero/videoplayback.mp4' autoPlay muted loop playsInline></video>
    <div class="ob-bg"></div>
    <div class="container hero-landing-container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página 2</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página 3</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página anterior</a>
          </li>
        </ol>
      </nav>

      <div class="row">
        <div class="col-12 col-lg-8 w-100">
          <h1>Título de la página</h1>
          <p class="text-xl">
            Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo
            brevemente su función.
          </p>
          <div class="d-grid d-sm-grid d-md-flex flex-wrap search-container">
            <div class="search-wrapper">
              <label htmlFor="search-home" class="sr-only">
                Buscar
              </label>
              <input
                type="text"
                id="search-home"
                name="search-home"
                maxLength={100}
                autoComplete="off"
                class="form-control"
                placeholder="¿En qué te podemos ayudar?"
              />
              <div class="search-btn-container">
                <button class="btn btn-lg btn-primary btn-search">
                  <p>Buscar</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                  >
                    <path
                      d="M11.3137 10.0598H10.6553L10.422 9.83477C11.422 8.6681 11.9387 7.07643 11.6553 5.38477C11.2637 3.0681 9.33034 1.2181 6.99701 0.934766C3.47201 0.501433 0.505339 3.4681 0.938672 6.9931C1.22201 9.32643 3.07201 11.2598 5.38867 11.6514C7.08034 11.9348 8.67201 11.4181 9.83867 10.4181L10.0637 10.6514V11.3098L13.6053 14.8514C13.947 15.1931 14.5053 15.1931 14.847 14.8514C15.1887 14.5098 15.1887 13.9514 14.847 13.6098L11.3137 10.0598ZM6.31367 10.0598C4.23867 10.0598 2.56367 8.38477 2.56367 6.30977C2.56367 4.23477 4.23867 2.55977 6.31367 2.55977C8.38867 2.55977 10.0637 4.23477 10.0637 6.30977C10.0637 8.38477 8.38867 10.0598 6.31367 10.0598Z"
                      fill="white"
                    ></path>
                  </svg>
                </button>
              </div>
              <div class="search-results bg-light">
                <div>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

Accionables

Con botones

Título de la página

Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo brevemente su función.

<div class="container-headers">
  <header class="hero-landing">
    <video src={'/images/hero/videoplayback.mp4'} autoPlay muted loop playsInline></video>
    <div class="ob-bg"></div>
    <div class="container hero-landing-container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página 2</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página 3</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página anterior</a>
          </li>
        </ol>
      </nav>

      <div class="row">
        <div class="col-12 col-lg-8 w-100">
          <h1>Título de la página</h1>
          <p class="text-xl">
            Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo
            brevemente su función.
          </p>
          <div class="btn-hero">
            <button type="button" class="btn btn-light">Botón</button>
            <button type="button" class="btn btn-outline-light">Botón</button>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

Con campo buscador

Título de la página

Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo brevemente su función.

searchEnlace predeterminado searchEnlace predeterminado searchEnlace predeterminado

<div class="container-headers">
  <header class="hero-landing">
    <video src={'/images/hero/videoplayback.mp4'} autoPlay muted loop playsInline></video>
    <div class="ob-bg"></div>
    <div class="container hero-landing-container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página 2</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página 3</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página anterior</a>
          </li>
        </ol>
      </nav>

      <div class="row">
        <div class="col-12 col-lg-8 w-100">
          <h1>Título de la página</h1>
          <p class="text-xl">
            Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo
            brevemente su función.
          </p>
          <div class="d-grid d-sm-grid d-md-flex flex-wrap search-container">
            <div class="search-wrapper">
              <label for="search-home" class="sr-only">
                Buscar
              </label>
              <input
                type="text"
                id="search-home"
                name="search-home"
                maxlength="100"
                autocomplete="off"
                class="form-control"
                placeholder="¿En qué te podemos ayudar?"
              />
              <div class="search-btn-container">
                <button class="btn btn-lg btn-primary btn-search">
                  <p>Buscar</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                  >
                    <path
                      d="M11.3137 10.0598H10.6553L10.422 9.83477C11.422 8.6681 11.9387 7.07643 11.6553 5.38477C11.2637 3.0681 9.33034 1.2181 6.99701 0.934766C3.47201 0.501433 0.505339 3.4681 0.938672 6.9931C1.22201 9.32643 3.07201 11.2598 5.38867 11.6514C7.08034 11.9348 8.67201 11.4181 9.83867 10.4181L10.0637 10.6514V11.3098L13.6053 14.8514C13.947 15.1931 14.5053 15.1931 14.847 14.8514C15.1887 14.5098 15.1887 13.9514 14.847 13.6098L11.3137 10.0598ZM6.31367 10.0598C4.23867 10.0598 2.56367 8.38477 2.56367 6.30977C2.56367 4.23477 4.23867 2.55977 6.31367 2.55977C8.38867 2.55977 10.0637 4.23477 10.0637 6.30977C10.0637 8.38477 8.38867 10.0598 6.31367 10.0598Z"
                      fill="white"
                    ></path>
                  </svg>
                </button>
              </div>
              <div class="search-results bg-light">
                <div>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

Con desplegables

Título de la página

Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo brevemente su función.

<div class="container-headers">
  <header class="hero-landing">
    <video src={'/images/hero/videoplayback.mp4'} autoPlay muted loop playsInline></video>
    <div class="ob-bg"></div>
      <div class="container hero-landing-container">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a href="#">Inicio</a>
              </li>
              <li class="breadcrumb-item">
                <a href="#">Página 2</a>
              </li>
              <li class="breadcrumb-item">
                <a href="#">Página 3</a>
              </li>
              <li class="breadcrumb-item">
                <a href="#">Página anterior</a>
              </li>
            </ol>
          </nav>
          <div class="row">
            <div class="col-12 col-lg-8 w-100">
              <h1>Título de la página</h1>
              <p class="text-xl">
                Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo
                brevemente su función.
              </p>
              <div class="d-grid d-sm-flex flex-wrap column-gap-2 row-gap-4">
                <div class="dropdown">
                  <button
                    type="button"
                    class="btn btn-dropdown btn-dropdown-border btn-lg"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
                    <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
                      expand_more
                    </span>
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">
                      <span class="item-text">Opción de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="item-text">Opción de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="item-text">Opción de navegación</span>
                    </a>
                  </div>
                </div>
                <div class="dropdown">
                  <button
                    type="button"
                    class="btn btn-dropdown btn-dropdown-border btn-lg"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
                    <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
                      expand_more
                    </span>
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">
                      <span class="item-text">Opción de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="item-text">Opción de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="item-text">Opción de navegación</span>
                    </a>
                  </div>
                </div>
                <div class="dropdown">
                  <button
                    type="button"
                    class="btn btn-dropdown btn-dropdown-border btn-lg"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
                    <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
                      expand_more
                    </span>
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">
                      <span class="item-text">Opción de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="item-text">Opción de navegación</span>
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="item-text">Opción de navegación</span>
                    </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

Variantes

Con imagen
Con vídeo
Accionables
Con botones
Con campo buscador
Con desplegables

Anatomía

Cabecera de página anatomia

Elemento	Carácter
1. Gradiente	Obligatorio, debe estar presente en todos los componentes Cabecera Multimedia tanto en su variante imagen como en video.
2. Migas de pan	Obligatorio, todas las páginas de área deben contener migas de pan. Forman una ruta de navegación.
3. Título de la cabecera	Obligatorio, todas las páginas deben contener un título.
4. Subtítulo de la cabecera	Opcional, puede ser un texto de apoyo al título principal.
5. Acciones	Obligatorio, todas las páginas deben incluir botones, desplegables, etiquetas, campos de búsqueda, u otros.

Especificaciones sobre la multimedia

Multimedia con imagen

Los elementos multimedia, tanto de tipo imagen como video, deben tener un peso menor a 10MB.

Multimedia con imagen

Contenido

Los elementos multimedia, tanto de tipo imagen como video, deben tener un peso menor a 10MB.

Formatos recomendados

JPEG
: Es la opción más conocida, y ofrece buena compatibilidad, y relación tamaño/peso. Los archivos suelen tener las extensiones .jpg, .jpeg
WebP
: Es poco conocido, pero ofrece buena calidad con compresión eficiente. Los archivos tienen la extensión ".WEBP".
AVIF
: Mayor compresión que formatos JPG/JPEG y alta calidad de imagen. Es compatible en la mayoría de los principales navegadores como Chrome, Firefox y Safari.

Tamaños recomendados

Resolución base de 1600x900 (16:9) con peso menor a 400 KB.
Esta imagen se redimensionará para adaptarse a los distintos dispositivos.

Desktop
: 1600x900px. resolución máxima recomendada (proporción 16:9). Peso sugerido <250 KB

Multimedia con video

Formatos recomendados

MP4
: Formato de video ampliamente soportado. Adecuado para videos cortos, fondos animados o clips promocionales. No soporta transparencia; requiere fallback estático si el autoplay falla.
WebM
: Formato de video optimizado para la web, alternativa libre a MP4. Soporte limitado en navegadores antiguos o entornos legacy.

Tamaños recomendados

Resolución base de 1600x900 (16:9) con peso menor a 400 KB.
Este video se redimensionará para adaptarse a los distintos dispositivos.

Desktop

: 1920x1080 px. resolución máxima recomendada (proporción 16:9). Peso sugerido <2 MB

Variantes

Con imagen

Variante imagen

Con video

Variante video

Accionables

Permite incluir uno o más enlaces accionables ubicados por fuera del texto principal de la alerta. Su función es ofrecer al usuario caminos directos para resolver la situación comunicada, sin interrumpir la lectura del mensaje.

Con botones

Accionables con botones del hero

Con campo de búsqueda

Accionables con campo de búsqueda del hero

Con desplegables de selección

Accionables con desplegables de selección del hero

Con desplegables de selección y botón

Accionables con etiquetas

Contenido en esta página

Anatomía
Especificaciones sobre la multimedia
Multimedia con imagen
Multimedia con imagen
Multimedia con video
Variantes
Con imagen
Con video
Accionables

Navegación alternativa

El componente Cabecera de página está construido para ser accesible mediante navegación por teclado y reconocible por lectores de pantalla.

TABENTER

Utilizando el tab la persona usuaria puede navegar a través de elementos de la interfaz. Acciones como accionar botones o abrir desplegables se pueden realizar con las teclas Enter o space, y controlar con las flechas del teclado.

Navegacion alternativa de la Cabecera de página

Etiquetado descriptivo

La etiqueta de texto <h1> representa el título con más jerarquía de la página y aparece al inicio del bloque del componente para garantizar orientación, SEO y accesibilidad. Cada página debe tener un único <h1> y no debe repetirse en otras secciones o encabezados internos, para evitar confusión y mantener una estructura semántica clara.

El atributo alt es el texto alternativo que reemplaza lo visual y describe el propósito del contenido sin necesidad de verlo.

Si la multimedia es sólo decorativa, es decir que no aporta información clave, el atributo alt puede estar vacío para que el lector de pantalla lo ignore, por ejemplo:<img alt="" />

Accesibilidad

El contenido multimedia debe cumplir con las siguientes reglas para garantizar su correcta accesibilidad y usabilidad:

Limitar la duración máxima de los videos a 5 segundos.
Los videos no deben tener sonido.
Corroborar la correcta relación de contraste de color entre multimedia (imagen y video) y elementos de frente. Para cumplir con esta regla se deberá utilizar la forma de fondo gradiente.

<div class="container-headers">
  <header class="hero-landing">
    <img src="/Obelisco-V2/images/hero/hero_multimedia.jpg" alt="Imagen de fondo" />
    <div class="ob-bg"></div>
    <div class="container hero-landing-container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="#">Inicio</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página 2</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página 3</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">Página anterior</a>
          </li>
        </ol>
      </nav>

      <div class="row">
        <div class="col-12 col-lg-8 w-100">
          <h1>Título de la página</h1>
          <p class="text-xl">
            Este es el subtítulo de la página que puede contener hasta 3 líneas de texto, describiendo
            brevemente su función.
          </p>
          <div class="d-grid d-sm-grid d-md-flex flex-wrap search-container">
            <div class="search-wrapper">
              <label htmlFor="search-home" class="sr-only">
                Buscar
              </label>
              <input
                type="text"
                id="search-home"
                name="search-home"
                maxLength={100}
                autoComplete="off"
                class="form-control"
                placeholder="¿En qué te podemos ayudar?"
              />
              <div class="search-btn-container">
                <button class="btn btn-lg btn-primary btn-search">
                  <p>Buscar</p>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                  >
                    <path
                      d="M11.3137 10.0598H10.6553L10.422 9.83477C11.422 8.6681 11.9387 7.07643 11.6553 5.38477C11.2637 3.0681 9.33034 1.2181 6.99701 0.934766C3.47201 0.501433 0.505339 3.4681 0.938672 6.9931C1.22201 9.32643 3.07201 11.2598 5.38867 11.6514C7.08034 11.9348 8.67201 11.4181 9.83867 10.4181L10.0637 10.6514V11.3098L13.6053 14.8514C13.947 15.1931 14.5053 15.1931 14.847 14.8514C15.1887 14.5098 15.1887 13.9514 14.847 13.6098L11.3137 10.0598ZM6.31367 10.0598C4.23867 10.0598 2.56367 8.38477 2.56367 6.30977C2.56367 4.23477 4.23867 2.55977 6.31367 2.55977C8.38867 2.55977 10.0637 4.23477 10.0637 6.30977C10.0637 8.38477 8.38867 10.0598 6.31367 10.0598Z"
                      fill="white"
                    ></path>
                  </svg>
                </button>
              </div>
              <div class="search-results bg-light">
                <div>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                  <a href="#" target="_blank" rel="noopener noreferrer" class="list-link-result">
                    <span class="material-symbols-rounded">search</span>
                    Enlace predeterminado
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

Criterios WCAG aplicados

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.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.4.3 Contrast (Minimum) (Level AA)

La presentación visual de texto y de imágenes de texto tiene una relación de contraste de por lo menos 4.5:1, excepto textos grandes e imágenes de texto grande que tienen un contraste de por lo menos 3:1, textos o imágenes que son parte de un componente inactivo de interfaz de usuario o son pura decoración, o logotipos.

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 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 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.2.2 Pause, Stop, Hide (Level A)

Para cualquier información que se mueva, parpadee, se desplace o se actualice automáticamente, se proporciona un mecanismo para que la persona usuaria pueda pausarla, detenerla u ocultarla, salvo que dicha actividad sea esencial para la operación.
También aplica a contenido que:

Comienza automáticamente.
Dura más de 5 segundos.
Se presenta junto con otro contenido.

Success Criterion 2.4.4 Link Purpose (In Context) (Level A)

El propósito de cada enlace debe ser determinado solo con el texto del enlace o con el texto del enlace junto con su contexto determinado de forma programática, excepto en los casos en los que el propósito del enlace sea ambiguo para los usuarios en general.

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. Cuando utiliza un teclado para navegar por los componentes, los enlaces tienen un subrayado visible y un recuadro outline que indica que los enlaces son interactivos.

Success Criterion 2.4.8. Location (Level AAA)

La información sobre la ubicación del usuario dentro de un conjunto de páginas web está disponible.

Success Criterion 3.2.3 Consistent Navigation (Level AA)

Los mecanismos de navegación que se repiten en varias páginas web dentro de un conjunto de páginas aparecen en el mismo orden relativo cada vez que se repiten, a menos que el usuario inicie un cambio.

Contenido en esta página

Navegación alternativa
Etiquetado descriptivo
Criterios WCAG aplicados