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.
Upcoming SlideShare
Kirche
Next

4

Share

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

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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.uk Coolfields Consulting @coolfields
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. WordPress London 20th October 2011 Assistive technology 11 www.coolfields.co.uk Coolfields Consulting @coolfields
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  • allisonhermannphd

    Apr. 30, 2012
  • jonathanhassell

    Nov. 17, 2011
  • raptavares

    Oct. 23, 2011
  • webatou

    Oct. 23, 2011

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

Views

Total views

3,110

On Slideshare

0

From embeds

0

Number of embeds

46

Actions

Downloads

7

Shares

0

Comments

0

Likes

4

×