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

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

3. :hover, :focus, and :active

5. tabindex

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

10. Arrow keys

11. Real world example

12. 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!

13. Why bother with ARIA?

15. 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…

16. 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

17. Useful Links Accessible jQuery widgets http://hanshillen.github.com/jqtest http://hanshillen.github.com/jqtest Chromevox https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn https://chrome.google.com/webstore/detail/kgejglhpjiefppelpmljglcjbhoiplfn WAI-ARIA widget roles http://www.w3.org/TR/wai-aria/roles#widget_roles http://www.w3.org/TR/wai-aria/roles#widget_roles