WordPress and Web Accessibility - TCUK 2012


Published on

WordPress is increasing in popularity within the world as a content management tool for producing and maintaining all kinds of websites - not just blogs. But is it possible to create accessible websites using WordPress. This presentation looks at the meaning of web accessibility, why it's important, and what factors can influence accessibility within the WordPress framework. I also cover how things are changing for the better within future releases of WordPress.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Freelance developer – used to work for large financial organisation but now run my own company.
  • 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.
  • One definition – not just about people with disabilities.How they need to may be a browser, or some other piece of technology.
  • PWD = People with disabilityAlso, many people with impairments that affect how they use the internet would not consider that they have a disability.
  • Colour blindness – penalty shoot out display.
  • 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.
  • WordPress admin screens are covered in more detail a bit later
  • 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
  • It is possible to hide verbose messages from sighted users but have them available for screen readers
  • 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
  • Introduce my own plugin
  • There is no tool that can fully test for accessibility automatically – so much is about context.
  • WordPress and Web Accessibility - TCUK 2012

    1. 1. WordPress and Web Accessibility Graham Armfield www.coolfields.co.ukCoolfields Consulting @coolfields
    2. 2. WordPress and Web Accessibility Please shout or otherwise indicate if you can’t hear me. 2 www.coolfields.co.ukCoolfields Consulting @coolfields
    3. 3. WordPress and Web AccessibilityGraham ArmfieldWho am I? • WordPress developer and user • Accessibility consultant • Accessibility tester 3 www.coolfields.co.ukCoolfields Consulting @coolfields
    4. 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.ukCoolfields Consulting @coolfields
    5. 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.ukCoolfields Consulting @coolfields
    6. 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.ukCoolfields Consulting @coolfields
    7. 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.ukCoolfields Consulting @coolfields
    8. 8. Why 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 8 www.coolfields.co.ukCoolfields Consulting @coolfields
    9. 9. Why do web accessibility?• Accessibility can increase the profitability of a website• Accessibility is a legal requirement 9 www.coolfields.co.ukCoolfields Consulting @coolfields
    10. 10. Accessibility Myths - 1It’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.ukCoolfields Consulting @coolfields
    11. 11. Accessibility Myths - 2Accessibility 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.ukCoolfields Consulting @coolfields
    12. 12. Accessibility Myths - 3Yes, but my site is not meant for theblind/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.ukCoolfields Consulting @coolfields
    13. 13. Accessibility Myths - 4It’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.ukCoolfields Consulting @coolfields
    14. 14. Accessibility can increase profitIt 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.ukCoolfields Consulting @coolfields
    15. 15. Accessibility Myths - 5If 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.ukCoolfields Consulting @coolfields
    16. 16. Accessibility Myths - 6No-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.ukCoolfields Consulting @coolfields
    17. 17. The rising popularity of WordPressLatest 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.ukCoolfields Consulting @coolfields
    18. 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.ukCoolfields Consulting @coolfields
    19. 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.ukCoolfields Consulting @coolfields
    20. 20. WordPress Themes 20 www.coolfields.co.ukCoolfields Consulting @coolfields
    21. 21. But how do you know if themes andplugins 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.ukCoolfields Consulting @coolfields
    22. 22. WordPress and AccessibilityGood 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.ukCoolfields Consulting @coolfields
    23. 23. WordPress and AccessibilityBad 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.ukCoolfields Consulting @coolfields
    24. 24. WordPress and accessibilityBad 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.ukCoolfields Consulting @coolfields
    25. 25. A developer is building me a themeor website – what should I askhim/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 goodpragmatic standard 25 www.coolfields.co.ukCoolfields Consulting @coolfields
    26. 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.ukCoolfields Consulting @coolfields
    27. 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.ukCoolfields Consulting @coolfields
    28. 28. Simple things we can all do - 1Images – correct use ofalternate text (altattribute) • Describe what image shows or what it represents 28 www.coolfields.co.ukCoolfields Consulting @coolfields
    29. 29. Simple 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 Links list from JAWS screen reader 29 www.coolfields.co.ukCoolfields Consulting @coolfields
    30. 30. Simple things we can all do - 3Use headings properly • Signpost content • Often used as navigation mechanism by screen reader users Headings list from JAWS screen reader 30 www.coolfields.co.ukCoolfields Consulting @coolfields
    31. 31. Accessibility and the WordPressadmin areaSo far we’ve covered creating websites thatare outwardly accessible…Q. But what about the back end?A. Not so good… 31 www.coolfields.co.ukCoolfields Consulting @coolfields
    32. 32. Accessibility and the WordPressadmin areaKey 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.ukCoolfields Consulting @coolfields
    33. 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.ukCoolfields Consulting @coolfields
    34. 34. Problem areas of admin screens• Adding and Editing Posts and Pages• Custom menu builder• Theme customization• Logging off 34 www.coolfields.co.ukCoolfields Consulting @coolfields
    35. 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.ukCoolfields Consulting @coolfields
    36. 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.ukCoolfields Consulting @coolfields
    37. 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.ukCoolfields Consulting @coolfields
    38. 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.ukCoolfields Consulting @coolfields
    39. 39. To finish Thanks for listening – any questions? graham.armfield@coolfields.co.uk 39 www.coolfields.co.ukCoolfields Consulting @coolfields