DEV Community

Eelco Verbrugge
Eelco Verbrugge

Posted on

Achieving WCAG 2.1 Status A: Accessible Menubar

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>
Enter fullscreen mode Exit fullscreen mode

Sources:

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more