A beginners guide to web accessibility. A presentation covering the definition of what web accessibility is, why it's important, what you can do about it, and when to think about it.
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
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
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
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
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
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:
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
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
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
Notas del editor
PWD = People with disabilityAlso, many people with impairments that affect how they use the internet would not consider that they have a disability.
PWD = People with disabilityAlso, many people with impairments that affect how they use the internet would not consider that they have a disability.Tesco – accessible site no longer exists as a separate entity. The techniques used were included in the main Tesco online site.Most of my clients are small businesses who are selling products or services. They want to maximise their reach within potential customers.
TypesVisualBlindness (total/partial), colour blindness low visionMotor Restricted use of limbs/handsParkinsonsetcMany cannot use a mouse or struggle to use one with sufficient precisionHearingPartial to full deafnessSensitivity to background noiseEpilepsyCognitiveDyslexiaAttention deficitAutismLinguistic impairmentsEtc
Those with impairments are unlikely to be using Google Chrome – it doesn’t expose as many useful accessibility features and doesn’t follow all useful web standards – eg in-page link focus.
I have a visual impairment – I’m shortsighted. My assistive technology is a pair of glassesAssistive technology can be software based – magnification or screen reader or speech recognition softwareOr hardware based – braille reader, various switches
Continue spectacles analogy – my short range prescription is now so far from my long range prescription that I need bifocals. These are significantly more expensive than standard lenses.Same is true for ATJaws is the industry standard screen reader. How much do you think it costs? And for upgrades too? How much is a refreshing braille display?Fortunately NVDA is available for free. It’s not quite as good as JAWS but is improving all the time. JAWS is much better for non-browser based applications like Word, Excel etc
Accessibility is influenced by three groups of people
Imagine you need to dec=scribe the image to someone over the phoneBackground imagesNo alternate textWill not be voiced so meaning is not conveyed
It is possible to hide verbose messages from sighted users but have them available for screen readers
Good to add all contact in semantic waysSemantic elementsOften used as navigation mechanism by screen reader usersBreak up content into more manageable chunksTry to nest correctlyAlso good for SEONavigation mechanism – think about newspapersBreaking up content – helps those with attention deficit issues and other cognitive impairments
Show example of church website
Basically it needs to be easy to readResizing text is not the same as zoomingLayouts should be resilientAvoid justification
HTML5 Prompt attribute is not yet supported in all AT
ARIA is a huge areaARIA landmarks can be used to jump around the pageScreen reader users are learning to look for them in web pages nowStill really useful despite more semantic HTML5 elements