Nav bars

Checklist

• Use <header> OR role="banner" for the main body
• Use <nav> element to surround the actual navigation links
• Use <ul> for lists of links
• Keyboard and screen reader accessibility
  • Tab order must be logical to easily enter submenus and pop back out
  • Buttons (search, hamburger, etc.) have accessible text through aria-label and title
  • Links used as buttons must have role="button"
• Focus trapping
  • Tabbing must stay focus-trapped to the nav when open
• Use ARIA markup (aria-expanded) for expandable/collapsible menus
• Set up dynamic rendering for search engine crawlers

Background

• On <header> and role="banner":
  • Default semantics of <header> are the same as role="banner"
  • MDN on banner role