1. 1. WordPress and Web Accessibility: Why its Important Graham Armfield www.coolfields.co.ukCoolfields Consulting@coolfields
2. 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. 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. 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. 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. 6. Why do web accessibility? Accessibility can increase the profitability ofa website Accessibility is a legal requirement6 www.coolfields.co.ukCoolfields Consulting@coolfields
7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
17. 17. Assistive technology 17www.coolfields.co.ukCoolfields Consulting @coolfields
18. 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. 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. 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. 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. 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. 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. 24. So who can make WordPress sitesaccessible? ThemePlugin Developers DevelopersContentAuthors24 www.coolfields.co.ukCoolfields Consulting@coolfields
25. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 42. Demo issues with admin areaLogging off Dont think this is possible without using a mouse 42www.coolfields.co.ukCoolfields Consulting @coolfields
43. 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
44. 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 44www.coolfields.co.ukCoolfields Consulting @coolfields
45. 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/ 45www.coolfields.co.ukCoolfields Consulting @coolfields
46. 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. 47. To finishThanks for listening any questions? graham.armfield@coolfields.co.uk 47www.coolfields.co.ukCoolfields Consulting @coolfields