WebAIM - Web Accessibility In Mind

E-mail List Archives

Burger Menus and necessary ARIA support

for

From: Fischer, Johannes
Date: Sep 11, 2017 12:19PM

Hi all,

I am wondering if navigation burger menus need a lot of ARIA elements to be accessible.

There is a button with attributes tabindex="0", role="button" (or instead it is a <button> element) as well as aria-label="Navigation", but other attributes like aria-haspopup or aria-controls are not used. When you click on the button or press Enter, a menu (<ul>/<li>) gets visible and menuitems are <a>-Elements for links or <button>-elements for submenu-buttons without role or aria attributes. Clicking or pressing enter leads you to the linked site or their submenu gets visible/unvisible. By keyboard you can navigate through the menu by tabulator key, not the arrow keys. If you don't open the navigation menu or submenus, pressing tab key will not lead to the menuitems, but they are skipped.
To distinguish between navigation visible or not, either the value of aria-label should change between "open Navigation" and "close Navigation" or the attribute aria-expanded should be available.

In contrast W3C describes a Menu Button with more WAI-ARIA attributes (aria-haspopup, aria-controls, aria-expanded) here: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html

Would you rate my example still as accessible according to WCAG or is it very important to do it like the W3C example?
Thanks,
Johannes


Johannes Fischer
BIKOSAX - IT Accessibility Service in Saxony
Accessible Websites - Test, Consulting, Training

Deutsche Zentralbücherei für Blinde (German Central Library for the Blind, DZB)
Gustav-Adolf-Straße 7, 04105 Leipzig, Germany
Tel.: +49(0)341 7113-162, Fax: +49(0)341 7113-125
E-Mail: <EMAIL REMOVED>
Internet: www.dzb.de

Follow DZB: www.facebook.com/dzb.de | www.twitter.com/punktschrift