Skip to content

Duck Tales Episode 1: Keyboard

A 30 minute session to get some practice with a part of QACing.

Warm-up

Here are a few questions about keyboard testing. Pick one and bring your answer along to the session!

  • Who uses the keyboard?
  • What key does what?
  • What do the Web Content Accessibility Guidelines say about keyboard accessibility?
  • What keyboard testing do you already do?

Share your answers

Here are some example answers. Don’t peek until you’ve shared your own, though!

Who uses the keyboard?
  • “Power users” use the keyboard because it’s more efficient. More accurate, easier muscle memory.
  • People with motor impairments find the keyboard easier or more comfortable to use.
  • Desktop screen reader users only use the keyboard. So many keyboard shortcuts! 🤩
What key does what?
  • Tab: next focusable element / group, Shift + Tab: previous focusable element / group.
  • ↑ ↓ ← →: between options in group.
  • For specific UI elements, choose the pattern in ARIA Authoring Practices Guide (APG) and go to the Keyboard Interaction section.
What do the Web Content Accessibility Guidelines say about keyboard accessibility?

Lots! Some under Perceivable, more under Operable. [Filter the Quick Reference by the keyboard tag](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&showtechniques=123%2C242&tags=keyboard&technologies=smil%2Cpdf%2Cflash%2Csl#keyboard-accessible) to see them all.

Check that everything works with the keyboard

After five minutes of testing, stop and do a one-minute review with a partner. What did you do, what did you learn?

  • Can you use every interactive element (links, buttons, form controls) on the page?
  • Can you see where you are on the page?
  • Can you complete your task easily, compared to using a mouse or trackpad?

How to move around

  • Tab: moves to next interactive element / group.
  • Shift + Tab: moves to previous interactive element / group.
  • ↑ ↓ ← →: moves between options in a group.
  • Space: toggles the selected element.
  • Enter: performs the action.
  • Escape: escapes! Closes things that are open.

What’s a group? A “pick only one” set of fields.

If you’re only testing part of a page, you can skip some Tabs by clicking on any element just before your testing section. The clicked element doesn’t have to be interactive!

Video

Keyboard Compatibility video (1 minute) from the WAI (Web Accessibility Initiative) Perspectives Videos.

Cool-down

What next?

Set yourself a goal to put what you learned into practice.

  • What will you do?
  • When will you do it?
  • Where will you do it?
  • Who will be involved?
  • How will you do it?
  • Why do this?

Write a sentence starting with “I will…”. Include as many of the 5Ws and 1H as you can for best results!

Quick reflection

Pick one to answer and share with the group.

  • What did you enjoy about the session?
  • What surprised you?
  • How confident do you feel testing with the keyboard now?

Further Reading