woman using wcag accessible drop down menu on mobile phoneDo you utilize a Drop Down Menu on your website? If you do and youre aiming for WCAG compliance, its crucial you compare your Drop Down Menus usability to the Web Content Accessibility Guidelines 2.1 protocol.

Why are Drop Down Menus not accessible?

Drop Down Menus, or Fly-Out Menusas WCAG refers to them, can be difficult or downright impossible for users with mobility impairments to navigate.

Many users with reduced dexterity do not have the ability to use a mouse and rely on keyboard commands to navigate a web page. While top-level menu items are keyboard accessible, interactive features like Drop Down Menus are may not be.

Therefore, its imperative to provide access to the dropdown and have links elsewhere (such as a sitemap), if youre aiming for accessibility.

What about Drop Down Menus on Mobile?

Ever tried to use a Drop Down Menu on your phones internet browser? Then you may be familiar with the pitfalls of Drop Down Menus on mobile.

The April 2018 updated guidelines, WCAG 2.1, expanded WCAG 2.0s definition of accessibility to include users with low vision and disabilities on mobile devices.

Often times when using a mobile device, the options in a pop up menu are obscured, especially in magnified views. A user needs to scroll or zoom out to see the menu options in entirety, which causes the user to move their focus and the pop up menu disappears.

In order for a drop down menu to be accessible on mobile devices, programmers must provide other ways to access the submenu items as well as ensure all users can perceive the Drop Down Menu and dismiss it without disrupting their page experience.

How do I ensure my Drop Down Menu is accessible?

WCAG has provided a quick tutorial for programmers to ensure their Drop Down and Fly Out Menus are accessible to all.

Essentially, by using CSS and scripting with separate considerations for mouse versus keyboard users, you can ensure functionality for all users.

For more information on these specific modifications and making your website WCAG 2.1 compatible, be sure to check out the full set of guidelines on W3C’s website.

Need help making your website WCAG 2.1 compatible? Our team of programmers is passionate about making your website accessible for everyone.

Give us a call today at 518-743-9424 or contact us online to get the conversation started!

About John Volza

Originally from the Utica, NY area, John graduated with a BA in English and Gender Studies from Skidmore College in 2016, and currently resides in Saratoga Springs, NY. John brings a varied work experience, including previously working as a radio disc jockey, manager of a local coffee roasting factory and small commercial insurance underwriter, where he worked directly with small business owners fulfilling their insurance needs. John is passionate about helping small businesses and is excited for the opportunity to work with a variety of local and national clients as a member of the Mannix Marketing team. Outside of work, John loves to cook, play video games, and sell vintage clothing online. Having gone to college in Saratoga Springs, he’s very happy to have returned to the area and can often be found downtown walking through Congress Park or trying out the newest bars and restaurants.