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
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
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”
Accessibility vs Usability
4
Usability Accessibility
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
Coolfields Consulting www.coolfields.co.uk
@coolfields
Why is Accessibility Important?
What is all the fuss about?
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
Coolfields Consulting www.coolfields.co.uk
@coolfields
Who is Affected by Poor
Accessibility?
More people than you may think.
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
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
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
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
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
Accessibility and the law
• Equality Act 2010 (Disability Discrimination Act in Northern
Ireland)
• Laws specifically refer to websites
14
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
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
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
Assistive technology
18
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
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
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
Coolfields Consulting www.coolfields.co.uk
@coolfields
How Can Accessibility be
Improved?
It‟s not rocket science.
WordPress sites
Accessibility is influenced by three groups of people
23
Theme
Developers
Plugin
Developers
Content
Authors
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
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:
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:
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:
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:
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:
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>
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:
Coolfields Consulting www.coolfields.co.uk
@coolfields
When Should I Think About
Accessibility?
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
Coolfields Consulting www.coolfields.co.uk
@coolfields
Useful Resources
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
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
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
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
Thanks for listening –
any (more) questions?
graham.armfield@coolfields.co.uk
@coolfields
39

Beginners Guide To Web Accessibility - WordCamp UK July 2013

  • 1.
    Coolfields Consulting www.coolfields.co.uk @coolfields BeginnersGuide to Web Accessibility Graham Armfield Web Accessibility Consultant WordPress Developer graham.armfield@coolfields.co.uk @coolfields
  • 2.
    What I‟m Goingto 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 Whatis Web Accessibility? “Enabling the web so that everyone can access its content when they want to and how they need to”
  • 4.
  • 5.
    Accessibility is notblack 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 Whyis Accessibility Important? What is all the fuss about?
  • 7.
    Why is accessibilityimportant? 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 Whois 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 thelaw • 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 Sowho 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 mitigateimpairment 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.
  • 19.
    But complexity comesat 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.BBCNews 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 andblindness • 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 HowCan Accessibility be Improved? It‟s not rocket science.
  • 23.
    WordPress sites Accessibility isinfluenced by three groups of people 23 Theme Developers Plugin Developers Content Authors
  • 24.
    So what canwe 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 wecan 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 wecan 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 wecan 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 wecan 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 wecan 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 wecan 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 wecan 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.
  • 33.
    Implementing accessibility • Accessibilityis 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.
  • 35.
    Resources 1 • WCAGGuidelines - 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 • Validatorsand 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 • OtherUseful 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

Editor's Notes

  • #10 PWD = People with disabilityAlso, many people with impairments that affect how they use the internet would not consider that they have a disability.
  • #13 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.
  • #17 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
  • #18 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.
  • #19 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
  • #20 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
  • #24 Accessibility is influenced by three groups of people
  • #26 Imagine you need to dec=scribe the image to someone over the phoneBackground imagesNo alternate textWill not be voiced so meaning is not conveyed
  • #27 It is possible to hide verbose messages from sighted users but have them available for screen readers
  • #28 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
  • #29 Show example of church website
  • #30 Basically it needs to be easy to readResizing text is not the same as zoomingLayouts should be resilientAvoid justification
  • #31 HTML5 Prompt attribute is not yet supported in all AT
  • #32 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