The mega menu at the top of this page uses bootstrap buttons and dialog boxes for each mega dropdown.

Instructions:

1. Start with a Bootstrap group of buttons for the Parent elements.
2. Use those to trigger Bootstrap Modal dialog boxes.
3. Add headings for sections inside the mega dialog boxes
4. Use Lists for the links.

It's a little unconventional, but its easy and fast to create and it has really good testing results with screen readers and morphs well to a mobile Hhamburger menu. It substantially meets WCAG.

I don't present this to our accessibility communitity as a definitive model for an Accessibile Mega Menu. Perhaps a model will appear using ARIA roles and arrow key navigation but there is nothing yet and its not advised to use ARIA menu roles (menubar, menu, menuitem) if arrow key navigation is not used between items. There is currently no agreed on pattern by the ARIA working group and I'm holding off on ARIA menu roles because they affect on screen readers and a mega menu is very different from a simple one column dropdown menu.

This menu can be built in Bootstrap 3.3.7 or 4.x

In general, its better not to use mega menus if they can be avoided, but I try to respect the marketing department's choices.

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.

Go to CanAdapt home