#22 the good ol’ div link

submitted on by Manuel
Context: A link to another page.

Bad code

<div>About us</div>
<div onClick="location.href='about.html'">
  About us
</div>
<div data-page="aboutus" data-url="index.php">
  About us
</div>

…or any other variation of this pattern where an element other than <a> is used to link to a page.

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. A click event on a div triggers only on click. A click event on an a triggers on click and if the user presses the Enter key.
  3. A div isn’t keyboard focusable.
  4. The context menu on right click doesn’t provide options like “Open in new tab/window” or “Bookmark this link”.
  5. By default, screen readers just announce the text in a div (e.g. “about us”), in a proper link (<a>) a screen reader announces the text and the role (e.g. “about us, link”).
  6. Attributes like aria-label might not work (properly) on div elements.
  7. Screen reader users may use a shortcut to list all links in a page. “div-links” wouldn’t be listed, unless they have a role of “link”.

Good code

<a href="aboutus.html">
  About us
</a>