Bad code Bad code
<span class="nav-toggle"> ☰ Menu </span>
Issues and how to fix them Issues and how to fix them
- A screen reader may announce this as trigram for heaven menu, because ☰ is the unicode character for the trigram for heaven.
- The purpose of the icon is decorative, it should be hidden from screen readers. Consider adding decorative images using background properties in CSS.
- A click event on a
spantriggers only on click. A click event on a
buttontriggers on click and if the user presses the Enter or Space key.
spanisn’t keyboard focusable, but this element must be focusable, because it’s used for opening and closing the main navigation.
aria-expandedmust be added to indicate wheather the main navigation is collapsed or not.
Good code Good code
<button class="nav-toggle" aria-expanded="false">
<span aria-hidden="true">☰</span> Menu
Fun fact 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.