Slides from talk given at Front End London meetup in January 2013. http://www.frontendlondon.co.uk

1. ACCESSIBILITY &
UI DEVELOPMENT
Charlie Perrins
Friday, 18 January 13

2. postoffice.co.uk
Friday, 18 January 13

3. Enough waffle
• Accessibility requirements !=
constraints on complexity or beauty
• Accessibility ‘tips’ are often
just good coding practice
• Be prepared to accommodate
changes to your markup habits
• Automated testing also benefits
3
Friday, 18 January 13

4. Keyboard navigation
Friday, 18 January 13

5. Document heading order
5
Friday, 18 January 13

6. :hover, :focus, and :active
Friday, 18 January 13

7. tabindex
Friday, 18 January 13

8. tabindex
Friday, 18 January 13

9. tabindex
Friday, 18 January 13

10. tabindex
Friday, 18 January 13

11. display: none;
Friday, 18 January 13

12. Display: none?
• Control the focus of your document
– It’s OK to use display:none to hide your
content if you correctly control the focus so
that the next element in the tab order is the
right content for the user in context.
Friday, 18 January 13

13. BIG text
13
Friday, 18 January 13

14. BIG text
14
Friday, 18 January 13

15. :pseudo or not :pseudo?
Friday, 18 January 13

16. Arrow keys
Friday, 18 January 13

17. Why abstract?
Friday, 18 January 13

18. A few references
• Accessible JS tools
– http://hanshillen.github.com/jqtest
• Chromevox
– http://www.chromevox.com/
• ARIA
– http://www.w3.org/TR/wai-aria
Friday, 18 January 13