Navbar

The navbar provides context through globally accessible menu options.

Accessibility

  • Provide alt text for product logo.
  • Provide tooltips for icons.

“Skip to Main Content” Link

  • 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 id="skiptocontent"><a href="#maincontent">Skip to main content</a></div>

skip to content

Reference for more detail: https://webaim.org/techniques/skipnav/