Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Page header

Guidance Code Accessibility

Easy to use for everyone

The page header is the start of a page's content, so allskip to content links should direct the user here. The page header sits within a page'smain landmark.

We've made sure that all interactive elements inside of a page header follow the logical tab order.

Even when a page header is set to sticky scroll, it still sits in the normal tab order at the top of the page content.

A page header's child components follow the accessibility considerations outlined in their own guidance.

For Assistive Technology

Page header titling uses correct heading styles in order to achieve good semantic structure and provide information about structure and content relationships when using assistive technology.

Based on

The page header component has been based on the following resources:

  • Accessible heading structure , A11y project, accessed March 2022.

  • Semantic Structure: Regions, Headings and Lists , WebAIM, accessed March 2022.

  • WCAG 2.2 1.3.1 Info and Relationships , W3, accessed April 2024.

Testing

We’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.


Last reviewed 15 April 2024 .
Navigated to Page header - Intelligence Community Design System