An accessible mega menu and accessible infographics, the two components that fail most audits

Updated

Two components account for a disproportionate share of findings on marketing sites. A mega menu is a large interactive structure on every page, so its failures are multiplied across the whole site. An infographic is a picture carrying the content, so its failure removes the content entirely for anybody who cannot see it. This page is what each needs. On the worked example a fix in a template reaches 26 pages, and the menu is the template component that reaches all of them.

The mega menu: open on click, operable by keyboard, closable by escape

It has to open on click as well as hover, because hover does not exist for a keyboard or a touch user. Every item must be reachable in tab order, the trigger needs aria-expanded that actually changes, escape must close it and return focus to the trigger, and the whole thing must be reachable past by a skip link. A menu that only opens on hover is a navigation that a keyboard user cannot use at all.

The mega menu: do not rebuild what HTML already does

Links inside a list inside a nav landmark, with a button as the trigger. Most menu failures come from divs with click handlers, which have no role, no name and no keyboard behaviour, and then acquire ARIA to describe what a button would have done for free. The ARIA Authoring Practices Guide's disclosure pattern is the reference to copy.

Infographics: the content is in the picture, so it must also be in text

Alt text cannot carry a chart. Put the same information in the page as a short summary and, where there are numbers, a data table beside or behind a disclosure. That helps screen reader users, search engines and anybody on a phone where the image is unreadable at that size, which is most people.

Questions people ask about accessible mega menu

Can a long infographic use a long alt attribute?

Badly. Long alt text is announced as one unbroken block with no navigation. Use body text or a table.

Does the menu need a skip link?

Every page needs one, and the menu is why: forty links before the content is the reason the criterion exists.

What about a hamburger on desktop?

Fine if it is a real button with a name and aria-expanded, and if the panel it opens is keyboard navigable.

Sources

Related answers

Keep this issue list in Focusvo Pro, $49 a monthEvery issue, every audit, every version of the statement. $49 a month.