Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility & UI Development

1,693 views

Published on

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

Published in: Technology
  • Be the first to comment

Accessibility & UI Development

  1. 1. ACCESSIBILITY & UI DEVELOPMENT Charlie PerrinsFriday, 18 January 13
  2. 2. postoffice.co.ukFriday, 18 January 13
  3. 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 3Friday, 18 January 13
  4. 4. Keyboard navigationFriday, 18 January 13
  5. 5. Document heading order 5Friday, 18 January 13
  6. 6. :hover, :focus, and :activeFriday, 18 January 13
  7. 7. tabindexFriday, 18 January 13
  8. 8. tabindexFriday, 18 January 13
  9. 9. tabindexFriday, 18 January 13
  10. 10. tabindexFriday, 18 January 13
  11. 11. display: none;Friday, 18 January 13
  12. 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. 13. BIG text 13Friday, 18 January 13
  14. 14. BIG text 14Friday, 18 January 13
  15. 15. :pseudo or not :pseudo?Friday, 18 January 13
  16. 16. Arrow keysFriday, 18 January 13
  17. 17. Why abstract?Friday, 18 January 13
  18. 18. A few references • Accessible JS tools – http://hanshillen.github.com/jqtest • Chromevox – http://www.chromevox.com/ • ARIA – http://www.w3.org/TR/wai-ariaFriday, 18 January 13

×