Banner

The Banner component appears at the top of every InsureKidsNow.gov page to identify the site as an official United States government website. The banner helps visitors understand that they are on a trusted, secure government website and provides important information about how to recognize legitimate government domains.

Why the banner is important:

• Builds trust: Assures visitors they're on an official government site
• Provides education: Teaches users how to identify legitimate government websites
• Establishes credibility: Shows InsureKidsNow.gov is a secure, trustworthy resource
• Meets federal requirements: Following USWDS standards ensures compliance with government web policies

What the Banner Does:

The banner serves two critical purposes:

1. Identifies official government sites: Explains that .gov domains belong to official government organizations in the United States
2. Confirms secure connections: Shows that HTTPS connections protect sensitive information shared on the website

The banner appears in a collapsed state by default, showing only the U.S. flag icon and the text "An official website of the United States government." Users can click "Here's how you know" to expand the banner and see detailed information about .gov domains and HTTPS security.

Banner Usage

Required use:

• On every page: The banner must appear at the top of every page on InsureKidsNow.gov
• Consistent placement: Always position the banner at the very top of the page, directly below the skip navigation link
• Unmodified text: Use the standard USWDS banner text without customization to maintain consistency across government sites

Why consistency matters:

The banner is most effective when users see the same message across all government websites. Consistent wording helps users learn to recognize official government sites and builds trust in .gov domains.

Banner Structure

Collapsed State (Default)

When a page loads, the banner appears collapsed at the top of the page with:

• U.S. flag icon: Small American flag image on the left
• Header text: "An official website of the United States government"
• Action button: "Here's how you know" link that expands the banner

Expanded State

When users click "Here's how you know," the banner expands to show two informational sections:

Left section - Official websites use .gov:

• Icon showing a government building
• Bold heading: "Official websites use .gov"
• Explanation: "A .gov website belongs to an official government organization in the United States."

Right section - Secure .gov websites use HTTPS:

• Icon showing a padlock
• Bold heading: "Secure .gov websites use HTTPS"
• Explanation: "A lock (🔒) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites."This section documents how the accordion must behave to meet user expectations and consistency principles.

Accessibility Requirements

The banner component meets WCAG 2.1 AA accessibility standards:

Semantic markup:

• Uses proper HTML < header > element with appropriate aria-label
• Implements accordion functionality for expand/collapse behavior
• Includes proper heading structure for screen readers

Keyboard navigation:

• Users can tab to the "Here's how you know" button
• Pressing Enter or Space expands/collapses the banner
• Focus indicators are clearly visible

Screen reader support:

• Aria label identifies the banner: aria-label="Official website of the United States government"
• Decorative images (flag, icons) are properly hidden from screen readers using aria-hidden="true"
• The padlock icon SVG includes proper role="img" with descriptive title and description
• Button announces its expanded/collapsed state to screen readers

Visual accessibility:

• Text has sufficient color contrast against background (meets WCAG AA standards)
• Icons supplement text information (information isn't conveyed by icons alone)
• Focus indicators are visible and meet minimum size requirements
• Component works properly with browser zoom up to 200%

Additional Specifications

For any additional information about specifications, guidelines, accessibility and usage, please refer to the Banner component on the USWDS website: