WordPress and Web Accessibility: Why It's Important. WordCampUK 2012

WordPress and Web Accessibility: Why it’s Important Graham Armfield www.coolfields.co.ukCoolfields Consulting @coolfields

WordPress and Web AccessibilityGraham ArmfieldWho am I? • Web developer • WordPress developer and user • Accessibility consultant • Accessibility tester 2 www.coolfields.co.ukCoolfields Consulting @coolfields

What this presentation will cover • What does web accessibility mean? • Why web accessibility is important? • Types of disability and how those with different impairments use the web • Using WordPress to build accessible sites • Simple things we can all do • Accessibility of the WordPress admin screens • Resources 3 www.coolfields.co.ukCoolfields Consulting @coolfields

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.ukCoolfields Consulting @coolfields

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 5 www.coolfields.co.ukCoolfields Consulting @coolfields

Why do web accessibility?• Accessibility can increase the profitability of a website• Accessibility is a legal requirement 6 www.coolfields.co.ukCoolfields Consulting @coolfields

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 PWD have invisible disabilities – such as a learning or cognitive disability 7 www.coolfields.co.ukCoolfields Consulting @coolfields

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 8 www.coolfields.co.ukCoolfields Consulting @coolfields

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 9 www.coolfields.co.ukCoolfields Consulting @coolfields

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 10 www.coolfields.co.ukCoolfields Consulting @coolfields

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? 11 www.coolfields.co.ukCoolfields Consulting @coolfields

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? 12 www.coolfields.co.ukCoolfields Consulting @coolfields

Accessibility and the law • Equality Act 2010 (Still the Disability Discrimination Act in Northern Ireland) • Laws specifically refer to websites 13 www.coolfields.co.ukCoolfields Consulting @coolfields

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. 14 www.coolfields.co.ukCoolfields Consulting @coolfields

Types of impairmentSo who can experience difficulties with websitesand apps? Those with: • Visual impairments • Motor impairments • Hearing impairments • Epilepsy • Cognitive impairments 71% of PWD have ‘invisible’ disabilities 15 www.coolfields.co.ukCoolfields Consulting @coolfields

Techniques to mitigate impairmentAccessibility options in browsers • Mainly Internet Explorer + Firefox • Specify colours, font styles and sizes • Adjust text size without zooming – there is a difference • Attach your own custom stylesheet (IE only) 16 www.coolfields.co.ukCoolfields Consulting @coolfields

Assistive technology 17 www.coolfields.co.ukCoolfields Consulting @coolfields

Screen reader examples 1.BBC News with NVDA – medium speed 2.BBC News with NVDA – slow speed 3.BBC News with NVDA – faster speedRefreshable Braille Display http://www.youtube.com/watch?v=R6XAPkiQMtw at approx 2:06 in 18 www.coolfields.co.ukCoolfields Consulting @coolfields

But 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/ 19 www.coolfields.co.ukCoolfields Consulting @coolfields

iPhones, iPads and blindness• Many accessibility features built in • Eg Voiceover – screen reader • Speech recognition• Result is that many blind users swear by their devices 20 www.coolfields.co.ukCoolfields Consulting @coolfields

WordPress and AccessibilityGood news: • WordPress core is generally very good at supporting web accessibility • Default themes are not too bad • It is possible to create a WordPress website that is very accessible 21 www.coolfields.co.ukCoolfields Consulting @coolfields

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 22 www.coolfields.co.ukCoolfields Consulting @coolfields

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 23 www.coolfields.co.ukCoolfields Consulting @coolfields

So who can make WordPress sitesaccessible? Theme Plugin Developers Developers Content Authors 24 www.coolfields.co.ukCoolfields Consulting @coolfields

Implementing accessibility • Accessibility is a lot harder and more expensive to retrofit. • It needs to be designed in from the start 25 www.coolfields.co.ukCoolfields Consulting @coolfields

So what can we do?• Remember, disabilities and impairments are not absolutes• Few websites are totally impossible for those with impairments to use.• But most are difficult for some people with disabilities and impairments• Every accessibility step that you take will make life easier for someone 26 www.coolfields.co.ukCoolfields Consulting @coolfields

Simple things we can do - 1Images – correct use ofalternate text (altattribute) • Describe what image shows or what it representsRelevant for: 27 www.coolfields.co.ukCoolfields Consulting @coolfields

Simple things we can 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 userRelevant for: Links list from JAWS screen reader 28 www.coolfields.co.ukCoolfields Consulting @coolfields

Simple things we can do - 3Use headings properly • Semantic elements • Often used as navigation mechanism by screen reader users • Signpost contentRelevant for: Headings list from JAWS screen reader 29 www.coolfields.co.ukCoolfields Consulting @coolfields

Simple things we can do - 4Keyboard focus andoperation • Focus should be easily visible • Tab order should make sense • Ensure all functionality accessible by keystrokesRelevant for: 30 www.coolfields.co.ukCoolfields Consulting @coolfields

