#18 main divigation

submitted on by Christoph

Context: The main navigation of a personal website.

Bad code

<div class="nav">
  <div>
    <div>about</div>
    <div>thoughts</div>
  </div>
</div>

Issues and how to fix them

  1. The <div> element is an element of last resort, for when no other element is suitable. Use of the <div> element instead of more appropriate elements leads to poor accessibility.
  2. Use <nav> for the main navigation, it represents a landmark with links to external or internal pages. Screen reader users may use shortcuts to access the navigation directly or skip it.
  3. Use <ul> or <ol> to structure related links semantically and visually. Screen readers usually announce the number of items in a list.
  4. If the order of items in the navigation matters, use <ol>, otherwise <ul>.
  5. A click event on a div triggers only on click. Use <a href=""> to link to other pages. It’s (more) accessible to keyboard, screen reader, and mouse users than a fake JavaScript-only link.

Good code

<nav>
  <ul class="nav">
    <li>
      <a href="/about">about</a>
    </li>
    <li>
      <a href="/thoughts">thoughts</a>
    </li>
  </ul>
</nav>

Resources

```