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.

Designing for Accessibility - Front End North - September 2016

420 views

Published on

A lightning talk on Designing for Accessibility. A look at the accessibility implications of some common design patterns. Featuring:
- Colour contrast
- Using colour to convey meaning
- Text justification
- Placeholders

Published in: Technology
  • Be the first to comment

Designing for Accessibility - Front End North - September 2016

  1. 1. Coolfields Consulting www.coolfields.co.uk @coolfields Designing for Accessibility Graham Armfield Web Accessibility Consultant WordPress Developer graham.armfield@coolfields.co.uk @coolfields
  2. 2. What I’m going to cover Accessibility of websites and apps is primarily down to markup – HTML or native app languages. But… Design decisions can also influence accessibility too. @coolfields
  3. 3. What I’m going to cover • Colour • Catering for keyboard users • Text and content • Forms @coolfields
  4. 4. Coolfields Consulting www.coolfields.co.uk @coolfields Colour
  5. 5. Video From http://a11ymemes.tumblr.com
  6. 6. Colour contrast – text/background 6@coolfields
  7. 7. Colour contrast – text/background 8@coolfields http://paciellogroup.com/resources/contrastAnalyser
  8. 8. So, good colour contrast is important. But, you can have too much… @coolfields
  9. 9. Pic by Julian Warren A true story
  10. 10. Colour contrast for dyslexics @coolfields On The Beach The sun baked down as I stumbled across the ground. I climbed way up to the top of the hill, They all seem higher, and they always will. To think I once had a postcard of this view, sent by you, How things change. Original View What Tracy needs On The Beach The sun baked down as I stumbled across the ground. I climbed way up to the top of the hill, They all seem higher, and they always will. To think I once had a postcard of this view, sent by you, How things change. Dyslexia affects approx 10% of the population, so over 6 million people in the UK. Lyrics © Graham Armfield
  11. 11. 13 Colour blindness affects approx 8% of the male population, but only 1 in 200 females. So that's about 2.7 million people in the UK alone.
  12. 12. Using colour to convey meaning 14 Project Name Status Fully Resourced? Easy peasy project a Quite a tricky project a So glad I'm not on that project r Going OK a @coolfields Red-green colour blindness is the most common type of colour blindness.
  13. 13. Coolfields Consulting www.coolfields.co.uk @coolfields Photo: mo llsh Penalty Shoot-out Ghana USA 1 2 3 4 5
  14. 14. Coolfields Consulting www.coolfields.co.uk @coolfields Photo: mo llsh Penalty Shoot-out Ghana USA 1 2 3 4 5 a a a a a X X X
  15. 15. Indicating links with just colour 17@coolfields
  16. 16. Indicating links 18@coolfields
  17. 17. Coolfields Consulting www.coolfields.co.uk @coolfields
  18. 18. Links – define focus states also For sighted keyboard users… Keyboard focus should be at least as obvious as hover state. 20 Keyboard Focus Hover
  19. 19. But sometimes the default browser focus indication just isn't enough 21 No Focus Got Focus
  20. 20. From http://a11ymemes.tumblr.com
  21. 21. No keyboard focus indication across the entire site.
  22. 22. Coolfields Consulting www.coolfields.co.uk @coolfields Text & Content
  23. 23. "Rivers of white space" Text justification 26 Left aligned textFully justified text
  24. 24. Coolfields Consulting www.coolfields.co.uk @coolfields Forms Photo: AlecCouros
  25. 25. Video From http://a11ymemes.tumblr.com
  26. 26. Placeholders 29
  27. 27. Placeholders 30 https://www.w3.org/TR/html5/forms.html#the-placeholder-attribute
  28. 28. Thanks for listening Any questions? See me afterwards. graham.armfield@coolfields.co.uk @coolfields 31

×