Accessibility & UI Development

1,469 views
1,354 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,469
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×