An introduction to web accessibility - including a look at the different types of disability and the difficulties some people have in using websites. So can WordPress be used to create accessible websites? There's good news and bad news. And what about the WordPress admin screens, are they accessible? Well, that's a bit of a problem as we'll see. This presentation was given at WordCamp UK in Edinburgh on Sunday July 15th 2012.

1. WordPress and Web Accessibility:
Why it’s Important
Graham Armfield
www.coolfields.co.uk
Coolfields Consulting @coolfields

2. WordPress and Web Accessibility
Graham Armfield
Who am I?
• Web developer
• WordPress developer and user
• Accessibility consultant
• Accessibility tester
2
www.coolfields.co.uk
Coolfields Consulting @coolfields

3. What this presentation will cover
• What does web accessibility mean?
• Why web accessibility is important?
• Types of disability and how those with different
impairments use the web
• Using WordPress to build accessible sites
• Simple things we can all do
• Accessibility of the WordPress admin screens
• Resources
3
www.coolfields.co.uk
Coolfields Consulting @coolfields

4. What is web accessibility?
One definition:
“Enabling the web so that everyone can access its
content when they want to and how they need to”
4
www.coolfields.co.uk
Coolfields Consulting @coolfields

5. Why web accessibility is 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
5
www.coolfields.co.uk
Coolfields Consulting @coolfields

6. Why do web accessibility?
• Accessibility can increase the profitability of
a website
• Accessibility is a legal requirement
6
www.coolfields.co.uk
Coolfields Consulting @coolfields

7. 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
• 71% of PWD have invisible disabilities – such as a
learning or cognitive disability
7
www.coolfields.co.uk
Coolfields Consulting @coolfields

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

9. 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
9
www.coolfields.co.uk
Coolfields Consulting @coolfields

10. 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.
• Studies in US show that friends and family of PWD will
also avoid inaccessible sites
10
www.coolfields.co.uk
Coolfields Consulting @coolfields

11. Accessibility can increase profit
It makes financial sense
• Tesco – In 2001 an accessible version of their shopping
site was launched at a cost £35k and yielded £13m
turnover a year
• If a company’s website is hard to use, people will
visit a competitor’s site which is easier to use.
• Why shut out revenue?
11
www.coolfields.co.uk
Coolfields Consulting @coolfields

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?
12
www.coolfields.co.uk
Coolfields Consulting @coolfields

13. Accessibility and the law
• Equality Act 2010 (Still the Disability Discrimination
Act in Northern Ireland)
• Laws specifically refer to websites
13
www.coolfields.co.uk
Coolfields Consulting @coolfields

14. Accessibility Myths - 6
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 has now been settled as BMI Baby have
agreed to make changes.
» RNIB have indicated that they are looking at two
more actions in the near future.
14
www.coolfields.co.uk
Coolfields Consulting @coolfields

15. Types of 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
15
www.coolfields.co.uk
Coolfields Consulting @coolfields

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)
16
www.coolfields.co.uk
Coolfields Consulting @coolfields

17. Assistive technology
17
www.coolfields.co.uk
Coolfields Consulting @coolfields

18. Screen reader examples
1.BBC News with NVDA
– medium speed
2.BBC News with NVDA
– slow speed
3.BBC News with NVDA
– faster speed
Refreshable Braille Display
http://www.youtube.com/watch?v=R6XAPkiQMtw
at approx 2:06 in
18
www.coolfields.co.uk
Coolfields Consulting @coolfields

19. But complexity comes at a price
How much for a screen reader?
Fortunately, open source to the rescue?
• NVDA screen reader
• free to download
• Mac and PC
• Improving all the time - http://www.nvda-project.org/
19
www.coolfields.co.uk
Coolfields Consulting @coolfields

20. iPhones, iPads and blindness
• Many accessibility features built in
• Eg Voiceover – screen reader
• Speech recognition
• Result is that many blind users swear by
their devices
20
www.coolfields.co.uk
Coolfields Consulting @coolfields

21. WordPress and Accessibility
Good news:
• WordPress core is generally very good at supporting
web accessibility
• Default themes are not too bad
• It is possible to create a WordPress website that is
very accessible
21
www.coolfields.co.uk
Coolfields Consulting @coolfields

22. WordPress and Accessibility
Bad news - 1:
• Most WordPress themes contain some elements that
compromise accessibility:
• Keyboard operability, visible focus
• Poor colour contrast
• Page structures
• Headings
• Etc
22
www.coolfields.co.uk
Coolfields Consulting @coolfields

23. WordPress and accessibility
Bad news - 2:
• Some WordPress plugins introduce markup and
functionality that is not accessible:
• Contact form plugins
• Lightbox, gallery and carousel plugins
• Social bookmarking plugins – eg Addthis
• Etc
• The WordPress admin screens have some inaccessible
features
23
www.coolfields.co.uk
Coolfields Consulting @coolfields

