#11 The trigram for heaven

submitted on by Manuel

Bad code

<span class="nav-toggle"> ☰ Menu </span>

Issues and how to fix them

  1. A screen reader may announce this as trigram for heaven menu, because ☰ is the unicode character for the trigram for heaven.
  2. The purpose of the icon is decorative, it should be hidden from screen readers. Consider adding decorative images using background properties in CSS.
  3. A click event on a span triggers only on click. A click event on a button triggers on click and if the user presses the Enter or Space key.
  4. A span isn’t keyboard focusable, but this element must be focusable, because it’s used for opening and closing the main navigation.
  5. aria-expanded must be added to indicate wheather the main navigation is collapsed or not.

Good code

<button class="nav-toggle" aria-expanded="false">
  <span aria-hidden="true">☰</span> Menu
</button>

Fun fact

The Bagua or Pa Kua are eight symbols used in Taoist cosmology to represent the fundamental principles of reality, seen as a range of eight interrelated concepts. Each consists of three lines, each line either "broken" or "unbroken", respectively representing yin or yang. Due to their tripartite structure, they are often referred to as Eight Trigrams in English.
https://en.wikipedia.org/wiki/Bagua