Simple things we can do - 5Text • Good colour contrast • Should allow itself to be resized without breaking layout (initially) • Use of colour alone to convey meaning How not to do itRelevant for: 31 www.coolfields.co.ukCoolfields Consulting @coolfields

Simple things we can do - 6Mark up forms correctly <label for="yourname">Your name:</label> • Use labels for input fields <input type="text" • Fieldset for grouping name="yourname" id="yourname" value="" /> controls • Clear display of errors and <input type=“checkbox" name=“legal" id=“legal" use text value="" • Don’t use CAPTCHAs checked=“checked”/> <label for=“legal">I haveRelevant for: read the legal page</label> 32 www.coolfields.co.ukCoolfields Consulting @coolfields

ExamplesScreen reader• JAWS on text box with no label• JAWS on radio button with no label• JAWS on text box with label• JAWS on radio button with label• JAWS on radio button with label and fieldset/legend 33 www.coolfields.co.ukCoolfields Consulting @coolfields

Simple things we can do - 7WAI-ARIA • Roles/Landmarks help signpost parts of web pages • Live regions for dynamic content • More advanced roles for AJAX sites and apps – including mobile appsRelevant for: 34 www.coolfields.co.ukCoolfields Consulting @coolfields

Accessibility and the WordPressadmin areaSo far we’ve covered creating websites thatare outwardly accessible…Q. But what about the back end?A. Oh dear… 35 www.coolfields.co.ukCoolfields Consulting @coolfields

Accessibility and the WordPressadmin area -2Key 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… 36 www.coolfields.co.ukCoolfields Consulting @coolfields

Demo issues with admin area• Many, many links – including empty ones• Visible focus• Getting to where you want to be 37 www.coolfields.co.ukCoolfields Consulting @coolfields

Demo issues with admin areaAdding and Editing Posts and Pages • Many problems here for anyone who can’t use a mouse • Accessing tool bar • Adding images • Tab order of edit screen doesn’t always make sense • It’s good that some help is provided but instructions need to be clearer • Remember – accessibility is not just about blind people – how do sighted people using keyboard or AT use these screens? 38 www.coolfields.co.ukCoolfields Consulting @coolfields

Demo issues with admin areaCustom Menus • Can add items to a menu with keyboard, but… • Believed to be impossible to manipulate hierarchy of menu items without use of a mouse • Can tab to each menu item but it does not announce what it is or its position in the hierarchy – could be done with some ARIA wizardry • Could do with some instructions when accessible techniques are available 39 www.coolfields.co.ukCoolfields Consulting @coolfields

Demo issues with admin areaWidgets • There are accessibility options here but they are not easy to find. • Once you know where they are you can manipulate widgets without a mouse – but it could be a lot easier • Some clear instructions would be good - Discoverability 40 www.coolfields.co.ukCoolfields Consulting @coolfields

Demo issues with admin areaTheme Customisation • Can’t really see how to do this without using a mouse • When popup appears, focus needs to be transferred into the panel – it’s actually still in the screen underneath. • When saving options transfer focus back to where you were before – in this case the link that opened the panel. 41 www.coolfields.co.ukCoolfields Consulting @coolfields

Demo issues with admin areaLogging off • Don’t think this is possible without using a mouse 42 www.coolfields.co.ukCoolfields Consulting @coolfields

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/ (including many guides to correct markup of forms, text for screen readers only, etc) 43 www.coolfields.co.ukCoolfields Consulting @coolfields

Resources 2 • 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 44 www.coolfields.co.ukCoolfields Consulting @coolfields

Resources 3 • Other Useful sites • Keyboard accessible dropdowns – http://blakehaswell.com/lab/dropdown/deux/ • HTML5 and Accessibility - http://www.html5accessibility.com/ • Subtitle Horse - http://subtitle-horse.com/ 45 www.coolfields.co.ukCoolfields Consulting @coolfields

Resources 4YouTube Videos • American blind woman demos JAWS – (slow start) http://www.youtube.com/watch?v=si1_iR5lbyg • ARIA - live regions http://www.youtube.com/watch?v=9nZnTdSAkH0 • Leonie Watson on ARIA regions http://www.youtube.com/watch?v=IhWMou12_Vk • MS User and Dragon Naturally Speaking http://www.youtube.com/watch?v=BsZo1p_5-o4 • Build your own assistive technology – (Don’t) try this at home http://www.youtube.com/watch?v=1LR11wDFMcA 46 www.coolfields.co.ukCoolfields Consulting @coolfields

To finish Thanks for listening – any questions? graham.armfield@coolfields.co.uk 47 www.coolfields.co.ukCoolfields Consulting @coolfields

http://eventifier.co	29
https://si0.twimg.com	9
http://www.blogcodi.net	6
https://twimg0-a.akamaihd.net	2
http://us-w1.rockmelt.com	2
http://zootool.com	2
https://twitter.com	1

WordPress and Web Accessibility: Why It's Important. WordCampUK 2012

by Graham Armfield on Jul 15, 2012

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 51

Statistics

WordPress and Web Accessibility: Why It’s Important. WordCampUK 2012 Presentation Transcript