Tipos de mapa
Mapa lateral
En desktop ocupa 4 columnas y se encuentra a la derecha del cuerpo. Muestra la ubicación de un (1) lugar a remarcar en una página de noticias o en una pagina simple. Puede convivir con un destacado, ubicándose siempre debajo del mismo.
Mapa de bloque institucional
En desktop ocupa 6 columnas y se encuentra dentro del bloque institucional. Muestra la dirección de un organismo de gobierno. Se utiliza en páginas de área, antes del footer.
Mapa mobile
En mobile, el componente tiene un tamaño único y ocupa el 100 % de las columnas disponibles, tanto para mapa lateral, como para el mapa de bloque institucional.
Diseño y estructura (contexto de uso)
Ubicación
El mapa cuenta con un título y una descripción editable donde se coloca la dirección a remarcar.
Mapa
Es un elemento embebido del Mapa Interactivo de Buenos Aires que marca la ubicación del lugar y brinda contexto geográfico de sus alrededores.
Botón de “Cómo llego”
Redirige al Mapa Interactivo de Buenos Aires en una nueva pestaña. Siempre mantiene el mismo texto para familiarizar a la persona usuaria con la acción.
Accesibilidad
Navegación por teclado
Incluir la propiedad tabIndex={-1} en el iframe. Esta configuración garantiza que, al navegar con el teclado, el mapa se omita al moverse al siguiente elemento. Esta práctica no solo mejora la accesibilidad, sino que también optimiza la experiencia para las personas usuarias que dependen de la navegación por teclado.
Código HTML
<iframe
src="https://www.example123.com"
width="600"
height="146"
title="Mapa de como llegar"
style="border: 0;"
allowFullScreen
loading="lazy"
tabIndex=-1
referrerPolicy="no-referrer-when-downgrade">
</iframe>