Page header
Page header
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.