Presentation starts with a brief look at what the term web accessibility means. Then using some statistics it covers why accessibility is important and the potential financial benefits of having an accessible website.
There's a run down of the various disability groups and how some of the people with those disabilities interact with the web.
Turning to WordPress itself - there is some good news and some bad news on accessibility. The good news is that the WordPress core can support accessibility well, but that it relies on accessible themes and plugins being used to truly deliver an accessible experience - and that's the bad news.
Both developers and content authors have a part to play in creating and maintaining an accessible WordPress site and there are some quick practical tips that everyone can follow to improve the situation. It's not the full story but it's a beginning.
At the end of the presentation there are some useful resources.
The presentation originally contained some sound samples of a screen reader being used on a couple of pages. Unfortunately these aren't stored in this Slideshare version but I'll be featuring them (and others) in a forthcoming blog post at http://www.coolfields.co.uk/blog
WordPress and Web Accessibility: Why it's Important
1. WordPress London
20th October 2011
WordPress and Web Accessibility:
Why it‟s Important
Graham Armfield
www.coolfields.co.uk
Coolfields Consulting @coolfields
2. WordPress London
20th October 2011
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. WordPress London
20th October 2011
What this presentation will cover
• What does web accessibility mean?
• Why web accessibility is important?
• Types of disability and how they use the web
• WordPress and accessibility
• Simple things we can all do
• Examples
• Resources
3
www.coolfields.co.uk
Coolfields Consulting @coolfields
4. WordPress London
20th October 2011
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. WordPress London
20th October 2011
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. WordPress London
20th October 2011
Some statistics
Disability
• Approx. 10 million people in the UK are officially
viewed as disabled.
• 7 million people in UK have some form of literacy
problem
• 52% of those who meet legal definition of disability
prefer not to describe themselves that way.
• The disabled represent a market worth £80bn per
year
• 83% of disabled people will not return to a business
that does not meet their access needs.
6
www.coolfields.co.uk
Coolfields Consulting @coolfields
7. WordPress London
20th October 2011
Some statistics contd
An ageing population
• Elderly – half of Japan‟s population is over 50
• In the UK 15 million are over 55
• People aged 50+ have combined annual income of
more than £160bn
7
www.coolfields.co.uk
Coolfields Consulting @coolfields
8. WordPress London
20th October 2011
Accessibility can increase profit
It makes financial sense
• Tesco – Redesigned accessible site cost £35k and
yielded £1.6m extra turnover a year from disabled
people
• 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?
8
www.coolfields.co.uk
Coolfields Consulting @coolfields
9. WordPress London
20th October 2011
Accessibility and the law
• Equality Act 2010 (Disability Discrimination Act in
Northern Ireland)
• Laws specifically refer to websites
• Accessibility is a lot harder and more expensive to
retrofit.
• It needs to be designed in from the start
9
www.coolfields.co.uk
Coolfields Consulting @coolfields
10. WordPress London
20th October 2011
Types of impairment
Who can experience difficulties with websites
and apps?
Those with:
• Visual impairments
• Motor impairments
• Hearing impairments
• Epilepsy
• Cognitive impairments
10
www.coolfields.co.uk
Coolfields Consulting @coolfields
11. WordPress London
20th October 2011
Assistive technology
11
www.coolfields.co.uk
Coolfields Consulting @coolfields
12. WordPress London
20th October 2011
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/
12
www.coolfields.co.uk
Coolfields Consulting @coolfields
13. WordPress London
20th October 2011
WordPress and accessibility
Good news:
• WordPress core is generally very good at supporting
web accessibility
• Default theme is not bad
• WordPress can be almost too good at times – eg title
attributes…
13
www.coolfields.co.uk
Coolfields Consulting @coolfields
14. WordPress London
20th October 2011
WordPress and accessibility
Bad news:
• Many WordPress themes and plugins introduce markup
and functionality that is not accessible - Examples:
• Twentyeleven (default theme) dropdown menus and focus
• Tag cloud
• Contact form plugins
• Lightbox and gallery plugins
• Social bookmarking plugins – eg Addthis
• etc
• Certain aspects of editing posts/pages are hard or
impossible to do without a mouse – eg adding images
14
www.coolfields.co.uk
Coolfields Consulting @coolfields
15. WordPress London
20th October 2011
Making WordPress more accessible
• Look for useful plugins for improving accessibility – eg
• Remove title attributes - good
• EsAudioPlayer – works with NVDA
• myReadMore – good idea but…
• Accessible Tag Cloud – good idea but…
• Plus several jquery ones – not tried
• Anyone like to collaborate on creating some accessible
plugins?
• Think about accessibility when building themes
• Please don‟t follow all the techniques in
http://codex.wordpress.org/Accessibility
• Eg: Access keys, title attributes
15
www.coolfields.co.uk
Coolfields Consulting @coolfields
16. WordPress London
20th October 2011
Simple things we can all do - 1
Images – alternate text (alt
attribute)
• Describe what image shows or
what it represents
• If image is a link describe the
destination
• Decorative images – leave
alternate text blank (alt=“”)
Background images
• No alternate text
• Will not be voiced so meaning
is not conveyed
16
www.coolfields.co.uk
Coolfields Consulting @coolfields
17. WordPress London
20th October 2011
Simple things we can all 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
• Avoid redundant title
attributes Links list from JAWS screen reader
17
www.coolfields.co.uk
Coolfields Consulting @coolfields
18. WordPress London
20th October 2011
Simple things we can all do - 3
Headings
• Semantic elements
• Often used as navigation
mechanism by screen
reader users
• Break up content into more
manageable chunks
• Try to nest correctly
Headings list from JAWS screen
• Also good for SEO reader
18
www.coolfields.co.uk
Coolfields Consulting @coolfields
19. WordPress London
20th October 2011
Simple things we can all do - 4
Lists
• If it‟s a list of items -
mark it up as a list
Video
• Avoid auto-start
• Add captions
19
www.coolfields.co.uk
Coolfields Consulting @coolfields
20. WordPress London
20th October 2011
Things developers can do - 1
Keyboard focus
• Should be easily visible
• Tab order should make
sense
• Ensure all functionality
accessible by keystrokes
• Eg dropdown menus
20
www.coolfields.co.uk
Coolfields Consulting @coolfields
21. WordPress London
20th October 2011
Things developers can do - 2
Text
• Not too small
• Good colour contrast
• Should allow itself to be
resized without breaking
layout (initially)
• Avoid justification
How not to do it
• Colour and meaning
21
www.coolfields.co.uk
Coolfields Consulting @coolfields
22. WordPress London
20th October 2011
Things developers can do - 3
WAI-ARIA
• Roles help signpost parts of
web pages
• For AJAX sites and apps
• A growing area with the
uptake of HTML5…
22
www.coolfields.co.uk
Coolfields Consulting @coolfields
23. WordPress London
20th October 2011
A brief word on HTML5
How does HTML5 work with assistive
technologies?
• Some elements are supported
• But some are not – eg placeholder, etc
• And given the cost not everyone will be updating
their assistive technologies as often as their
browsers.
• ARIA roles can bridge the gap in some cases
• http://www.html5accessibility.com/
23
www.coolfields.co.uk
Coolfields Consulting @coolfields
24. WordPress London
20th October 2011
Examples
Screen reader
• Speed examples
• Images
• Links
• Forms
Focus
• Visibility
• Dropdown menus
24
www.coolfields.co.uk
Coolfields Consulting @coolfields
25. WordPress London
20th October 2011
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/
25
www.coolfields.co.uk
Coolfields Consulting @coolfields
28. WordPress London
20th October 2011
To finish
Thanks for listening – any questions?
graham.armfield@coolfields.co.uk
28
www.coolfields.co.uk
Coolfields Consulting @coolfields
Editor's Notes
Freelance developer – used to work for large financial organisation but now run my own company.
One definition – not just about people with disabilities.Similar to definition on WordPress Codex Accessibility page.
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 impairments
I have a visual impairment – I’m shortsighted. My assistive technology is a pair of glassesAssistive technology can be software based – magnification or screen readerOr 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 as good as JAWS but is improving all the time. JAWS is much better for non-browser based applications like Word, Excel etc
Plugins to add accessible features are hard to find and are usually seldom downloadedI’m looking for collaborators to produce some useful plugins to provide accessible functionality. I have many contacts in accessibility field and they can be promoted that way.Build accessibility into themes – see next sectionAvoid using accesskeys – conflicts with AT commandsAvoid loads of superfluous title attributes – pain in backside for screen reader users
Good to add all contact in semantic waysNavigation mechanism – think about newspapersBreaking up content – helps those with attention deficit issues and other cognitive impairments
Basically it needs to be easy to readResizing text is not the same as zoomingLayouts should be resilient
ARIA is a huge area
Many developers are already embracing HTML5 elements. But not all AT is able to cope with the new elements yet.Given the price it’s not surprising that AT users don’t always upgrade their equipment as often as most of us get a new browser version.
BBC News with NVDA – medium speedBBC News with NVDA – slow speedBBC News with NVDA – faster speedJAWS on text box with no labelJAWS on radio button with no labelJAWS on text box with labelJAWS on radio button with labelJAWS on radio button with label and fieldset/legend
There is no tool that can fully test for accessibility automatically – so much is about context.