Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WordPress London 20th October 2011 WordPress and Web Accessibility: Why it‟s Important...
WordPress London 20th October 2011WordPress and Web AccessibilityGraham ArmfieldWho am...
WordPress London 20th October 2011What this presentation will cover • What does ...
WordPress London 20th October 2011What is web accessibility? One definition: “Enabli...
WordPress London 20th October 2011Why web accessibility is importantThe web is increasing...
WordPress London 20th October 2011Some statisticsDisability • Approx. 10 million pe...
WordPress London 20th October 2011Some statistics contdAn ageing population • Elderly ...
WordPress London 20th October 2011Accessibility can increase profitIt makes financia...
WordPress London 20th October 2011Accessibility and the law • Equality Act 2010 (D...
WordPress London 20th October 2011Types of impairmentWho can experience difficulties with...
WordPress London 20th October 2011Assistive technology ...
WordPress London 20th October 2011But complexity comes at a priceHow much for a...
WordPress London 20th October 2011WordPress and accessibilityGood news: • WordPress ...
WordPress London 20th October 2011WordPress and accessibilityBad news: • Many...
WordPress London 20th October 2011Making WordPress more accessible • Loo...
WordPress London 20th October 2011Simple things we can all do - 1Images – alternate ...
WordPress London 20th October 2011Simple things we can all do - 2Links • Ensur...
WordPress London 20th October 2011Simple things we can all do - 3Headings • Semant...
WordPress London 20th October 2011Simple things we can all do - 4Lists • If it‟s a...
WordPress London 20th October 2011Things developers can do - 1Keyboard focus • Should...
WordPress London 20th October 2011Things developers can do - 2Text • Not too sma...
WordPress London 20th October 2011Things developers can do - 3WAI-ARIA • Roles help si...
WordPress London 20th October 2011A brief word on HTML5How does HTML5 work with assis...
WordPress London 20th October 2011ExamplesScreen reader • Speed examples • Images • ...
WordPress London 20th October 2011Resources 1 • WCAG Guidelines - http://www...
WordPress London 20th October 2011Resources 2 • Validators and accessibility ...
WordPress London 20th October 2011Resources 3 • Other Useful sites • Subt...
WordPress London 20th October 2011To finish Thanks for listening – any quest...
Upcoming SlideShare
Loading in …5
×

WordPress and Web Accessibility: Why it's Important

2,926 views

Published on

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

Published in: Technology, Design
no profile picture user
  • Get Paid To Write Articles? YES! View 1000s of companies hiring online writers now! ●●● http://t.cn/AieXSfKU
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is a great presentation, Graham.

    So many smaller businesses are using Wordpress to create their sites (including my own: http://www.hassellinclusion.com).

    And if they want to make their sites accessible, it is really essential for them to know how to make good choices on theme, widgets, plug-ins and how they write their content.

    Your presentation is a great start for any sites wanting this sort of advice. I'll recommend it to those SMEs I'm working with.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

WordPress and Web Accessibility: Why it's Important

  1. 1. WordPress London 20th October 2011 WordPress and Web Accessibility: Why it‟s Important Graham Armfield www.coolfields.co.ukCoolfields Consulting @coolfields
  2. 2. WordPress London 20th October 2011WordPress 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. WordPress London 20th October 2011What 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.ukCoolfields Consulting @coolfields
  4. 4. WordPress London 20th October 2011What 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. WordPress London 20th October 2011Why 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. WordPress London 20th October 2011Some statisticsDisability • 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.ukCoolfields Consulting @coolfields
  7. 7. WordPress London 20th October 2011Some statistics contdAn 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.ukCoolfields Consulting @coolfields
  8. 8. WordPress London 20th October 2011Accessibility can increase profitIt 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.ukCoolfields Consulting @coolfields
  9. 9. WordPress London 20th October 2011Accessibility 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.ukCoolfields Consulting @coolfields
  10. 10. WordPress London 20th October 2011Types of impairmentWho can experience difficulties with websitesand apps? Those with: • Visual impairments • Motor impairments • Hearing impairments • Epilepsy • Cognitive impairments 10 www.coolfields.co.ukCoolfields Consulting @coolfields
  11. 11. WordPress London 20th October 2011Assistive technology 11 www.coolfields.co.ukCoolfields Consulting @coolfields
  12. 12. WordPress London 20th October 2011But 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/ 12 www.coolfields.co.ukCoolfields Consulting @coolfields
  13. 13. WordPress London 20th October 2011WordPress and accessibilityGood 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.ukCoolfields Consulting @coolfields
  14. 14. WordPress London 20th October 2011WordPress and accessibilityBad 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.ukCoolfields Consulting @coolfields
  15. 15. WordPress London 20th October 2011Making 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.ukCoolfields Consulting @coolfields
  16. 16. WordPress London 20th October 2011Simple things we can all do - 1Images – alternate text (altattribute) • 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.ukCoolfields Consulting @coolfields
  17. 17. WordPress London 20th October 2011Simple things we can all 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 user • Avoid redundant title attributes Links list from JAWS screen reader 17 www.coolfields.co.ukCoolfields Consulting @coolfields
  18. 18. WordPress London 20th October 2011Simple things we can all do - 3Headings • 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.ukCoolfields Consulting @coolfields
  19. 19. WordPress London 20th October 2011Simple things we can all do - 4Lists • If it‟s a list of items - mark it up as a listVideo • Avoid auto-start • Add captions 19 www.coolfields.co.ukCoolfields Consulting @coolfields
  20. 20. WordPress London 20th October 2011Things developers can do - 1Keyboard focus • Should be easily visible • Tab order should make sense • Ensure all functionality accessible by keystrokes • Eg dropdown menus 20 www.coolfields.co.ukCoolfields Consulting @coolfields
  21. 21. WordPress London 20th October 2011Things developers can do - 2Text • 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.ukCoolfields Consulting @coolfields
  22. 22. WordPress London 20th October 2011Things developers can do - 3WAI-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.ukCoolfields Consulting @coolfields
  23. 23. WordPress London 20th October 2011A brief word on HTML5How does HTML5 work with assistivetechnologies? • 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.ukCoolfields Consulting @coolfields
  24. 24. WordPress London 20th October 2011ExamplesScreen reader • Speed examples • Images • Links • FormsFocus • Visibility • Dropdown menus 24 www.coolfields.co.ukCoolfields Consulting @coolfields
  25. 25. WordPress London 20th October 2011Resources 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.ukCoolfields Consulting @coolfields
  26. 26. WordPress London 20th October 2011Resources 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.ukCoolfields Consulting @coolfields
  27. 27. WordPress London 20th October 2011Resources 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.ukCoolfields Consulting @coolfields
  28. 28. WordPress London 20th October 2011To finish Thanks for listening – any questions? graham.armfield@coolfields.co.uk 28 www.coolfields.co.ukCoolfields Consulting @coolfields

×