Beginners Guide To Web Accessibility - WordCamp UK July 2013


Published on

A beginners guide to web accessibility. A presentation covering the definition of what web accessibility is, why it's important, what you can do about it, and when to think about it.

Published in: Technology, Design
1 Like
  • Be the first to comment

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

No notes for slide
  • PWD = People with disabilityAlso, many people with impairments that affect how they use the internet would not consider that they have a disability.
  • PWD = People with disabilityAlso, many people with impairments that affect how they use the internet would not consider that they have a disability.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.
  • 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 impairmentsEtc
  • Those with impairments are unlikely to be using Google Chrome – it doesn’t expose as many useful accessibility features and doesn’t follow all useful web standards – eg in-page link focus.
  • I have a visual impairment – I’m shortsighted. My assistive technology is a pair of glassesAssistive technology can be software based – magnification or screen reader or speech recognition softwareOr 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 quite as good as JAWS but is improving all the time. JAWS is much better for non-browser based applications like Word, Excel etc
  • Accessibility is influenced by three groups of people
  • Imagine you need to dec=scribe the image to someone over the phoneBackground 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
  • Show example of church website
  • Basically it needs to be easy to readResizing text is not the same as zoomingLayouts should be resilientAvoid justification
  • HTML5 Prompt attribute is not yet supported in all AT
  • ARIA is a huge areaARIA landmarks can be used to jump around the pageScreen reader users are learning to look for them in web pages nowStill really useful despite more semantic HTML5 elements
  • Beginners Guide To Web Accessibility - WordCamp UK July 2013

    1. 1. Coolfields Consulting @coolfields Beginners Guide to Web Accessibility Graham Armfield Web Accessibility Consultant WordPress Developer @coolfields
    2. 2. What I‟m Going to Cover • What is web accessibility? • Why is it important? • Who is affected by poor accessibility? • How can accessibility be improved? • When to think about accessibility? 2
    3. 3. Coolfields Consulting @coolfields What is Web Accessibility? “Enabling the web so that everyone can access its content when they want to and how they need to”
    4. 4. Accessibility vs Usability 4 Usability Accessibility
    5. 5. Accessibility is not black and white In most websites there are usually few accessibility showstoppers. But… • They do occur • Websites can be fine for some people but totally inaccessible for others Web accessibility issues make life a harder for some people. So, web accessibility is about making websites easy to use for as many people as possible. Remember, if people find your website hard to use they will probably leave. 5
    6. 6. Coolfields Consulting @coolfields Why is Accessibility Important? What is all the fuss about?
    7. 7. Why is accessibility 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 Accessibility can increase the profitability of a website Accessibility is a legal requirement 7
    8. 8. Coolfields Consulting @coolfields Who is Affected by Poor Accessibility? More people than you may think.
    9. 9. Accessibility Myths - 1 It‟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 9
    10. 10. Accessibility Myths - 2 Accessibility is all about blind people… • 1.8 million people have a vision impairment, of which 180,000 are registered blind • 1 in 12 men have colour-blindness • 2.6 million have difficulties using their hands which could impact their use of keyboard and/or mouse • About 2 million people have a hearing impairment, of which 50,000 use British Sign Language to communicate • About 2 million people are dyslexic • 2.2 million people have difficulty with memory, concentration or learning, of which about 1 million have a learning difficulty 10
    11. 11. Accessibility Myths - 3 Yes, but my site is not meant for the blind/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 • Studies in US show that friends and family of PWD will also avoid inaccessible sites 11
    12. 12. Accessibility Myths - 4 It‟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. • If a company‟s website is hard to use, people will visit a competitor‟s site which is easier to use. • Tesco – In 2001 an accessible version of their shopping site was launched at a cost £35k and yielded £13m turnover a year 12
    13. 13. Accessibility Myths - 5 If 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? 13
    14. 14. Accessibility and the law • Equality Act 2010 (Disability Discrimination Act in Northern Ireland) • Laws specifically refer to websites 14
    15. 15. Accessibility Myths - 6 Yes but no-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 was settled as BMI Baby agreed to make changes. » RNIB have indicated that they may be looking at more actions in the near future. 15
    16. 16. Types of disability/impairment So who can experience difficulties with websites and apps? Those with: • Visual impairments • Motor impairments • Hearing impairments • Epilepsy • Cognitive impairments 71% of PWD have „invisible‟ disabilities or impairments 16
    17. 17. Techniques to mitigate impairment Accessibility 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) 17
    18. 18. Assistive technology 18
    19. 19. But complexity comes at a price How much for a screen reader? Open source to the rescue? • NVDA screen reader • free to download • Mac and PC • Improving all the time - 19
    20. 20. Screen reader examples 1.BBC News with NVDA – medium speed 2.BBC News with NVDA – faster speed 20 Refreshable Braille Display at approx 2:06 in
    21. 21. iPhones, iPads and blindness • Many accessibility features built in • Eg Voiceover – screen reader • Speech recognition • The result is that many blind users swear by their iOS devices 21
    22. 22. Coolfields Consulting @coolfields How Can Accessibility be Improved? It‟s not rocket science.
    23. 23. WordPress sites Accessibility is influenced by three groups of people 23 Theme Developers Plugin Developers Content Authors
    24. 24. 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 websites are difficult for some people with disabilities and impairments • Every accessibility step that you take will make life easier for someone 24
    25. 25. Simple things we can do - 1 Images – correct use of alternate text (alt attribute) • Describe what image shows or what it represents • If a link, describe destination • If decorative, leave blank (alt=“”) 25 Relevant for:
    26. 26. Simple things we can 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 26 Links list from JAWS screen reader Relevant for:
    27. 27. Simple things we can do - 3 Use headings properly • Semantic elements • Often used as navigation mechanism by screen reader users • Signpost content 27 Headings list from JAWS screen reader Relevant for:
    28. 28. Simple things we can do - 4 Keyboard focus and operation • Focus should be easily visible • Tab order should make sense • Ensure all functionality accessible by keystrokes 28 Relevant for:
    29. 29. Simple things we can do - 5 Text • Good colour contrast • Should allow itself to be resized without breaking layout (initially) • Use of colour alone to convey meaning 29 How not to do it Relevant for:
    30. 30. Simple things we can do - 6 Mark up forms correctly • Use labels for input fields • Fieldset for grouping controls • Clear display of errors and use text • Don‟t use CAPTCHAs 30 Relevant for: <label for="yourname">Your name:</label> <input type="text" name="yourname" id="yourname" value="" /> <input type=“checkbox" name=“legal" id=“legal" value="" checked=“checked”/> <label for=“legal">I have read the legal page</label>
    31. 31. Simple things we can do - 7 WAI-ARIA • Roles/Landmarks help signpost parts of web pages • Live regions for dynamic content • More advanced roles for AJAX sites and apps – including mobile apps 31 Relevant for:
    32. 32. Coolfields Consulting @coolfields When Should I Think About Accessibility?
    33. 33. Implementing accessibility • Accessibility is a lot harder and more expensive to retrofit. • So it needs to be designed in from the start • Think of it as another requirement – one which may not be explicitly asked for. 33
    34. 34. Coolfields Consulting @coolfields Useful Resources
    35. 35. Resources 1 • WCAG Guidelines - WARNING: Not all easy reading, but use the „Understanding WCAG‟ section • Accessibility sites and blogs (including my own) • Webaim - • Accessify Forum - • WebAxe - • Coolfields (my own) - (including many guides to correct markup of forms, text for screen readers only, etc) 35
    36. 36. Resources 2 • Validators and accessibility tools • Markup validator - • Wave - • Colour contrast analyser - analyser.html • NVDA - • Useful Firefox Add-ons • Fangs (screen reader emulator) • HTML Validator • Web Developer toolbar There is no tool that can fully test for accessibility automatically – so much is about context. 36
    37. 37. Resources 3 • Other Useful sites • Keyboard accessible dropdowns – • HTML5 and Accessibility - • Subtitle Horse - • Amara (Universal Subtitles) - 37
    38. 38. Resources 4 YouTube Videos • American blind woman demos JAWS – (slow start) • ARIA - live regions • Leonie Watson on ARIA regions • MS User and Dragon Naturally Speaking • Build your own assistive technology – (Don‟t) try this at home 38
    39. 39. Thanks for listening – any (more) questions? @coolfields 39