Navigation Menu

Navigation Container

Description Can have a heading if there are multiple navigation elements
Role Discoverable by screen reader as navigation landmark
Relationships If using a heading, aria-labelledby="headingId"
State n/a
Focus Can be targeted with a skip link, but isn't focusable
Action n/a

Links go somewhere

Description Inner text describes purpose
Role Identifies itself as a link
Relationships href="url" makes a link focusable
State visited
Focus All links and dropdowns visibly focused with the tab key / swipe
Action enter

Buttons do something

Description Inner text describes purpose
Role Identifies itself as a button
Relationships aria-controls="popup-id", has-popup="true"
State aria-expanded="true/false"
Focus Visibly focused with the tab key / swipe
Action space, enter

Native Element

The <nav> element gives the page a navigation landmark

Description

  • aria-describedby="heading-id" can be used if there are multiple navigation elements

Role

  • Identifies itself as a navigation

Relationships

State

Focus

  • Internal actionable items visibly focused with tab

Actions

Custom Element

If you must use a custom element like a <div> instead of <nav>

Description

  • aria-describedby="heading-id" can be used if there are multiple navigation elements

Role Requires extra work

  • role="navigation"

Relationships

State

Focus

Actions