WordPress and Web Accessibility - TCUK 2012
0 likes982 views
This document outlines the importance of web accessibility in WordPress development, emphasizing the significant number of individuals who could benefit from accessible websites. It discusses common misconceptions about accessibility, the rising popularity of WordPress, and the accessibility challenges faced within its themes and admin interface. The presentation also provides recommendations for developing accessible WordPress sites and resources for further guidance.
WordPress and Web Accessibility - TCUK 2012
- 1. WordPress and Web Accessibility Graham Armfield www.coolfields.co.uk Coolfields Consulting @coolfields
- 2. WordPress and Web Accessibility Please shout or otherwise indicate if you can’t hear me. 2 www.coolfields.co.uk Coolfields Consulting @coolfields
- 3. WordPress and Web Accessibility Graham Armfield Who am I? • WordPress developer and user • Accessibility consultant • Accessibility tester 3 www.coolfields.co.uk Coolfields Consulting @coolfields
- 4. What this presentation will cover • The rising popularity of WordPress • Using WordPress to build accessible sites • Accessibility of the WordPress admin screens • The future • Resources 4 www.coolfields.co.uk Coolfields Consulting @coolfields
- 5. Some initial questions 1. Who has heard of WordPress? 2. Who uses WordPress or is thinking of using WordPress to maintain their own or their company’s website? 3. Any web developers in the audience? 4. Anyone developing in WordPress? 5 www.coolfields.co.uk Coolfields Consulting @coolfields
- 6. Some initial questions 5. Who has heard of web accessibility? 6. Who knows what it means? 7. Who hasn’t put their hand up yet? 6 www.coolfields.co.uk Coolfields Consulting @coolfields
- 7. So 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” 7 www.coolfields.co.uk Coolfields Consulting @coolfields
- 8. 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 8 www.coolfields.co.uk Coolfields Consulting @coolfields
- 9. Why do web accessibility? • Accessibility can increase the profitability of a website • Accessibility is a legal requirement 9 www.coolfields.co.uk Coolfields Consulting @coolfields
- 10. 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 people with disabilities have invisible disabilities – such as a learning or cognitive disability 10 www.coolfields.co.uk Coolfields Consulting @coolfields
- 11. 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 11 www.coolfields.co.uk Coolfields Consulting @coolfields
- 12. 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 12 www.coolfields.co.uk Coolfields Consulting @coolfields
- 13. 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 13 www.coolfields.co.uk Coolfields Consulting @coolfields
- 14. 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? 14 www.coolfields.co.uk Coolfields Consulting @coolfields
- 15. 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? 15 www.coolfields.co.uk Coolfields Consulting @coolfields
- 16. 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. 16 www.coolfields.co.uk Coolfields Consulting @coolfields
- 17. The rising popularity of WordPress Latest figures point out… • Over half of all sites that use a CMS (content management system) use WordPress • Used for nearly 15% of websites overall – approx 70 million sites altogether • WordPress is used in 22 of every 100 new websites 17 www.coolfields.co.uk Coolfields Consulting @coolfields
- 18. The rising popularity of WordPress • Originally WordPress was just a blogging tool – now can be used for almost any type of website • Easy to use, easy to develop for • WordPress is now powering some larger and high profile sites • http://www.number10.gov.uk • http://www.demconvention.com/ 18 www.coolfields.co.uk Coolfields Consulting @coolfields
- 19. Can WordPress sites be accessible? To answer that question we need to look at the 3 key components of a WordPress website 1. The WordPress theme chosen 2. Any plugins and widgets used 3. The actual content of the site To be accessible a WordPress website must get all three of these components right 19 www.coolfields.co.uk Coolfields Consulting @coolfields
- 20. WordPress Themes 20 www.coolfields.co.uk Coolfields Consulting @coolfields
- 21. But how do you know if themes and plugins are accessible? • Good question – it’s hard to tell • Some themes/plugins state accessibility when actually there are some key failings • There is a real scarcity of accessible themes 21 www.coolfields.co.uk Coolfields Consulting @coolfields
- 22. WordPress and Accessibility Good news: • WordPress core is generally very good at supporting web accessibility • Default themes are not too bad – and getting better • It is possible to create a WordPress website that is very accessible 22 www.coolfields.co.uk Coolfields Consulting @coolfields
- 23. 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 23 www.coolfields.co.uk Coolfields Consulting @coolfields
- 24. 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 24 www.coolfields.co.uk Coolfields Consulting @coolfields
- 25. A developer is building me a theme or website – what should I ask him/her? • Do they know what accessibility is? • Do they build accessible websites? – ask for examples • How do they test for accessibility? My advice - Ask for WCAG2.0 level AA – a good pragmatic standard 25 www.coolfields.co.uk Coolfields Consulting @coolfields
- 26. But will it cost more? • Developers who are familiar with accessibility shouldn’t charge significantly more for a normal website build – they’ll possibly be doing it anyway • However testing for accessibility can be more time consuming so that may cost a bit more. • End user testing can be more expensive still, but is an extremely revealing form of testing. • If you have videos it will be necessary to caption them 26 www.coolfields.co.uk Coolfields Consulting @coolfields
- 27. Implementing accessibility • Accessibility is a lot harder and more expensive to retrofit. • It needs to be designed in from the start 27 www.coolfields.co.uk Coolfields Consulting @coolfields
- 28. Simple things we can all do - 1 Images – correct use of alternate text (alt attribute) • Describe what image shows or what it represents 28 www.coolfields.co.uk Coolfields Consulting @coolfields
- 29. 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 Links list from JAWS screen reader 29 www.coolfields.co.uk Coolfields Consulting @coolfields
- 30. Simple things we can all do - 3 Use headings properly • Signpost content • Often used as navigation mechanism by screen reader users Headings list from JAWS screen reader 30 www.coolfields.co.uk Coolfields Consulting @coolfields
- 31. 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. Not so good… 31 www.coolfields.co.uk Coolfields Consulting @coolfields
- 32. Accessibility and the WordPress admin area 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… 32 www.coolfields.co.uk Coolfields Consulting @coolfields
- 33. General issues with the admin area • Many, many links – including empty ones • Visible focus • Getting to where you want to be 33 www.coolfields.co.uk Coolfields Consulting @coolfields
- 34. Problem areas of admin screens • Adding and Editing Posts and Pages • Custom menu builder • Theme customization • Logging off 34 www.coolfields.co.uk Coolfields Consulting @coolfields
- 35. So what of the future? • The situation is improving - slowly • Users and testers are raising accessibility issues • These are getting fixed • But, WordPress is made by many different developers with differing ideas • WordPress needs to have an accessibility Mission Statement 35 www.coolfields.co.uk Coolfields Consulting @coolfields
- 36. Resources 1 WordPress Themes • http://wordpress.org/extend/themes/ • http://themeforest.net/ • http://www.woothemes.com/ WordPress Plugins • http://wordpress.org/extend/plugins/ • http://www.woothemes.com/ 36 www.coolfields.co.uk Coolfields Consulting @coolfields
- 37. Resources 2 • 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) 37 www.coolfields.co.uk Coolfields Consulting @coolfields
- 38. Resources 3 • 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 38 www.coolfields.co.uk Coolfields Consulting @coolfields
- 39. To finish Thanks for listening – any questions? [email protected] 39 www.coolfields.co.uk Coolfields Consulting @coolfields
Editor's Notes
- #4: Freelance developer – used to work for large financial organisation but now run my own company.
- #5: Why I’m doing this presentation:Try to get developers and content authors to think about a11y when they’re developing or creating their content.
- #8: One definition – not just about people with disabilities.How they need to may be a browser, or some other piece of technology.
- #11: PWD = People with disabilityAlso, many people with impairments that affect how they use the internet would not consider that they have a disability.
- #12: Colour blindness – penalty shoot out display.
- #15: Tesco – accessible site no longer exists as a separate entity. The techniques used were included in the main Tesco online site.Most of my clients are small businesses who are selling products or services. They want to maximise their reach within potential customers.
- #25: WordPress admin screens are covered in more detail a bit later
- #29: If image is a link describe the destinationDecorative images – leave alternate text blank (alt=“”)Background imagesNo alternate textWill not be voiced so meaning is not conveyed
- #30: It is possible to hide verbose messages from sighted users but have them available for screen readers
- #31: Good to add all contact in semantic waysSemantic elementsOften used as navigation mechanism by screen reader usersBreak up content into more manageable chunksTry to nest correctlyAlso good for SEONavigation mechanism – think about newspapersBreaking up content – helps those with attention deficit issues and other cognitive impairments
- #34: Introduce my own plugin
- #39: There is no tool that can fully test for accessibility automatically – so much is about context.