General steps for building an accessible ARIA widget

Pick the widget type from ARIA
- http://www.w3.org/TR/aria-state/, http://www.w3.org/TR/aria-role/
- Get the list of supported states and properties
- Establish and the widget structure in the markup (parent/child)
- Repeat this for the children
Reference and implement the keyboard navigation
- http://www.w3.org/WAI/PF/aria-practices/
- Follow desktop keyboard navigation if unavailable
- Ensure there is a keyboard equivalent for all mouse operations
Apply and manage needed states and properties from ARIA
Establish ARIA relationships between this widget and others
- labelledby, controls, describedby, flowto, owns, posinset, setsize
Support basic a11y: Alt text on images
Do not hard code sizes
- Fonts - use constants or ems
- Widgets - be careful of hard coding sizes (based on em height)
Test with Firefox, Assistive Technology (Screen Reader/magnifier), PWDs