Your SlideShare is downloading. ×
WordPress and Web Accessibility: Why it's Important
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WordPress and Web Accessibility: Why it's Important


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 …

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

Published in: Technology, Design

1 Comment
  • This is a great presentation, Graham.

    So many smaller businesses are using Wordpress to create their sites (including my own:

    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.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • Freelance developer – used to work for large financial organisation but now run my own company.
  • One definition – not just about people with disabilities.Similar to definition on WordPress Codex Accessibility page.
  • Most of my clients are small businesses who are selling products or services. They want to maximise their reach within potential customers.
  • 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
  • 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
  • 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
  • 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
  • Good to add all contact in semantic waysNavigation mechanism – think about newspapersBreaking up content – helps those with attention deficit issues and other cognitive impairments
  • Basically it needs to be easy to readResizing text is not the same as zoomingLayouts should be resilient
  • ARIA is a huge area
  • 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.
  • 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
  • There is no tool that can fully test for accessibility automatically – so much is about context.
  • Transcript

    • 1. WordPress London 20th October 2011 WordPress and Web Accessibility: Why it‟s Important Graham Armfield Consulting @coolfields
    • 2. WordPress London 20th October 2011WordPress and Web AccessibilityGraham ArmfieldWho am I? • Web developer • WordPress developer and user • Accessibility consultant • Accessibility tester 2 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 11. WordPress London 20th October 2011Assistive technology 11 Consulting @coolfields
    • 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 - 12 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 • Eg: Access keys, title attributes 15 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 Consulting @coolfields
    • 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 • 23 Consulting @coolfields
    • 24. WordPress London 20th October 2011ExamplesScreen reader • Speed examples • Images • Links • FormsFocus • Visibility • Dropdown menus 24 Consulting @coolfields
    • 25. WordPress London 20th October 2011Resources 1 • WCAG Guidelines - WARNING: Not all easy reading, but use the „Understanding WCAG‟ section • Accessibility sites and blogs (including my own) • Webaim - • Accessify - • WebAxe - • Coolfields (my own) - 25 Consulting @coolfields
    • 26. WordPress London 20th October 2011Resources 2 • Validators and accessibility tools • Markup validator - • Wave - • Colour contrast - • NVDA - • Useful Firefox Add-ons • Fangs (screen reader emulator) • HTML Validator • Web Developer toolbar • WCAG Contrast Checker 26 Consulting @coolfields
    • 27. WordPress London 20th October 2011Resources 3 • Other Useful sites • Subtitle Horse - • Keyboard accessible dropdowns – • HTML5 Accessibility - 27 Consulting @coolfields
    • 28. WordPress London 20th October 2011To finish Thanks for listening – any questions? 28 Consulting @coolfields