Do you utilize a Drop Down Menu on your website? If you do and you’re aiming for WCAG accessibility, it’s crucial you compare your Drop Down Menu’s usability to the Web Content Accessibility Guidelines 2.1 protocol.
Why are Drop Down Menus not accessible?
Drop Down Menus, or “Fly-Out Menus” as 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, it’s imperative to provide access to the dropdown and have links elsewhere (such as a sitemap), if you’re aiming for accessibility.
What about Drop Down Menus on Mobile?
Ever tried to use a Drop Down Menu on your phone’s 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.0’s 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 accessible? 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!