Banner
El componente Banner aparece en la parte superior de cada página de InsureKidsNow.gov para identificar el sitio como un sitio web oficial del gobierno de los Estados Unidos. El banner ayuda a los visitantes a comprender que se encuentran en un sitio web gubernamental seguro y de confianza, y proporciona información importante sobre cómo reconocer los dominios gubernamentales legítimos.
Por qué es importante el banner:
- Genera confianza: asegura a los visitantes que están en un sitio web oficial del gobierno.
- Proporciona formación: enseña a los usuarios cómo identificar sitios web gubernamentales legítimos.
- Genera credibilidad: demuestra que InsureKidsNow.gov es un recurso seguro y confiable.
- Cumple con los requisitos federales: El cumplimiento de los estándares de USWDS garantiza el cumplimiento de las políticas sitio web del gobierno.
Qué hace el banner:
el banner cumple dos funciones fundamentales:
- Identifica sitios web oficiales del gobierno: explica que los dominios .gov pertenecen a organizaciones gubernamentales oficiales en los Estados Unidos.
- Confirma conexiones seguras: demuestra que las conexiones HTTPS protegen la información confidencial compartida en el sitio web.
El banner aparece contraído por defecto, mostrando únicamente el ícono de la bandera de los Estados Unidos y el texto "Sitio web oficial del gobierno de los Estados Unidos". Los usuarios pueden hacer clic en "Así es como lo sabes" para expandir el banner y ver información detallada sobre los dominios .gov y la seguridad HTTPS.
Banner IKN
Uso de banners
Uso requerido:
- En todas las páginas: el banner debe aparecer en la parte superior de cada página de InsureKidsNow.gov.
- Ubicación consistente: coloque siempre el banner en la parte superior de la página, justo debajo del enlace para saltar la navegación.
- Texto sin modificar: use el texto estándar del banner de USWDS sin personalización para mantener la coherencia en todos los sitios gubernamentales.
Por qué la coherencia es importante:
el banner resulta más eficaz cuando los usuarios ven el mismo mensaje en todos los sitios web del gobierno. El uso de un lenguaje coherente ayuda a los usuarios a reconocer los sitios web oficiales del gobierno y genera confianza en los dominios .gov.
Estructura del banner
Estado colapsado (predeterminado)
Cuando se carga una página, el banner aparece contraído en la parte superior de la página con:
- Icono de la bandera de EE. UU.: imagen pequeña de la bandera estadounidense a la izquierda.
- Texto del encabezado: "Sitio web oficial del gobierno de los Estados Unidos"
- Botón de acción: enlace "Así es como lo sabrás" que expande el banner.
Estado ampliado
Cuando los usuarios hacen clic en "Así es como lo sabrás", el banner se expande para mostrar dos secciones informativas:
Sección izquierda: los sitios web oficiales usan .gov:
- Ícono que muestra un edificio gubernamental
- Título en negritas: "Los sitios web oficiales usan .gov"
- Explicación: "Un sitio web .gov pertenece a una organización gubernamental oficial de los Estados Unidos".
Sección derecha - Secure .gov los sitios web usan HTTPS:
- Ícono que muestra un candado
- Título en negritas: "Secure .gov Los sitios web usan HTTPS.
- Explicación: "Un candado (🔒) o https:// significa que se conectó de forma segura al sitio web .gov . Comparta información confidencial únicamente en sitios web oficiales y seguros". Esta sección documenta cómo debe comportarse el acordeón para cubrir las expectativas del usuario y los principios de coherencia.
Requisitos de accesibilidad
El componente del banner cumple con los estándares de accesibilidad WCAG 2.1 AA:
Marcado semántico:
- Usa el elemento HTML < header > adecuado con la etiqueta aria-label apropiada.
- Implementa la funcionalidad de acordeón para el comportamiento de expansión/contracciones.
- Incluye una estructura de encabezados adecuada para lectores de pantalla.
Navegación mediante teclado:
- Los usuarios pueden pulsar la tecla Tabulador hasta el botón "Así es como lo sabes"
- Al pulsar Intro o la barra espaciadora, se expande o contrae el banner.
- Los indicadores de enfoque son claramente visibles.
Compatibilidad con lectores de pantalla:
- La etiqueta Aria identifica el banner: aria-label="Sitio web oficial del gobierno de los Estados Unidos"
- Las imágenes decorativas (bandera, íconos) se ocultan correctamente a los lectores de pantalla mediante aria-hidden="true".
- El ícono del candado SVG incluye el rol adecuado="img" con título y descripción descriptivos
- El botón anuncia su estado expandido/contraído a los lectores de pantalla.
Accesibilidad visual:
- El texto tiene suficiente contraste de color con respecto al fondo (cumple con los estándares WCAG AA).
- Los íconos complementan la información textual (la información no se transmite solo con íconos).
- Los indicadores de enfoque son visibles y cumplen con los requisitos de tamaño mínimo.
- El componente funciona correctamente con un zoom del navegador de hasta el 200%.
Especificaciones adicionales
Para obtener información adicional sobre especificaciones, pautas, accesibilidad y uso, consulte el componente Banner en el sitio web de USWDS:
USWDS - Banner