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

Tips 1:hover, :focus, and :active 2Tabindex 3Capture keyboard events 4Consider ARIA roles 5Judicious 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?

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 JavaScript Further reading – W3C 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 HTML5 Boilerplate comments for good tricks

Useful Links Accessible jQuery widgets Chromevox WAI-ARIA widget roles