PB101: L16 - Simple Accessible Navigation

Every website needs navigation. But not just any navigation will do. When it comes to adding navigation to modern websites, there are some essential boxes you need to check.

❓ Is the nav simple and logical?
❓ Can you navigate it with the keyboard?
❓ Can you navigate dropdowns with the keyboard?
❓ Can you navigate top-level links without triggering the dropdowns?
❓ Is there a nav landmark tag?
❓ Does the nav use proper ul and li list structure?
❓ Does the navigation announce properly on assistive technology?
❓ Does the menu collapse to a trigger on mobile?
❓ Is the trigger a button element?
❓ Does the trigger have a working aria-expanded attribute?
❓ Is the current page marked with aria-current?

In this video, we'll look at all these questions, and I'll demonstrate how you can use a page builder like Bricks to add simple, accessible navigation to your website.

Note: MANY page builders do not check these essential boxes. If you aren't using Bricks, you'll want to check the navigation manually to make sure these boxes are checked.

Forgot to mention in this video:

1. Proper headers should also have a Skip Link so users with assistive technology can completely skip the navigation and go straight to page content.

2. If you want to test your page with Apple Voiceover, you can use the keyboard shortcut CMD + F5.

** MY TOOLS **

🔥 AutomaticCSS (ACSS) - https://automaticcss.com
🔥 Frames - https://getframes.io
See all my recommended tools here: https://geary.co/tools/

** INNER CIRCLE **

Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.

⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!

Learn more and join here: https://geary.co/inner-circle/

** SOCIAL **

👉 FB -   / marketingkev  
👉 LinkedIn -   / kevingeary  

** CHAPTERS **

0:00 Intro
2:25 Adding Navigation
6:00 Creating Menu in WordPress
9:56 Basic Styling in Bricks
17:02 Code Inspection
21:20 Testing Keyboard Navigation
29:10 Wrap-up