The header helps users identify where they are and provides a quick, organized way to reach the main content of a website.
Status:
Draft: Do not use
About this element
The Library's header reflects it's broadest information architecture. There are four manifestations of the header: Full header, Virgo header, medium header, and simple header. Read more about header definitions.
Guidance
Most websites require header navigation.
- Add a skip navigation link before the header. Include skip navigation links to allow those using screen readers to bypass long navigation lists. Make sure you include an id at the beginning of your main content and that it matches the skip navigation link. Find more information on skip navigation links at WebAIM.
- Ensure your horizontal navigation is keyboard compatible. Test to make sure users can use Tab to navigate and Space (or Enter) to open pages.
- Include tab focus for all top-level navigation navigation items. This feature will allow keyboard-reliant users to easily navigate interactive items.
- Avoid using hover to expand dropdown lists. Hover is difficult for some users and won't work on touch screens. Dropdowns should expand on click or with keyboard navigation.
- Add context by labelling your nav element. If your page has more than one nav element, use the aria-label attribute to help assistive technology users understand the purpose of the navigation.
- Use list elements for your navigation links. This helps screen reader users navigate header content.
- Add alt text to your logo image. If you’re using a logo that’s an image rather than text, make sure you include alternative text for screen readers.
- Don't use an H1 for your logo. If you’re using a logo that’s text, use an em, not an h1, unless it’s the homepage.