Designing for Accessibility - Front End North - September 2016
•
2 likes•557 views
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
Recommended
More Related Content
More from Graham Armfield
More from Graham Armfield (20)
Recently uploaded
Recently uploaded (20)
Designing for Accessibility - Front End North - September 2016
- 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 8@coolfields http://paciellogroup.com/resources/contrastAnalyser
- 8. So, good colour contrast is important. But, you can have too much… @coolfields
- 9. Pic by Julian Warren A true story
- 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. 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. 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. Coolfields Consulting www.coolfields.co.uk @coolfields Photo: mo llsh Penalty Shoot-out Ghana USA 1 2 3 4 5
- 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. Indicating links with just colour 17@coolfields
- 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. But sometimes the default browser focus indication just isn't enough 21 No Focus Got Focus
- 21. No keyboard focus indication across the entire site.
- 23. "Rivers of white space" Text justification 26 Left aligned textFully justified text
- 26. Placeholders 29
- 28. Thanks for listening Any questions? See me afterwards. graham.armfield@coolfields.co.uk @coolfields 31
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.
- Cause difficulty for many people – in many different ways.