WordPress Menu Accessibility - 10 Menus Compared: Practical Tests

This is part one of a two-part series where I test the accessibility of 10 different menus from some of the most popular WordPress themes and Page Builders.

In this video, I'll show you how we do some practical accessibility testing on menus, and I'll point out some of the most common issues we find. In the next video, we'll dive deep into the criteria I tested each menu against and we'll see how they all stack up.

❗ See below for resources & timestamps.

? Video Transcript and Blog Post:
https://peakperformancedigital.com/accessible-menu-testing-part-1/

? My Website:
https://peakperformancedigital.com

✅ Connect With Me:
• Facebook: https://www.facebook.com/peakperformancedigital/
• LinkedIn: https://www.linkedin.com/company/peakperformancedigital
• YouTube: https://www.youtube.com/channel/UCrFyA8spcuzlhLVYrrhhUdQ
• Twitter: https://www.twitter.com/peakperfdigital
• Instagram: https://www.instagram.com/peakperformancedigital/

⚙️Tools I Use:
• WordPress.org: https://wordpress.org/
• Pinegrow Website Editor: https://pinegrow.com/

? Resources:
• WCAG 2.1 Quick Reference: https://www.w3.org/WAI/WCAG21/quickref/
• WAI Menus Tutorial - https://www.w3.org/WAI/tutorials/menus/
• WAI-ARIA Authoring Practices - https://w3c.github.io/aria-practices/#disclosure
• Example WAI-ARIA Disclosure Navigation Menu - https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation.html
• Example WAI-ARIA Disclosure Navigation Menu with Top-Level Link - https://w3c.github.io/aria-practices/examples/disclosure/disclosure-navigation-hybrid.html

? Products, Links and Versions Tested:
• WordPress 6.0.3 Twenty Twenty Two Theme (Block and Classic Menus) - https://wordpress.org/
• WordPress 6.1 RC-1 - https://wordpress.org/
• Elementor 3.7.8 and Pro 3.6.5 - https://elementor.com/
• Bricks 1.5.5 - https://bricksbuilder.io/
• Oxygen Builder 4.0.4 - https://oxygenbuilder.com/
• Breakdance 1.0.3 - https://breakdance.com/
• GeneratePress 3.1.3 and Pro 2.1.2 - https://generatepress.com/
• Kadence 1.1.30 and Pro 1.0.5 - https://www.kadencewp.com/
• Pinegrow (Just a front-end visual builder, it does not have a menu element) - https://pinegrow.com/

⌚ Timestamps:
00:00 - Introduction
00:20 - About me
00:36 - Accessible menus
00:53 - Why these tests?
01:14 - Testing criteria
01:36 - Practical testing
01:47 - Visual overview
02:12 - Cognitive considerations
02:34 - Keyboard testing
03:33 - Screen readers
05:47 - Menu Test 1 - WordPress
06:05 - Menu Test 2 - Elementor
06:22 - Menu Test 3 - Bricks
07:01 - Menu Test 4 - Oxygen
07:30 - Menu Test 5 - Breakdance
08:16 - Menu Test 6 - Generate Press
08:35 - Menu Test 7 - Kadence
08:46 - Menu Test 8 - Max Mega Menu
09:11 - Menu Test 9 - My Menu
09:33 - Wrap-Up
10:00 - Outro