Accessibility
Accessible header guidelines
Keep these considerations in mind if you are modifying the design system or creating a custom component.
Best practice
Semantic HTML elements
Use semantic HTML elements like <header>, <nav>, and <h1>-<h6> to create a clear, organised structure. This approach aids users with visual impairments in comprehending the content and purpose of the header (The A11Y Project, 2023).
Header images
Include alternative text for images in the header to describe their content and purpose, assisting users with visual impairments (W3C, 2018).
ARIA landmarks
Employ ARIA landmarks to label different sections of the header, offering additional context for assistive technologies (W3C 2016).
Keyboard accessibility
Ensure all interactive elements within the header are operable via a keyboard interface, without specific timings for individual keystrokes (WebAIM, 2022).
Touch targets
Make sure interactive elements in the header, such as buttons or dropdown menus, are large enough to be easily clicked or tapped on touchscreen devices (Mozilla, 2023).
Site title
The site title should be descriptive, concise, and accurately reflect the website's purpose and content. Code it as an H1 heading at the top of the page for clear understanding (W3C 2008).
Logo
The website logo should be descriptive and include alternative text. If it's a link to the homepage, ensure it's distinguishable from other links. The contrast between the logo and the background should meet minimum contrast ratio requirements (W3C 2018).
Site utility links
Site utility links like "Contact Us" or "Help" should be clearly labeled, easily identifiable, keyboard accessible, and have a focus state. Icons used for these links should have alternative text (W3C 2018).
WCAG Guidelines
1.3 Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure. This is about ensuring that the structure of the header is accessible and meaningful for all users.
1.3.1 Info and Relationships
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means that the structure of the header (including any navigation menus, logos, or other elements) should be understandable not just visually, but also to assistive technologies like screen readers.
1.4.3 Contrast (Minimum)
Text in the header should have a contrast ratio of at least 4.5:1 with the background.
1.4.11 Non-text Contrast
Icons or other non-text elements in the header should have a contrast ratio of at least 3:1 against adjacent colours.
2.4 Navigable
Provide descriptive headings and labels where relevant.
2.4.6 Headings and Labels
Headings in the header should accurately describe the associated content.
2.4.10 Section Headings
Section headings are used to organise the content. This means that if your header includes multiple sections (like different navigation menus), they should each have a clear, descriptive heading.
3.1 Readable
Make text content readable and understandable. This includes the use of clear and understandable language in headers.
4.1.2 Name, Role, Value
All elements in the header should be properly labeled, and their function should be clear to both users and assistive technologies.
For example, the search form has a role of 'search', and it has a label 'Search this website'. All interactive elements such as buttons and links have clear names such as 'Contact us', 'Search', and 'Menu'.