Menus [A to Z a11y]

Be our guest – would you like to look at the menus?

Welcome, honoured guest, to the midway point in the A to Z Accessibility: Power Platform Edition. Today we are looking at Menus. I’m talking hamburgers, stacks, waffles, and more. Are you drooling like Homer Simpson yet?

There is some crossover with the J – Jump! post here so please do go check that post out as well. This ties in with the WCAG Guideline website and guideline 3.2.3 for Consistent Navigation.https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation. There is also a whole section, including tutorials, on the W3C website here.

This post is a rare one (like my steaks) in that is applies to Power Apps, Power Pages, Power BI and even pro-coders or web designers building full-fat applications or websites.

So, what’s a Menu?

Yeah, I know, it sounds obvious – but there are so many types of menus that it’s important to look at them.

•  The Hamburger / Stack. Probably the most used type of menu nowadays. Used on Mobile devices, Web Apps, PC Apps and more. This is the 3-line menu that expands/contracts and can be used for everything from navigation to full on app functions.

• The Waffle. A grid of 9 dots that tends to open a list of applications within a suite or platform. It can also be substituted by a logo but does the same thing.
• The traditional Menu Bar. Any user of a PC/Mac will know the menu bar. This will normally have some variation/addition of File, Home, Edit, View, Help etc and presents either a series of dropdown menus or a ribbon of buttons and options.

• The Side-Menu. Often combined with the Hamburger and can also be used in combination with the horizontal menu bar/ribbon.
• The Popup/Context menu. AKA the Right-Click Menu. This is the one that appears when you right-click somewhere on a screen and get a context-sensitive menu presenting options and actions relevant to where you are. This also applies when you have text highlighted or click on an object such as an image.
• And more… There are many others including things like the profile menu and floating menus, but I can’t list them all.

A menu to success, or a recipe for disaster

When we get to U, I will be looking at User eXperience and User Interface (UX/UI) but a good menu can play a core role in a good experience. It doesn’t matter if you’re building a complex ERP or a shiny new website, menus matter.

Likewise, accessibility can be helped by good menus – or severely hindered. Navigation and control are key elements in getting good user engagement, if you use assistive technology or have some neurodiversities then this becomes even more important.

Menus enable users to find functions, control actions, and navigate apps and sites, with supposed ease of discovery and use. If a menu is not intuitive, logically structured, or impossible to find, then it’s failed in its purpose.

Pictures, words, both?

 Words can paint a picture, and a picture can tell a story, so what should menus use? If possible, the answer here is both. In some apps you may see the option to use Text, Images, or Show Both.

For some people, the fewer words the better, with icons expressing functionality. For others having the words is important. If we take users of screen readers, then words are always important. Menu options should be clear enough to know what they do, and succinct enough to be to the point and easy to spot.

Where possible, adding tooltips and screen-reader compatible descriptions to menus should also be included but these are extras rather than the main item. Screen reader users can skip or ignore tooltips etc. but having them there as options helps all users understand what an option will do.

Location, location, location

With all the different kinds of menus, what’s the best location for them? Context/Popup menus by their very nature should always appear where the touch/mouse-click occurs but what about other menus?

Here, consistency and ease of functionality is key. Also important is the order that the menu will appear with other elements. Making menus easy to find when using screen readers, or magnifiers, etc. is important. Similarly, for websites etc. having the menu easily located and understandable makes for a better web experience.

For desktop apps, having a hamburger/stack in the bottom-right corner doesn’t make much sense from a general usability perspective. On a mobile device, it’s one of the standard locations and works well.

Having numerous menus that appear all over, and mix up where to find controls, is a nightmare for anyone. Yes, I have seen apps like that… and very quickly tried to find alternatives!

We hope you enjoyed your meal, erm I mean reading…

Thank you for reading this post. This is part of the A to Z Accessibility: Power Platform Edition. To catch up on all articles you can click here to go to the introduction article where I will have a Table of Contents. You can also check out the Accessibility section of the website from the top menu or by going directly to the category page here.

Content in this series is © Mike Hartley. I am happy for folks to quote or reuse snippets (with attribution) but this has taken a lot of work to compile so please do not copy whole sections. If there are any corrections or suggestions, then please use my social links to contact me. I am always happy to add additional content and remarks with full credit given. Likewise, these pages will evolve as my learning and understanding grows, so make sure to keep this bookmarked