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.
Coolfields Consulting www.coolfields.co.uk
@coolfields
Designing for Accessibility
Graham Armfield
Web Accessibility Consu...
What I’m going to cover
Accessibility of websites and apps is primarily
down to markup – HTML or native app
languages.
But...
What I’m going to cover
• Colour
• Catering for keyboard users
• Text and content
• Forms
@coolfields
Coolfields Consulting www.coolfields.co.uk
@coolfields
Colour
Video
From http://a11ymemes.tumblr.com
Colour contrast – text/background
6@coolfields
Colour contrast – text/background
7@coolfields
http://paciellogroup.com/resources/contrastAnalyser
Colour contrast – text/background
8@coolfields
http://paciellogroup.com/resources/contrastAnalyser
Colour contrast – between elements
9@coolfields
Low vision affects around 2 million people in the UK.
So, good colour contrast is important.
But,
you can have too much…
@coolfields
Pic by Julian Warren
A true story
Colour contrast for dyslexics
@coolfields
On The Beach
The sun baked down as I stumbled across
the ground.
I climbed way u...
13
Colour blindness
affects approx 8% of
the male population,
but only 1 in 200 females.
So that's about
2.7 million peopl...
Using colour to convey meaning
14
Project Name Status Fully
Resourced?
Easy peasy project a
Quite a tricky project a
So gl...
Coolfields Consulting www.coolfields.co.uk
@coolfields
Photo: mo llsh
Penalty Shoot-out
Ghana
USA
1 2 3 4 5
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
Showing links with just colour
17@coolfields
Showing links with more than colour
18@coolfields
Coolfields Consulting www.coolfields.co.uk
@coolfields
Links, Buttons – define focus states
as well as hover states
For sighted keyboard users…
Keyboard focus should be at least...
Sometimes the default browser
focus indication just isn't enough
21
No Focus Got Focus
(In Firefox)
From http://a11ymemes.tumblr.com
No keyboard focus indication
across the entire site.
Demo of keyboard focus
Good sites
• Gov.uk
• M&S Bank
Not so good sites
• Men’s Health magazine
• (Lego Shop)
Coolfields Consulting www.coolfields.co.uk
@coolfields
Text & Content
Normal size
NB: Resizing and zooming are not the same thing.
Can your design handle resizing?
26@coolfields
Larger size
Normal size
This design does handle resizing
27@coolfields
Larger size
Demo of text resizing/zooming
Good sites
• Lego shop
Not so good sites
• Evans Cycles
• Dyson
Text justification
29
Left aligned text
"Rivers of white space"
Text justification
30
Left aligned textFully justified text
Coolfields Consulting www.coolfields.co.uk
@coolfields
Forms
Photo: AlecCouros
Video
From http://a11ymemes.tumblr.com
Placeholders
33
Placeholders
34
https://www.w3.org/TR/html5/forms.html#the-placeholder-attribute
Thanks for listening
Any questions?
graham.armfield@coolfields.co.uk
@coolfields
35
Upcoming SlideShare
Loading in …5
×

of

Designing for Accessibility - WordCamp London 2017 Slide 1 Designing for Accessibility - WordCamp London 2017 Slide 2 Designing for Accessibility - WordCamp London 2017 Slide 3 Designing for Accessibility - WordCamp London 2017 Slide 4 Designing for Accessibility - WordCamp London 2017 Slide 5 Designing for Accessibility - WordCamp London 2017 Slide 6 Designing for Accessibility - WordCamp London 2017 Slide 7 Designing for Accessibility - WordCamp London 2017 Slide 8 Designing for Accessibility - WordCamp London 2017 Slide 9 Designing for Accessibility - WordCamp London 2017 Slide 10 Designing for Accessibility - WordCamp London 2017 Slide 11 Designing for Accessibility - WordCamp London 2017 Slide 12 Designing for Accessibility - WordCamp London 2017 Slide 13 Designing for Accessibility - WordCamp London 2017 Slide 14 Designing for Accessibility - WordCamp London 2017 Slide 15 Designing for Accessibility - WordCamp London 2017 Slide 16 Designing for Accessibility - WordCamp London 2017 Slide 17 Designing for Accessibility - WordCamp London 2017 Slide 18 Designing for Accessibility - WordCamp London 2017 Slide 19 Designing for Accessibility - WordCamp London 2017 Slide 20 Designing for Accessibility - WordCamp London 2017 Slide 21 Designing for Accessibility - WordCamp London 2017 Slide 22 Designing for Accessibility - WordCamp London 2017 Slide 23 Designing for Accessibility - WordCamp London 2017 Slide 24 Designing for Accessibility - WordCamp London 2017 Slide 25 Designing for Accessibility - WordCamp London 2017 Slide 26 Designing for Accessibility - WordCamp London 2017 Slide 27 Designing for Accessibility - WordCamp London 2017 Slide 28 Designing for Accessibility - WordCamp London 2017 Slide 29 Designing for Accessibility - WordCamp London 2017 Slide 30 Designing for Accessibility - WordCamp London 2017 Slide 31 Designing for Accessibility - WordCamp London 2017 Slide 32 Designing for Accessibility - WordCamp London 2017 Slide 33 Designing for Accessibility - WordCamp London 2017 Slide 34 Designing for Accessibility - WordCamp London 2017 Slide 35
Upcoming SlideShare
Designing for Accessibility - Front End North - September 2016
Next

0 Likes

Share

Designing for Accessibility - WordCamp London 2017

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

2,129

On Slideshare

0

From embeds

0

Number of embeds

68

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×