WordPress and Web Accessibility:       Why it’s Important                 Graham Armfield                                 ...
WordPress and Web AccessibilityGraham ArmfieldWho am I?  •   Web developer  •   WordPress developer and user  •   Accessib...
What this presentation will cover  • What does web accessibility mean?  • Why web accessibility is important?  • Types of ...
What is web accessibility?  One definition:  “Enabling the web so that everyone can access its  content when they want to ...
Why web accessibility is importantThe web is increasingly the world’s preferredchannel for:  • Knowledge  • Social interac...
Why do web accessibility?• Accessibility can increase the profitability of  a website• Accessibility is a legal requiremen...
Accessibility Myths - 1It’s just for a minority of people…  • 12 million people in UK have a recognised disability  • In t...
Accessibility Myths - 2Accessibility is all about blind people…  • 2.6 million have difficulties using their hands which c...
Accessibility Myths - 3Yes, but my site is not meant for theblind/deaf/motor impaired* (Delete as appropriate)   • People ...
Accessibility Myths - 4It’s too expensive – not enough ROI  • PWD represent a market worth £80bn per year in the    UK – a...
Accessibility can increase profitIt makes financial sense  • Tesco – In 2001 an accessible version of their shopping    si...
Accessibility Myths - 5If I ignore it, it’ll go away   • We are all getting older   • One in four will be over 65 by 2061 ...
Accessibility and the law  • Equality Act 2010 (Still the Disability Discrimination    Act in Northern Ireland)  • Laws sp...
Accessibility Myths - 6No-one ever gets sued anyway  • A number of actions started against companies but    many settled ‘...
Types of impairmentSo who can experience difficulties with websitesand apps?  Those with:  • Visual impairments  • Motor i...
Techniques to mitigate impairmentAccessibility options in browsers     •   Mainly Internet Explorer + Firefox     •   Spec...
Assistive technology                                               17                        www.coolfields.co.ukCoolfield...
Screen reader examples     1.BBC News with NVDA       – medium speed     2.BBC News with NVDA       – slow speed     3.BBC...
But complexity comes at a priceHow much for a screen reader?Fortunately, open source to the rescue?  • NVDA screen reader ...
iPhones, iPads and blindness• Many accessibility features built in     •   Eg Voiceover – screen reader     •   Speech rec...
WordPress and AccessibilityGood news:  • WordPress core is generally very good at supporting    web accessibility  • Defau...
WordPress and AccessibilityBad news - 1:  • Most WordPress themes contain some elements that    compromise accessibility: ...
WordPress and accessibilityBad news - 2:  • Some WordPress plugins introduce markup and    functionality that is not acces...
So who can make WordPress sitesaccessible?               Theme                  Plugin               Developers           ...
Implementing accessibility  • Accessibility is a lot harder and more expensive to    retrofit.  • It needs to be designed ...
So what can we do?• Remember, disabilities and impairments are  not absolutes• Few websites are totally impossible for  th...
Simple things we can do - 1Images – correct use ofalternate text (altattribute)  • Describe what image shows    or what it...
Simple things we can do - 2Links  • Ensure that destination is    clear from the link:        My blog post: Read more     ...
Simple things we can do - 3Use headings properly  • Semantic elements  • Often used as navigation    mechanism by screen  ...
Simple things we can do - 4Keyboard focus andoperation  • Focus should be easily visible  • Tab order should make sense  •...
Simple things we can do - 5Text  • Good colour contrast  • Should allow itself to be    resized without breaking    layout...
Simple things we can do - 6Mark up forms correctly           <label for="yourname">Your                                  n...
ExamplesScreen reader• JAWS on text box with no  label• JAWS on radio button with no label• JAWS on text box with label• J...
Simple things we can do - 7WAI-ARIA  • Roles/Landmarks help    signpost parts of web pages  • Live regions for dynamic    ...
Accessibility and the WordPressadmin areaSo far we’ve covered creating websites thatare outwardly accessible…Q. But what a...
Accessibility and the WordPressadmin area -2Key Issues  • Lack of design for accessibility in many key areas.  • Many task...
Demo issues with admin area• Many, many links – including empty ones• Visible focus• Getting to where you want to be      ...
Demo issues with admin areaAdding and Editing Posts and Pages  • Many problems here for anyone who can’t use a    mouse  •...
Demo issues with admin areaCustom Menus     •   Can add items to a menu with keyboard, but…     •   Believed to be impossi...
Demo issues with admin areaWidgets  • There are accessibility options here but they are    not easy to find.  • Once you k...
Demo issues with admin areaTheme Customisation  • Can’t really see how to do this without using a mouse  • When popup appe...
Demo issues with admin areaLogging off  • Don’t think this is possible without using a mouse                              ...
Resources 1  • WCAG Guidelines - http://www.w3.org/TR/WCAG/    WARNING: Not all easy reading, but use the    ‘Understandin...
Resources 2  • Validators and accessibility tools      • Markup validator - http://validator.w3.org/      • Wave - http://...
Resources 3  • Other Useful sites      • Keyboard accessible dropdowns –        http://blakehaswell.com/lab/dropdown/deux/...
Resources 4YouTube Videos  • American blind woman demos JAWS – (slow start)    http://www.youtube.com/watch?v=si1_iR5lbyg ...
To finish      Thanks for listening – any questions?               graham.armfield@coolfields.co.uk                       ...
Upcoming SlideShare
Loading in …5
×

