Designing for Accessibility - WordCamp London 2017
•
0 likes•2,248 views
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
Report
Share
Designing for Accessibility - WordCamp London 2017
- 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. 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. What I’m going to cover • Colour • Catering for keyboard users • Text and content • Forms @coolfields
- 6. Colour contrast – text/background 6@coolfields
- 7. Colour contrast – text/background 7@coolfields http://paciellogroup.com/resources/contrastAnalyser
- 8. Colour contrast – text/background 8@coolfields http://paciellogroup.com/resources/contrastAnalyser
- 9. Colour contrast – between elements 9@coolfields Low vision affects around 2 million people in the UK.
- 10. So, good colour contrast is important. But, you can have too much… @coolfields
- 11. Pic by Julian Warren A true story
- 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 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. 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. Coolfields Consulting www.coolfields.co.uk @coolfields Photo: mo llsh Penalty Shoot-out Ghana USA 1 2 3 4 5
- 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. Showing links with just colour 17@coolfields
- 18. Showing links with more than colour 18@coolfields
- 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. Sometimes the default browser focus indication just isn't enough 21 No Focus Got Focus (In Firefox)
- 23. No keyboard focus indication across the entire site.
- 24. Demo of keyboard focus Good sites • Gov.uk • M&S Bank Not so good sites • Men’s Health magazine • (Lego Shop)
- 26. Normal size NB: Resizing and zooming are not the same thing. Can your design handle resizing? 26@coolfields Larger size
- 27. Normal size This design does handle resizing 27@coolfields Larger size
- 28. Demo of text resizing/zooming Good sites • Lego shop Not so good sites • Evans Cycles • Dyson
- 29. Text justification 29 Left aligned text
- 30. "Rivers of white space" Text justification 30 Left aligned textFully justified text
- 33. Placeholders 33
- 35. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 35
Editor's Notes
- My day job is mainly training developers in accessibility, and helping them solve accessibility issues. But some aspects of the design can affect accessibility – both positively and not so positively I'm going to have a look at a few of those.
- Who are we building websites for? If a website is selling products or services, it's easy to miss out on sales if the site is inaccessible to some. If we're building websites for clients, the we are hampering their business.
- It's important to remember who we're designing and building websites for – not everyone is the same. What we want to avoid is the situation where people abandon a site because they can't use it easily. Many people have poor vision, and the population is getting older as people live longer.
- A site I was involved in creating some years ago. Requirement was for an accessible website for a children's nursery. The initial design was very attractive, but very little of the reached the necessary colour contrast guidelines.
- In some places it's obvious where colour contrast is low.
- Even the main content text lack sufficient contrast.
- The borders on form elements are vital for some people
- A 'real-life' business example from a previous employer
- A more leisure orientated example
- Using colour is fine – just make sure it's not the only way
- Another way that colour alone is used to convey meaning
- Some thoughts on catering for keyboard only users
- Sadly this seems to be becoming more popular – removing all keyboard focus indication.
- Similar in a way to designing for mobile.
- Similar in a way to designing for mobile.
- Cause difficulty for many people – in many different ways.