- Headers are the first place users look when they visit our sites.
- Headers usually contain the main nav and other elements like a search bar or widget.
- Like footers, headers are persistent on all pages of a site.
- For header treatments on Android, refer to the Material Design App Bar guidelines.
- For header treatments on iOS, refer to the Navigation Bar guidelines.
- Keep it simple. Only the most essential items should live in a header.
- Keeping it simple makes it easy for users to grasp the essence of a site in a blink.
- Use the header to call attention to the primary goal or action a user should take.
- A header should always contain a logo and main navigation, plus it may contain a widget as needed.
- Icons may be used in the header as well. Ensure any icons used in the header is paired with a corresponding label.
- Include skip navigation links to allow users with screen readers to bypass long navigation lists.
- Include Tab focus for all top-level navigation navigation items — this will allow keyboard-reliant users to easily navigate interactive items.
- Ensure your horizontal navigation is keyboard compatible;
- Avoid using hover to expand dropdown lists. Drop downs should expand on click or with keyboard navigation.
- If you’re using a logo that’s an image rather than text, make sure you include alternative text for screen readers.
As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.