Examples

The HealthCare.gov header component varies depending on the user's state (ie. logged-in) and context (ie. what page the user is on).

Logged-In

Logged-Out

Minimal

Accessibility

The Healthcare.gov header has been tested against, and meets, the WCAG 2.1 standard for accessibility.

• The header includes the Skip Nav component.
• The header includes the USA-banner component. Read more about testing USA Banner’s accessibility.
• The header includes the Healthcare.gov logo. Read more about testing the logo’s accessibility.

Accessibility testing

Screen reader testing

When using a screen reader:

• Screen reader announces each interactive element with its type (link or button) and content.
• Screen reader announces collapsed and expanded states. For example, when you first access USA Banner’s “Here’s how you know” button while using a screen reader, the screen reader announces that it is “collapsed.” When activated, the screen reader announces “expanded.”
• Screen reader announces the logo as image and link, and the link’s destination.

Keyboard testing

When navigating with a keyboard:

• Use the Tab key to move forward and Shift + Tab to move backward through interactive elements.
• Confirm that focus is clearly visible on each interactive element.

Code

React

Review Storybook for React guidance of this component.

Google Analytics

Analytics event tracking is enabled by default.

On applications where the page has utag loaded, the data goes to Tealium which allows it to route to Google Analytics or the currently approved data analytics tools.

Disabling event tracking

Import and set the setHeaderSendsAnalytics feature flag to false in your application's entry file:

import { setHeaderSendsAnalytics } from '@cmsgov/<design-system-package>';
config({ headerSendsAnalytics: false });

Component maturity