Headers and navigation

Assistive technology helps users with disabilities understand site structure and navigate pages. Users need to identify headers, main content areas, complimentary content areas, and footers. To do this, we use HTML5 and ARIA role landmarks on a page.

Use skip navigation links

A skip navigation link lets users with assistive devices "skip" to the main content. They can bypass the top of the page. A skip link is usually a hidden hyperlink until the user activates it by pressing the tab key. Users don't need to tab through the entire navigation menu each time they go to a new page. This saves them time and frustration.

Give each landmark a unique label

Some pages need more than one kind of the same landmark and they each need their own label. For example, a page may have more than one type of navigation. Give each navigation landmark its own label, like main navigation and breadcrumb navigation.

Example of a navigation label:

<nav aria-label="main menu"> vs. <nav aria-label="breadcrumbs">

Make headers visible, understandable, and usable

• Use 18px - 20px font size for navigation labels.
• Use proper color contrast for navigation labels in the header.
• Use padding or white space between navigation labels.
• Use concise and meaningful navigation labels.
• Use only one level of navigation for dropdown menus.

Effective use of icons in the headers

Use icons for website header elements like the search bar or language switcher.

• Always give icons a visible label.
• Only use the hamburger with menu label icon for mobile. Never use it in desktop view. Users have a hard time finding small icons on desktop screens.
• Use common icons users understand. Don’t use uncommon or ambiguous icons that can confuse users.
• Use icons with care. Use them only to support a user task such as understanding information.
• Don’t use icons to replace a key word in the navigation. Instead use common words for navigation, like Home.