WordPress and Web Accessibility: Why It's Important. WordCampUK 2012

7,579 views

Published on

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.

Published in: Travel, Design, Technology
  • Be the first to comment

WordPress and Web Accessibility: Why It's Important. WordCampUK 2012

  1. 1. WordPress and Web Accessibility: Why it’s 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 tester 2 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 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.ukCoolfields Consulting @coolfields
  4. 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.ukCoolfields Consulting @coolfields
  5. 5. Why web accessibility is importantThe web is increasingly the world’s preferredchannel for: • Knowledge • Social interaction • CommerceBut it’s not always easy for: • Those with disabilities • Those who are getting older 5 www.coolfields.co.ukCoolfields Consulting @coolfields
  6. 6. Why do web accessibility?• Accessibility can increase the profitability of a website• Accessibility is a legal requirement 6 www.coolfields.co.ukCoolfields Consulting @coolfields
  7. 7. Accessibility Myths - 1It’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.ukCoolfields Consulting @coolfields
  8. 8. Accessibility Myths - 2Accessibility 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.ukCoolfields Consulting @coolfields
  9. 9. Accessibility Myths - 3Yes, but my site is not meant for theblind/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.ukCoolfields Consulting @coolfields
  10. 10. Accessibility Myths - 4It’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.ukCoolfields Consulting @coolfields
  11. 11. Accessibility can increase profitIt 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.ukCoolfields Consulting @coolfields
  12. 12. Accessibility Myths - 5If 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.ukCoolfields Consulting @coolfields
  13. 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.ukCoolfields Consulting @coolfields
  14. 14. Accessibility Myths - 6No-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.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 impairments 71% of PWD have ‘invisible’ disabilities 15 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 17 www.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 in 18 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/ 19 www.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 by their devices 20 www.coolfields.co.ukCoolfields Consulting @coolfields
  21. 21. WordPress and AccessibilityGood 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.ukCoolfields Consulting @coolfields
  22. 22. WordPress and AccessibilityBad 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.ukCoolfields Consulting @coolfields
  23. 23. WordPress and accessibilityBad 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.ukCoolfields Consulting @coolfields
  24. 24. So who can make WordPress sitesaccessible? Theme Plugin Developers Developers Content Authors 24 www.coolfields.co.ukCoolfields Consulting @coolfields
  25. 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.ukCoolfields Consulting @coolfields
  26. 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.ukCoolfields Consulting @coolfields
  27. 27. Simple things we can do - 1Images – correct use ofalternate text (altattribute) • Describe what image shows or what it representsRelevant for: 27 www.coolfields.co.ukCoolfields Consulting @coolfields
  28. 28. Simple things we can do - 2Links • 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 userRelevant for: Links list from JAWS screen reader 28 www.coolfields.co.ukCoolfields Consulting @coolfields
  29. 29. Simple things we can do - 3Use headings properly • Semantic elements • Often used as navigation mechanism by screen reader users • Signpost contentRelevant for: Headings list from JAWS screen reader 29 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 functionality accessible 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 be resized without breaking layout (initially) • Use of colour alone to convey meaning How not to do itRelevant for: 31 www.coolfields.co.ukCoolfields Consulting @coolfields
  32. 32. Simple things we can do - 6Mark 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 haveRelevant for: read the legal page</label> 32 www.coolfields.co.ukCoolfields Consulting @coolfields
  33. 33. ExamplesScreen 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.ukCoolfields Consulting @coolfields
  34. 34. Simple things we can do - 7WAI-ARIA • Roles/Landmarks help signpost parts of web pages • Live regions for dynamic content • More advanced roles for AJAX sites and apps – including mobile appsRelevant for: 34 www.coolfields.co.ukCoolfields Consulting @coolfields
  35. 35. Accessibility and the WordPressadmin areaSo far we’ve covered creating websites thatare outwardly accessible…Q. But what about the back end?A. Oh dear… 35 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 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.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 37 www.coolfields.co.ukCoolfields Consulting @coolfields
  38. 38. Demo issues with admin areaAdding 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.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 39 www.coolfields.co.ukCoolfields Consulting @coolfields
  40. 40. Demo issues with admin areaWidgets • 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.ukCoolfields Consulting @coolfields
  41. 41. Demo issues with admin areaTheme 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.ukCoolfields Consulting @coolfields
  42. 42. Demo issues with admin areaLogging off • Don’t think this is possible without using a mouse 42 www.coolfields.co.ukCoolfields Consulting @coolfields
  43. 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.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 44 www.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/ 45 www.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 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.ukCoolfields Consulting @coolfields
  47. 47. To finish Thanks for listening – any questions? graham.armfield@coolfields.co.uk 47 www.coolfields.co.ukCoolfields Consulting @coolfields

×