Navbars

Accessibility

Availability of navbar items to assistive technology requires the use of aria-controls.
Navbars must be contained in <nav> elements with unique accessible labels for each navigational element on the page, if there’s more than one.
The name of each item should include the attribute role="button".
Provide a label for all menu items that can be read by assistive technologies. You may use visually-hidden text or add an aria-label to each menu item. If you need the menu item name to be translatable, use visually-hidden.
Provide alt text for product logo.
Provide tooltips for icons.
Provide logical tab sequence.

This link bypasses header links and ‘skips’ to the screen’s main content.
Provides increased usability for people using screen readers or keyboard navigation.
This link is invisible until it receives keyboard focus via the Tab key.
“Skip to main content” wording explains best where people are navigating to. Example:
```
<div><a href="#main">Skip to main content</a></div>
```

skip to content screenshot