• An unordered list (<ul>) is usually the most semantically-appropriate markup for navigation lists.
  • When screen readers arrive at lists, they announce how many items are in the list. Screen readers also announce the beginning of any sub lists, and say how many items are in the sub list.
  • Add <nav role="navigation"> to the Main Menu.
  • Blind screen reader users tend to skip past the navigation (using "skip navigation" links, headings, or ARIA landmarks).
  • Ensure hidden sub menus are accessible.
    • Users must be able to activate the hidden menu with a keyboard/keyboard.
    • Indicator symbols are also very useful.


Indicate the Current Location Within the Site

  • Add the menu category to the page title.
  • Add "breadcrumbs."
  • Add the menu category before the main heading (usually marked with <h1>) in the content.

Another optional addition is a hidden "you are here" link positioned off screen using CSS. For example:

<a href="style.html"><span style="position:absolute;top:-999em;left:-999em">You are here: </span> Style</a>
Was this article helpful? 0 out of 0 found this helpful

Have more questions? Submit a Support Ticket