1.
Coolfields Consulting www.coolfields.co.uk
@coolfields
Beginners Guide to
Web Accessibility
Graham Armfield
Web Accessibility Consultant
WordPress Developer
graham.armfield@coolfields.co.uk
@coolfields

2.
What I‟m Going to Cover
• What is web accessibility?
• Why is it important?
• Who is affected by poor accessibility?
• How can accessibility be improved?
• When to think about accessibility?
2

3.
Coolfields Consulting www.coolfields.co.uk
@coolfields
What is Web Accessibility?
“Enabling the web so that everyone
can access its content when they
want to and how they need to”

4.
Accessibility vs Usability
4
Usability Accessibility

5.
Accessibility is not black and white
In most websites there are usually few accessibility
showstoppers. But…
• They do occur
• Websites can be fine for some people but totally
inaccessible for others
Web accessibility issues make life a harder for some people.
So, web accessibility is about making websites easy to use
for as many people as possible.
Remember, if people find your website hard to use they will
probably leave.
5

6.
Coolfields Consulting www.coolfields.co.uk
@coolfields
Why is Accessibility Important?
What is all the fuss about?

7.
Why is accessibility important?
The web is increasingly the world‟s preferred channel for:
• Knowledge
• Social interaction
• Commerce
But it‟s not always easy for:
• Those with disabilities
• Those who are getting older
Accessibility can increase the profitability of a website
Accessibility is a legal requirement
7

8.
Coolfields Consulting www.coolfields.co.uk
@coolfields
Who is Affected by Poor
Accessibility?
More people than you may think.

9.
Accessibility Myths - 1
It‟s just for a minority of people…
• 12 million people in UK have a recognised disability
• In the UK 15 million are over 55 – 12 million over 65
• Allowing for overlap between those with disability and those
over 65 there could be as many as 16.5 million people in UK
who could benefit from good accessibility in websites
9

10.
Accessibility Myths - 2
Accessibility is all about blind people…
• 1.8 million people have a vision impairment, of which
180,000 are registered blind
• 1 in 12 men have colour-blindness
• 2.6 million have difficulties using their hands which could
impact their use of keyboard and/or mouse
• About 2 million people have a hearing impairment, of which
50,000 use British Sign Language to communicate
• About 2 million people are dyslexic
• 2.2 million people have difficulty with memory,
concentration or learning, of which about 1 million have a
learning difficulty
10

11.
Accessibility Myths - 3
Yes, but my site is not meant for the blind/deaf/motor
impaired* (Delete as appropriate)
• People don‟t always browse/buy just for themselves
• You can‟t make assumptions about people
• Think about your site‟s reputation amongst friends and
family of PWD
• Studies in US show that friends and family of PWD will also
avoid inaccessible sites
11

12.
Accessibility Myths - 4
It‟s too expensive – not enough ROI
• PWD represent a market worth £80bn per year in the UK –
approx £320bn across EU
• Friends and family can add significantly to that
• 83% of disabled people will not return to a business that
does not meet their access needs.
• If a company‟s website is hard to use, people will visit a
competitor‟s site which is easier to use.
• Tesco – In 2001 an accessible version of their shopping site
was launched at a cost £35k and yielded £13m turnover a
year
12

13.
Accessibility Myths - 5
If I ignore it, it‟ll go away
• We are all getting older
• One in four will be over 65 by 2061
• How accessible do you want the web to be in 20/30/40
years time?
13

14.
Accessibility and the law
• Equality Act 2010 (Disability Discrimination Act in Northern
Ireland)
• Laws specifically refer to websites
14

15.
Accessibility Myths - 6
Yes but no-one ever gets sued anyway
• A number of actions started against companies but many
settled „out of court‟ with confidentiality clauses attached.
• In 2012 RNIB started an action publicly against BMI Baby. It
was impossible to book flights and reserve seats on their
website without using a mouse.
» The case was settled as BMI Baby agreed to make
changes.
» RNIB have indicated that they may be looking at more
actions in the near future.
15

16.
Types of disability/impairment
So who can experience difficulties with websites and apps?
Those with:
• Visual impairments
• Motor impairments
• Hearing impairments
• Epilepsy
• Cognitive impairments
71% of PWD have „invisible‟ disabilities or impairments
16

17.
Techniques to mitigate impairment
Accessibility options in browsers
• Mainly Internet Explorer + Firefox
• Specify colours, font styles and sizes
• Adjust text size without zooming – there is a difference
• Attach your own custom stylesheet (IE only)
17

18.
Assistive technology
18

19.
But complexity comes at a price
How much for a screen reader?
Open source to the rescue?
• NVDA screen reader
• free to download
• Mac and PC
• Improving all the time - http://www.nvda-project.org/
19

20.
Screen reader examples
1.BBC News with NVDA –
medium speed
2.BBC News with NVDA –
faster speed
20
Refreshable Braille Display
http://www.youtube.com/watch?v=R6XAPkiQMtw
at approx 2:06 in

