web-a11y-class

A simple popup color picker built as a teaching tool for desktop web accessibility.

Exercise 1: Make the color picker keyboard accessible

Success Criteria

• Ability to navigate to the button using the keyboard
• Focus should move to the popup when it is open
• Ability to use the arrow keys to move between the colors
• Enter or Spacebar should select the color
• Esc should close the popup and move focus back to the button

Exercise 2: Use ARIA to make the color picker accessible to users of VoiceOver

Success Criteria

• User should be able to perceive the button as a popup button
• Ability to perceive the color picker as a menu
• Ability to perceive the menuitems as radio-like controls
• Ability to differentiate between menuitems
• Ability to perceive the currently selected color

ARIA Resources

• List of ARIA roles, states and properties on MDN
• Using ARIA in HTML