Accessible Website Navigation

A website isn’t very useful if people can’t easily move from page to page. While navigation might seem simple and easy at first glance, there’s a lot of complexity and a lot of things that can (and do) go wrong.

In this workshop, we’ll discover how people with disabilities rely on proper HTML structure, ARIA attributes, smart Javascript, and CSS styles to interact with navigation menus. We’ll cover coding techniques to ensure your menus are accessible and usable by everyone, whether those menus are drop-downs, fly-outs, hamburger/off-canvas, or mobile. I’ll show you how to test your navigation to ensure it’s keyboard accessible, what design considerations come into play, and how to add handy tools and shortcuts for easily navigating a complex navigation structure without a mouse.

What You’ll Learn

• How website navigation is more than just the header menu
• How to make the main nav work for everyone even with sub-navs and mega menus
• How to use the right elements for mobile and off-canvas
  • ARIA
  • JavaScript
• Accessibility best practices
• Code examples for creating a more accessible site
• Common issues with CSS-only solutions

Resources

Download Local WP
Project Files (File > Import within Local)
ANDI Accessibility Bookmarklet
0to255 Color Picker
Gist for Trapping Focus