Uploaded byGraham Armfield
WordPress and Web Accessibility: Why it's Important
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
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
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
- 26. WordPress London 20th October 2011 Resources 2 • Validators and accessibility tools • Markup validator - http://validator.w3.org/ • Wave - http://wave.webaim.org/ • Colour contrast - http://www.dasplankton.de/ContrastA/ • NVDA - http://www.nvda-project.org/ • Useful Firefox Add-ons • Fangs (screen reader emulator) • HTML Validator • Web Developer toolbar • WCAG Contrast Checker 26 www.coolfields.co.uk Coolfields Consulting @coolfields
- 27. WordPress London 20th October 2011 Resources 3 • Other Useful sites • Subtitle Horse - http://subtitle-horse.com/ • Keyboard accessible dropdowns – http://blakehaswell.com/lab/dropdown/deux/ • HTML5 Accessibility - http://www.html5accessibility.com/ 27 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
- #3 Freelance developer – used to work for large financial organisation but now run my own company.
- #5 One definition – not just about people with disabilities.Similar to definition on WordPress Codex Accessibility page.
- #9 Most of my clients are small businesses who are selling products or services. They want to maximise their reach within potential customers.
- #11 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
- #12 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
- #13 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
- #16 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
- #19 Good to add all contact in semantic waysNavigation mechanism – think about newspapersBreaking up content – helps those with attention deficit issues and other cognitive impairments
- #22 Basically it needs to be easy to readResizing text is not the same as zoomingLayouts should be resilient
- #23 ARIA is a huge area
- #24 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.
- #25 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
- #27 There is no tool that can fully test for accessibility automatically – so much is about context.