Accessibility & UI Development
1 like1,407 views
The document discusses several tips for developing accessible and user-friendly user interfaces, including using proper heading order, keyboard navigation, focus control with display: none, text sizing, pseudo-classes, and arrow key handling. It emphasizes that accessibility is good coding practice and encourages automated testing to accommodate future changes.
Accessibility & UI Development
- 1. ACCESSIBILITY & UI DEVELOPMENT Charlie Perrins 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
- 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