24. So who can make WordPress sites
accessible?
Theme Plugin
Developers Developers
Content
Authors
24
www.coolfields.co.uk
Coolfields Consulting @coolfields

25. Implementing accessibility
• Accessibility is a lot harder and more expensive to
retrofit.
• It needs to be designed in from the start
25
www.coolfields.co.uk
Coolfields Consulting @coolfields

26. 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 are difficult for some people with
disabilities and impairments
• Every accessibility step that you take will
make life easier for someone
26
www.coolfields.co.uk
Coolfields Consulting @coolfields

27. Simple things we can do - 1
Images – correct use of
alternate text (alt
attribute)
• Describe what image shows
or what it represents
Relevant for:
27
www.coolfields.co.uk
Coolfields Consulting @coolfields

28. 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
Relevant for:
Links list from JAWS screen
reader
28
www.coolfields.co.uk
Coolfields Consulting @coolfields

29. Simple things we can do - 3
Use headings properly
• Semantic elements
• Often used as navigation
mechanism by screen
reader users
• Signpost content
Relevant for: Headings list from JAWS screen
reader
29
www.coolfields.co.uk
Coolfields Consulting @coolfields

30. 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
Relevant for:
30
www.coolfields.co.uk
Coolfields Consulting @coolfields

31. 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
How not to do it
Relevant for:
31
www.coolfields.co.uk
Coolfields Consulting @coolfields

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

33. Examples
Screen reader
• JAWS on text box with no
label
• JAWS on radio button with no label
• JAWS on text box with label
• JAWS on radio button with label
• JAWS on radio button with label and fieldset/legend
33
www.coolfields.co.uk
Coolfields Consulting @coolfields

34. 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
Relevant for:
34
www.coolfields.co.uk
Coolfields Consulting @coolfields

35. Accessibility and the WordPress
admin area
So far we’ve covered creating websites that
are outwardly accessible…
Q. But what about the back end?
A. Oh dear…
35
www.coolfields.co.uk
Coolfields Consulting @coolfields

36. Accessibility and the WordPress
admin area -2
Key Issues
• Lack of design for accessibility in many key areas.
• Many tasks appear not to be achievable without use
of a mouse
• Those areas where accessibility features are included
can lack clear instructions – discoverability is so
important
• And remember – it’s not just about the blind…
36
www.coolfields.co.uk
Coolfields Consulting @coolfields

37. Demo issues with admin area
• Many, many links – including empty ones
• Visible focus
• Getting to where you want to be
37
www.coolfields.co.uk
Coolfields Consulting @coolfields

38. Demo issues with admin area
Adding and Editing Posts and Pages
• Many problems here for anyone who can’t use a
mouse
• Accessing tool bar
• Adding images
• Tab order of edit screen doesn’t always make sense
• It’s good that some help is provided but instructions
need to be clearer
• Remember – accessibility is not just about blind
people – how do sighted people using keyboard or AT
use these screens?
38
www.coolfields.co.uk
Coolfields Consulting @coolfields

39. Demo issues with admin area
Custom Menus
• Can add items to a menu with keyboard, but…
• Believed to be impossible to manipulate hierarchy
of menu items without use of a mouse
• Can tab to each menu item but it does not
announce what it is or its position in the hierarchy
– could be done with some ARIA wizardry
• Could do with some instructions when accessible
techniques are available
39
www.coolfields.co.uk
Coolfields Consulting @coolfields

40. Demo issues with admin area
Widgets
• There are accessibility options here but they are
not easy to find.
• Once you know where they are you can
manipulate widgets without a mouse – but it
could be a lot easier
• Some clear instructions would be good -
Discoverability
40
www.coolfields.co.uk
Coolfields Consulting @coolfields

41. Demo issues with admin area
Theme Customisation
• Can’t really see how to do this without using a mouse
• When popup appears, focus needs to be transferred
into the panel – it’s actually still in the screen
underneath.
• When saving options transfer focus back to where you
were before – in this case the link that opened the
panel.
41
www.coolfields.co.uk
Coolfields Consulting @coolfields

42. Demo issues with admin area
Logging off
• Don’t think this is possible without using a mouse
42
www.coolfields.co.uk
Coolfields Consulting @coolfields

43. 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 - http://accessify.com/news/
• 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)
43
www.coolfields.co.uk
Coolfields Consulting @coolfields

44. 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
• WCAG Contrast Checker
44
www.coolfields.co.uk
Coolfields Consulting @coolfields

45. 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/
45
www.coolfields.co.uk
Coolfields Consulting @coolfields

46. 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
46
www.coolfields.co.uk
Coolfields Consulting @coolfields

47. To finish
Thanks for listening – any questions?
graham.armfield@coolfields.co.uk
47
www.coolfields.co.uk
Coolfields Consulting @coolfields