Although some designers dislike them, because, at a first glance, they seem to be too overwhelming and too densely packed with information: If you design them carefully, mega menus work really well for site navigation. They convey site structure, present your users all available options at a glance, and thus provide a convenient and fast way of navigating deep and broad hierarchies and taxonomies.

In one of my current projects for an agency, we are building and incrementally improving a website for a state-wide public transport initiative, launched by the Ministry of Transport of the State of Baden-Württemberg. As we need to serve all citizens with various types of information about public transport and also because of the EU Directive on the Accessibility of Public Sector Websites and Mobile Applications, the site will have to comply with industry standards for web accessibility, like the Web Content Accessibility Guidelines (WCAG) 2.1. Of course, in a project that large there is always room for improvement and as the website has grown considerably over the last 1.5 years, the next phase will also include a relaunch of the main navigation. The previous solution, a hamburger menu which was also used on desktop, did, unsurprisingly, not perform well in usability tests and will make way for a mega menu.

In my current position in the team as a UX designer and UI engineer (you could also say front-end designer), I’m in charge of much of the design and code of the front-end, which also includes making it accessible. So when the idea of rebuilding the navigation emerged, I instantly was hooked up. An accessible mega menu! A fantastic opportunity to learn so many new things. But at the same time also quite a challenge.

So in this and a few upcoming posts, I will share my experience of building this mega menu, from the initial research to designing and developing a component. But here’s an important disclaimer: Although I care about accessibility a lot and have acquired basic knowledge, I don’t consider myself an expert in accessibility at all. So I might make decisions along the way that could be further improved with more experience in the field. If you happen to be such an expert or spot any weaknesses in my approach, please (!) don’t hesitate to write me a quick email or tweet. I’d love to hear from you. As soon as the project is live, you can also file a bug or create an issue on GitHub. Thank you so much!

The goal is to end up with an accessible mega menu component that can be published and open sourced. The website project is publicly funded and open sourcing the code I write for it also seems to be a good way to give back to the public and make sure the work isn’t lost.

Last week, after Ethan Marcotte wrote his passionate clarion call for action, I, too, wrote about our obligation to build an inclusive Web for all and share what we learned. From now on, you will be hearing a lot more about accessibility from me. This post is the first in what will hopefully become a little series. I will make each post as concise as I can and try to bring in my design as well as my development experience, so there’s something in it for both domains.

I really hope you’ll be back for the next article. If you are planning to do so, consider subscribing to my RSS feed for articles and notes to stay in the loop.

Prototyping.news: For a monthly update on the latest articles, tools, and other resources about prototyping for the Web, sign up for my free newsletter Prototyping.news.

~

ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.