Keyboard Testing

It's sadly common just how little keyboard accessibility is considered.

Even on big sites for paying bills or banking where there are legal requirements for accessibility, keyboard access is unfortunately forgotten. It might make you cringe a bit, but we can use that cringe to motivate us to fix it!

Things you should look out for include missing focus outlines, a lack of reachability (focusability) on interactive elements, and a lack of operability with the keyboard on those interactive elements.

Tools that can help as you diagnose and fix keyboard access issues:

• Your Tab key
• Browser DevTools

Exercise: Improve keyboard accessibility in the megamenu, home, and about pages

Using the files in this directory as a reference, improve keyboard access on these pages:

• index.html
• about/index.html

URL to view "fixed" files locally:

http://localhost:1234/exercise1-keyboard

URL to view a deployed version for this exercise:

https://workshop-manual-a11y-testing.testingaccessibility.com/exercise1-keyboard

Files you'll touch to make these improvements include:

• index.html
• about/index.html
• _includes/header.html
• js/menu.js
• scss/_defaults.scss
• scss/_header.scss