Unlock the secrets of building a Menubar that meets WCAG 2.1 Status A guidelines. My step-by-step guide makes accessibility in webdevelopment simple and effective.
Accessibility Considerations (WCAG 2.1 Level A):
1.4.1 Use of Color: Ensure that color is not the only means of conveying information or indicating an action.
2.1.1 Keyboard: The MenuBar, including dropdowns and submenus, must be fully navigable using a keyboard.
1.3.1 Info and Relationships: The structure of the menu and its items should be clearly defined for assistive technologies.
2.4.4 Link Purpose (In Context): Ensure that the purpose of each menu item link is clear from its text or context.
Key words
- Menubar= A Menubar is the container of items that represents any choices
- Menuitem = A Menuitem is each choice within a Menubar
- Menu = A Menu opens a submenu, also known as a parent Menuitem.
Rules
- A Menubar should exist of these semantic html elements
<nav>, <ul>, <li> and <a>
. - If there are multiple menu's, use aria-label to distinguish them from each other.
- A Menu has the aria-expanded set to false when collapsed and set to true when expanded
- The menu has the attribute tabindex set to -1 or 0
- The menu has the attribute aria-activedescendant set to the ID of the focused item
- Each item in a menu has the attribute tabindex set to -1, except in a menubar where the first item has tabindex 0
- Whenever a menuitem is disabled the attribute aria-disabled is set to true
- A menubar has the attribute aria-label OR aria-labeledby when the menubar has a visible label. Aria-labeledby refers to the labelling element.
- The menubar has a default value of aria-orientation for horizontally orientation. If it is vertically oriented, set the attribute aria-orientation to vertical.
Hamburgermenu
- If some trigger will open a Menu (submenu) or mobile version of the Menubar, set aria-haspopup to true to indicate
- Add aria-label=βMenuβ when there is a hamburger icon within the button and not any text
- Hamburgemenu icon preferably needs to be 44 x 44 pixels
- Button need to be triggered by Enter or Space key
- When expanded, focus need to stay on hamburgemenu
- When Tab is pressed, the first element of the content must be selected
- When javascript turned off, the menu should be expanded
Example
<nav aria-label="Accessible Menubar">
<ul role="menubar" aria-label="Accessible Menubar">
<li role="none">
<a role="menuitem" href="#home"> Home </a>
</li>
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#about">
About
</a>
<ul role="menu" aria-label="About">
<li role="none">
<a role="menuitem" href="#overview">Overview</a>
</li>
<li role="none">
<a role="menuitem" href="#administration">Administration</a>
</li>
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#facts">
Facts
</a>
<ul role="menu" aria-label="Facts">
<li role="none">
<a role="menuitem" href="#history">History</a>
</li>
<li role="none">
<a role="menuitem" href="#current-statistics">Current Statistics</a>
</li>
<li role="none">
<a role="menuitem" href="#awards">Awards</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Sources:
Top comments (0)