1. WordPress and Web Accessibility: Why its Important Graham
Armfield www.coolfields.co.ukCoolfields Consulting@coolfields
2. WordPress and Web AccessibilityGraham ArmfieldWho am I? Web
developer WordPress developer and user Accessibility consultant
Accessibility tester2 www.coolfields.co.ukCoolfields
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 differentimpairments use the web
Using WordPress to build accessible sites Simple things we can all
do Accessibility of the WordPress admin screens Resources
3www.coolfields.co.ukCoolfields Consulting @coolfields
4. What is web accessibility?One definition:Enabling the web so
that everyone can access itscontent when they want to and how they
need to 4www.coolfields.co.ukCoolfields Consulting @coolfields
5. Why web accessibility is importantThe web is increasingly
the worlds preferredchannel for: Knowledge Social interaction
CommerceBut its not always easy for: Those with disabilities Those
who are getting older 5www.coolfields.co.ukCoolfields Consulting
@coolfields
6. Why do web accessibility? Accessibility can increase the
profitability ofa website Accessibility is a legal requirement6
www.coolfields.co.ukCoolfields Consulting@coolfields
7. Accessibility Myths - 1Its 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 disabilityand those over 65 there could be as many as
16.5million people in UK who could benefit from goodaccessibility
in websites 71% of PWD have invisible disabilities such as
alearning or cognitive disability 7www.coolfields.co.ukCoolfields
Consulting @coolfields
8. Accessibility Myths - 2Accessibility is all about blind
people 2.6 million have difficulties using their hands which
couldimpact their use of keyboard and/or mouse 2.2 million people
have difficulty with memory,concentration or learning, of which
about 1 million have alearning difficulty About 2 million people
have a hearing impairment, ofwhich 50,000 use British Sign Language
to communicate About 2 million people are dyslexic 1.8 million
people have a vision impairment, of which180,000 are registered
blind 1 in 12 men have colourblindness
8www.coolfields.co.ukCoolfields Consulting @coolfields
9. Accessibility Myths - 3Yes, but my site is not meant for
theblind/deaf/motor impaired* (Delete as appropriate) People dont
always browse/buy just for themselves You cant make assumptions
about people Think about your sites reputation amongst friends and
family of PWD9 www.coolfields.co.ukCoolfields
Consulting@coolfields
10. Accessibility Myths - 4Its too expensive not enough ROI PWD
represent a market worth 80bn per year in theUK approx 320bn across
EU Friends and family can add significantly to that 83% of disabled
people will not return to a businessthat does not meet their access
needs. Studies in US show that friends and family of PWD willalso
avoid inaccessible sites10 www.coolfields.co.ukCoolfields
Consulting@coolfields
11. Accessibility can increase profitIt makes financial sense
Tesco In 2001 an accessible version of their shoppingsite was
launched at a cost 35k and yielded 13mturnover a year If a companys
website is hard to use, people willvisit a competitors site which
is easier to use. Why shut out revenue?
11www.coolfields.co.ukCoolfields Consulting @coolfields
12. Accessibility Myths - 5If I ignore it, itll 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?
12www.coolfields.co.ukCoolfields Consulting @coolfields
13. Accessibility and the law Equality Act 2010 (Still the
Disability DiscriminationAct in Northern Ireland) Laws specifically
refer to websites13 www.coolfields.co.ukCoolfields
Consulting@coolfields
14. Accessibility Myths - 6No-one ever gets sued anyway A
number of actions started against companies butmany settled out of
court with confidentialityclauses attached. In 2012 RNIB started an
action publicly against BMIBaby. 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. 14www.coolfields.co.ukCoolfields Consulting
@coolfields
15. Types of impairmentSo who can experience difficulties with
websitesand apps?Those with: Visual impairments Motor impairments
Hearing impairments Epilepsy Cognitive impairments71% of PWD have
invisible disabilities15 www.coolfields.co.ukCoolfields
Consulting@coolfields
16. Techniques to mitigate impairmentAccessibility 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.ukCoolfields 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
speedRefreshable Braille Display
http://www.youtube.com/watch?v=R6XAPkiQMtw at approx 2:06 in18
www.coolfields.co.ukCoolfields Consulting@coolfields
19. But complexity comes at a priceHow 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/ 19www.coolfields.co.ukCoolfields
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 bytheir devices
20www.coolfields.co.ukCoolfields Consulting @coolfields
21. WordPress and AccessibilityGood news: WordPress core is
generally very good at supportingweb accessibility Default themes
are not too bad It is possible to create a WordPress website that
isvery accessible21 www.coolfields.co.ukCoolfields
Consulting@coolfields
22. WordPress and AccessibilityBad news - 1: Most WordPress
themes contain some elements thatcompromise accessibility: Keyboard
operability, visible focus Poor colour contrast Page structures
Headings Etc 22www.coolfields.co.ukCoolfields Consulting
@coolfields
23. WordPress and accessibilityBad news - 2: Some WordPress
plugins introduce markup andfunctionality that is not accessible:
Contact form plugins Lightbox, gallery and carousel plugins Social
bookmarking plugins eg Addthis Etc The WordPress admin screens have
some inaccessiblefeatures 23www.coolfields.co.ukCoolfields
Consulting @coolfields
24. So who can make WordPress sitesaccessible? ThemePlugin
Developers DevelopersContentAuthors24
www.coolfields.co.ukCoolfields Consulting@coolfields
25. Implementing accessibility Accessibility is a lot harder
and more expensive toretrofit. It needs to be designed in from the
start 25www.coolfields.co.ukCoolfields Consulting @coolfields
26. So what can we do? Remember, disabilities and impairments
arenot absolutes Few websites are totally impossible forthose with
impairments to use. But most are difficult for some people
withdisabilities and impairments Every accessibility step that you
take willmake life easier for someone26
www.coolfields.co.ukCoolfields Consulting@coolfields
27. Simple things we can do - 1Images correct use ofalternate
text (altattribute) Describe what image showsor what it
representsRelevant for: 27www.coolfields.co.ukCoolfields Consulting
@coolfields
28. Simple things we can do - 2Links Ensure that destination
isclear from the link:My blog post: Read more rather thanMy blog
post: Read more If link opens new tab orwindow inform the
userRelevant for:Links list from JAWS screenreader28
www.coolfields.co.ukCoolfields Consulting@coolfields
29. Simple things we can do - 3Use headings properly Semantic
elements Often used as navigationmechanism by screenreader users
Signpost contentRelevant for:Headings list from JAWS screen
reader29 www.coolfields.co.ukCoolfields Consulting@coolfields
30. Simple things we can do - 4Keyboard focus andoperation
Focus should be easily visible Tab order should make sense Ensure
all functionalityaccessible by keystrokesRelevant for:30
www.coolfields.co.ukCoolfields Consulting@coolfields
31. Simple things we can do - 5Text Good colour contrast Should
allow itself to beresized without breakinglayout (initially) Use of
colour alone toconvey meaningHow not to do itRelevant for:
31www.coolfields.co.ukCoolfields Consulting @coolfields
32. Simple things we can do - 6Mark up forms correctly
Yourname: Use labels for input fields controls Clear display of
errors and I haveRelevant for: read the legal page
32www.coolfields.co.ukCoolfields Consulting @coolfields
33. ExamplesScreen reader JAWS on text box with nolabel 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/legend33 www.coolfields.co.ukCoolfields
Consulting@coolfields
34. Simple things we can do - 7WAI-ARIA Roles/Landmarks
helpsignpost parts of web pages Live regions for dynamiccontent
More advanced roles forAJAX sites and apps including mobile
appsRelevant for: 34www.coolfields.co.ukCoolfields Consulting
@coolfields
35. Accessibility and the WordPressadmin areaSo far weve
covered creating websites thatare outwardly accessibleQ. But what
about the back end?A. Oh dear35 www.coolfields.co.ukCoolfields
Consulting@coolfields
36. Accessibility and the WordPressadmin area -2Key Issues Lack
of design for accessibility in many key areas. Many tasks appear
not to be achievable without useof a mouse Those areas where
accessibility features are includedcan lack clear instructions
discoverability is soimportant And remember its not just about the
blind36 www.coolfields.co.ukCoolfields Consulting@coolfields
37. Demo issues with admin area Many, many links including
empty ones Visible focus Getting to where you want to be
37www.coolfields.co.ukCoolfields Consulting @coolfields
38. Demo issues with admin areaAdding and Editing Posts and
Pages Many problems here for anyone who cant use amouse Accessing
tool bar Adding images Tab order of edit screen doesnt always make
sense Its good that some help is provided but instructionsneed to
be clearer Remember accessibility is not just about blindpeople how
do sighted people using keyboard or ATuse these screens?
38www.coolfields.co.ukCoolfields Consulting @coolfields
39. Demo issues with admin areaCustom 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
39www.coolfields.co.ukCoolfields Consulting @coolfields
40. Demo issues with admin areaWidgets There are accessibility
options here but they arenot easy to find. Once you know where they
are you canmanipulate widgets without a mouse but itcould be a lot
easier Some clear instructions would be good -Discoverability40
www.coolfields.co.ukCoolfields Consulting@coolfields
41. Demo issues with admin areaTheme Customisation Cant really
see how to do this without using a mouse When popup appears, focus
needs to be transferredinto the panel its actually still in the
screenunderneath. When saving options transfer focus back to where
youwere before in this case the link that opened thepanel.41
www.coolfields.co.ukCoolfields Consulting@coolfields
42. Demo issues with admin areaLogging off Dont think this is
possible without using a mouse 42www.coolfields.co.ukCoolfields
Consulting @coolfields
43. Resources 1 WCAG Guidelines -
http://www.w3.org/TR/WCAG/WARNING: Not all easy reading, but use
theUnderstanding 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 forscreen readers
only, etc)43 www.coolfields.co.ukCoolfields
Consulting@coolfields
46. Resources 4YouTube Videos American blind woman demos JAWS
(slow start)http://www.youtube.com/watch?v=si1_iR5lbyg ARIA - live
regionshttp://www.youtube.com/watch?v=9nZnTdSAkH0 Leonie Watson on
ARIA regionshttp://www.youtube.com/watch?v=IhWMou12_Vk MS User and
Dragon Naturally Speakinghttp://www.youtube.com/watch?v=BsZo1p_5-o4
Build your own assistive technology (Dont) try this at
homehttp://www.youtube.com/watch?v=1LR11wDFMcA
46www.coolfields.co.ukCoolfields Consulting @coolfields
47. To finishThanks for listening any questions?
[email protected] 47www.coolfields.co.ukCoolfields
Consulting @coolfields