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 - WordCamp London 2017

933 views

Published on

An updated and expanded version of this presentation that looks at how design decisions can affect the accessibility of a website.

Subjects covered:
- Use of colour, and colour contrast
- Catering for keyboard users
- Text and Content
- Placeholders and forms

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Designing for Accessibility - WordCamp London 2017

  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 7@coolfields http://paciellogroup.com/resources/contrastAnalyser
  8. 8. Colour contrast – text/background 8@coolfields http://paciellogroup.com/resources/contrastAnalyser
  9. 9. Colour contrast – between elements 9@coolfields Low vision affects around 2 million people in the UK.
  10. 10. So, good colour contrast is important. But, you can have too much… @coolfields
  11. 11. Pic by Julian Warren A true story
  12. 12. 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
  13. 13. 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.
  14. 14. 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.
  15. 15. Coolfields Consulting www.coolfields.co.uk @coolfields Photo: mo llsh Penalty Shoot-out Ghana USA 1 2 3 4 5
  16. 16. 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
  17. 17. Showing links with just colour 17@coolfields
  18. 18. Showing links with more than colour 18@coolfields
  19. 19. Coolfields Consulting www.coolfields.co.uk @coolfields
  20. 20. Links, Buttons – define focus states as well as hover states For sighted keyboard users… Keyboard focus should be at least as obvious as hover state. 20 Keyboard Focus Hover
  21. 21. Sometimes the default browser focus indication just isn't enough 21 No Focus Got Focus (In Firefox)
  22. 22. From http://a11ymemes.tumblr.com
  23. 23. No keyboard focus indication across the entire site.
  24. 24. Demo of keyboard focus Good sites • Gov.uk • M&S Bank Not so good sites • Men’s Health magazine • (Lego Shop)
  25. 25. Coolfields Consulting www.coolfields.co.uk @coolfields Text & Content
  26. 26. Normal size NB: Resizing and zooming are not the same thing. Can your design handle resizing? 26@coolfields Larger size
  27. 27. Normal size This design does handle resizing 27@coolfields Larger size
  28. 28. Demo of text resizing/zooming Good sites • Lego shop Not so good sites • Evans Cycles • Dyson
  29. 29. Text justification 29 Left aligned text
  30. 30. "Rivers of white space" Text justification 30 Left aligned textFully justified text
  31. 31. Coolfields Consulting www.coolfields.co.uk @coolfields Forms Photo: AlecCouros
  32. 32. Video From http://a11ymemes.tumblr.com
  33. 33. Placeholders 33
  34. 34. Placeholders 34 https://www.w3.org/TR/html5/forms.html#the-placeholder-attribute
  35. 35. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 35

×