Complex UI Accessibility 5 tips to improve accessibility

Complex UI & Accessibility 5 tips to improve accessibility when building interactive page elements Charlie Perrins, DARE

Tips 1 2 3 4 5 : hover, : focus, and : active Tabindex Capture keyboard events Consider ARIA roles Judicious use of display: none;

: hover, : focus, and : active

tabindex

Capture keyboard events • Use the arrow keys • Focus & Blur • Abstract your JS into named functions

Arrow keys

Real world example

Why bother with ARIA? • ARIA roles affect the screenreader’s ouput • Listen to your page in a screenreader – Chromevox is easy to install and use • I’m not an expert – still learning!

Why bother with ARIA?

Why bother with ARIA? • More functionality available – E. g. the ‘aria-labelledby’ and ‘aria-describedby’ attributes allow us to explicitly link each tab control to its respective panel • Don’t bloat your markup – this stuff can be added by Java. Script • Further reading – W 3 C ARIA Roles Model – Snooze. I know…

Display: none? • Screenreaders won’t announce elements hidden by display: none; • Control the focus of your document – OK to use display: none e. g. to hide your tab content if you correctly control the focus so that the next element in the tab order is the newly shown tab content • Use left-margin tricks to hide text that you want to be announced without being visible on-screen, – e. g. label for search box in site header – See HTML 5 Boilerplate comments for good tricks

Useful Links • Accessible j. Query widgets http: //hanshillen. github. com/jqtest • Chromevox https: //chrome. google. com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn • WAI-ARIA widget roles http: //www. w 3. org/TR/wai-aria/roles#widget_roles