21.
iPhones, iPads and blindness
• Many accessibility features built in
• Eg Voiceover – screen reader
• Speech recognition
• The result is that many blind users swear by their iOS
devices
21

22.
Coolfields Consulting www.coolfields.co.uk
@coolfields
How Can Accessibility be
Improved?
It‟s not rocket science.

23.
WordPress sites
Accessibility is influenced by three groups of people
23
Theme
Developers
Plugin
Developers
Content
Authors

24.
So what can we do?
• Remember, disabilities and impairments are not
absolutes
• Few websites are totally impossible for those with
impairments to use.
• But most websites are difficult for some people with
disabilities and impairments
• Every accessibility step that you take will make
life easier for someone
24

25.
Simple things we can do - 1
Images – correct use of
alternate text (alt attribute)
• Describe what image shows or
what it represents
• If a link, describe destination
• If decorative, leave blank
(alt=“”)
25
Relevant for:

26.
Simple things we can do - 2
Links
• Ensure that destination is clear
from the link:
My blog post: Read more
rather than
My blog post: Read more
• If link opens new tab or
window inform the user
26
Links list from JAWS screen
reader
Relevant for:

27.
Simple things we can do - 3
Use headings properly
• Semantic elements
• Often used as navigation
mechanism by screen reader
users
• Signpost content
27
Headings list from JAWS screen
reader
Relevant for:

28.
Simple things we can do - 4
Keyboard focus and operation
• Focus should be easily visible
• Tab order should make sense
• Ensure all functionality
accessible by keystrokes
28
Relevant for:

29.
Simple things we can do - 5
Text
• Good colour contrast
• Should allow itself to be
resized without breaking
layout (initially)
• Use of colour alone to convey
meaning
29
How not to do it
Relevant for:

30.
Simple things we can do - 6
Mark up forms correctly
• Use labels for input fields
• Fieldset for grouping controls
• Clear display of errors and
use text
• Don‟t use CAPTCHAs
30
Relevant for:
<label for="yourname">Your
name:</label>
<input type="text"
name="yourname"
id="yourname" value="" />
<input type=“checkbox"
name=“legal" id=“legal"
value=""
checked=“checked”/>
<label for=“legal">I have
read the legal page</label>

31.
Simple things we can do - 7
WAI-ARIA
• Roles/Landmarks help signpost
parts of web pages
• Live regions for dynamic
content
• More advanced roles for AJAX
sites and apps – including
mobile apps
31
Relevant for:

32.
Coolfields Consulting www.coolfields.co.uk
@coolfields
When Should I Think About
Accessibility?

33.
Implementing accessibility
• Accessibility is a lot harder and more expensive to retrofit.
• So it needs to be designed in from the start
• Think of it as another requirement – one which may not be
explicitly asked for.
33

34.
Coolfields Consulting www.coolfields.co.uk
@coolfields
Useful Resources

35.
Resources 1
• WCAG Guidelines - http://www.w3.org/TR/WCAG/
WARNING: Not all easy reading, but use the „Understanding
WCAG‟ section
• Accessibility sites and blogs (including my own)
• Webaim - http://webaim.org/
• Accessify Forum - http://www.accessifyforum.com/
• WebAxe - http://webaxe.blogspot.com/
• Coolfields (my own) - http://www.coolfields.co.uk/blog/
(including many guides to correct markup of forms, text for
screen readers only, etc)
35

36.
Resources 2
• Validators and accessibility tools
• Markup validator - http://validator.w3.org/
• Wave - http://wave.webaim.org/
• Colour contrast analyser -
http://www.paciellogroup.com/resources/contrast-
analyser.html
• NVDA - http://www.nvda-project.org/
• Useful Firefox Add-ons
• Fangs (screen reader emulator)
• HTML Validator
• Web Developer toolbar
There is no tool that can fully test for accessibility
automatically – so much is about context.
36

37.
Resources 3
• Other Useful sites
• Keyboard accessible dropdowns –
http://blakehaswell.com/lab/dropdown/deux/
• HTML5 and Accessibility - http://www.html5accessibility.com/
• Subtitle Horse - http://subtitle-horse.com/
• Amara (Universal Subtitles) - http://www.amara.org/en/
37

38.
Resources 4
YouTube Videos
• American blind woman demos JAWS – (slow start)
http://www.youtube.com/watch?v=si1_iR5lbyg
• ARIA - live regions
http://www.youtube.com/watch?v=9nZnTdSAkH0
• Leonie Watson on ARIA regions
http://www.youtube.com/watch?v=IhWMou12_Vk
• MS User and Dragon Naturally Speaking
http://www.youtube.com/watch?v=BsZo1p_5-o4
• Build your own assistive technology – (Don‟t) try this at home
http://www.youtube.com/watch?v=1LR11wDFMcA
38

39.
Thanks for listening –
any (more) questions?
graham.armfield@coolfields.co.uk
@coolfields
39