Access all screens
Laura Kalbag
@laurakalbag laurakalbag.com
Slide 2
Slide 2 text
designing for accessibility
isn’t just for “designers”
Slide 3
Slide 3 text
What is accessibility?
Slide 4
Slide 4 text
Accessibility is the degree to which an app or
website is available to as many people as possible.
Slide 5
Slide 5 text
accessibility isn’t just about screen readers
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Is it because we don’t understand
who we’re trying to help?
Slide 8
Slide 8 text
Is it because we just don’t know
what to do?
Slide 9
Slide 9 text
Is it because it’s too hard, and
there’s too much to think about?
Slide 10
Slide 10 text
I’ve not got the answers
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
The business case
£€$
Slide 13
Slide 13 text
http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf
Improvements in accessibility doubled Legal and
General’s life insurance sales online
Slide 14
Slide 14 text
http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf
Improvements in accessibility increased Tesco’s
grocery home delivery sales by £13M in 2005
Slide 15
Slide 15 text
http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf
Improvements in accessibility increased
Virgin.net sales by 68%
The four (main) types of disability that
affect use of the web and mobile devices
Slide 18
Slide 18 text
Visual
Slide 19
Slide 19 text
Hearing
Slide 20
Slide 20 text
Motor
Slide 21
Slide 21 text
Cognitive
Slide 22
Slide 22 text
None of these disabilities are completely
black and white
Slide 23
Slide 23 text
mild
moderate
moderately severe
severe
profound
astigmatism
sensitivity
colour blindness
akinetopsia
blindness
hearing eyesight
Slide 24
Slide 24 text
Visual make it easy to read
Slide 25
Slide 25 text
Hearing make it easy to hear
Slide 26
Slide 26 text
Motor make it easy to interact
Slide 27
Slide 27 text
make it easy to understand and focus
Cognitive
Slide 28
Slide 28 text
Good accessibility is good usability
Slide 29
Slide 29 text
Design decisions made in the name of
accessibility will largely benefit everyone.
Slide 30
Slide 30 text
Examples
Slide 31
Slide 31 text
Disclaimer
Slide 32
Slide 32 text
Text
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
Squinting does not make an
enjoyable reading experience
Slide 40
Slide 40 text
1. Make text content easy to read.
2. Ensure sensible font sizes.
3. Don’t prevent the user from resizing
the fonts themselves in the browser.
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
1. Good copy is a part of good
accessibility. Keep your text simple
and your meaning clear.
Slide 47
Slide 47 text
Colour
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
The screens you test on aren’t always
the same as everybody else’s screens
Slide 52
Slide 52 text
1. Use colour contrast tools to ensure
your text is high-contrast enough.
2. Beware of super-high contrast too.
Slide 53
Slide 53 text
Content hierarchy
Slide 54
Slide 54 text
This is a top-level heading
This is a paragraph. It has some text in it. It’s a few
sentences long. A lot of paragraphs look like this.
This is a second level heading.
This is a paragraph which has some links to other
content and a button that allows you to take action.
Slide 55
Slide 55 text
This is a top-level heading
This is a paragraph. It has some text in it. It’s a few sentences
long. A lot of paragraphs look like this.
This is a second level heading.
This is a paragraph which has some links to other content and
a button that allows you to take action
Slide 56
Slide 56 text
Randomly enlarging and colouring
text does not make a hierarchy.
Slide 57
Slide 57 text
1. Make the content structure clear and
consistent.
2. Use semantic headings, labels, lists
and other relevant elements for your
HTML or native controls.
Slide 58
Slide 58 text
Buttons and links
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
Sometimes the links are the same
colour and style as the rest of the text
and you only find out it’s a link when
you hover over it.
Slide 61
Slide 61 text
Sometimes the links are the same
colour and style as the rest of the text
and you only find out it’s a link when
you hover over it.
Slide 62
Slide 62 text
Finding interactive elements should
not be a game.
Slide 63
Slide 63 text
1. Make buttons and interactive
elements easyily distinguishable from
non-interactive elements.
2. Make links easy to recognise by using
an underline.
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Why should I click there?
Slide 69
Slide 69 text
1. Use button and link text that makes
sense out of context. Don’t use “click
here”.
2. Remember that not all your users are
clicking. Inputs wary across different
devices.
Slide 70
Slide 70 text
Media
Slide 71
Slide 71 text
No, I don’t want to listen to your
podcast or watch your video
tutorial. Give me text!
Slide 72
Slide 72 text
1. Provide text alternatives for images
that helps a user understand the
context of the image.
Slide 73
Slide 73 text
1. Provide text transcripts for audio.
2. Provide subtitles for video.
Slide 74
Slide 74 text
Animations
Slide 75
Slide 75 text
Wait for me!
Slide 76
Slide 76 text
1. Give users enough time to read and
use content
Slide 77
Slide 77 text
JavaScript
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
1. Use JavaScript with care and load it in
a sensible place.
2. If your web site or app needs
JavaScript, ensure you use WAI ARIA
to guide assistive technologies.
Slide 82
Slide 82 text
Navigation and way-finding
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
The days of flash are over, stop punishing
me with your artsy navigation.
Slide 86
Slide 86 text
1. Provide consistent ways to help users
navigate, find content, and determine
where they are.
Slide 87
Slide 87 text
Forms
Slide 88
Slide 88 text
First name
Last name
Email address
Laura
Kalbag
email@laurakalbag.com
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
Don’t make me guess what
and where the error is.
Slide 92
Slide 92 text
1. Help users correct and avoid
mistakes in their input.
Slide 93
Slide 93 text
Resources
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
Consider accessibility at every point of
planning. It is functionality, content hierarchy,
copy, visual design and code.
Slide 106
Slide 106 text
Accessibility as default
Slide 107
Slide 107 text
Accessibility is easy to consider
once you start caring about it.