So How Do I Know if My Website is Accessible?
•
2 likes•1,068 views
Presentation I delivered on Global Accessibility Awareness Day - May 15th 2014. It was delivered as part of Inclusive Design 24 - 24 hours of accessibility webinars. The event was sponsored by the Paciello Group and Adobe. The presentation is aimed at developers and website administrators who may have heard about accessibility, but who'd like to learn more. It sets out a series of yes/no questions that anyone can answer about their own websites - using simple techniques and a couple of useful tools that you can download. The presentation doesn't cover all aspects of web accessibility, but if you can answer these questions correctly about your website, then it's going to be more accessible than many.
Report
Share
So How Do I Know if My Website is Accessible?
- 1. Coolfields Consulting www.coolfields.co.uk @coolfields So, how do I know if my website is accessible? Graham Armfield Web Accessibility Consultant WordPress Developer graham.armfield@coolfields.co.uk @coolfields
- 2. What I’m going to cover Web Content Accessibility Guidelines (Version 2) published by the Web Accessibility Initiative of the World Wide Web Consortium http://www.w3.org/TR/WCAG20/ A.K.A. WCAG2.0 • Good resource for accessibility • But can be hard to interpret @coolfields
- 3. What I’m going to cover So how about a simple yes/no checklist? Easy to check – with free tools @coolfields
- 4. Health warning In time available I can only cover some common accessibility issues. But, if you can answer these questions correctly, your site will be more accessible than many. 4@coolfields
- 6. Keyboard interaction You need to answer Yes to these: 1) Can I easily access all parts of the site with the keyboard only? 2) Can I easily see where keyboard focus is? 6@coolfields
- 9. Keyboard interaction CSS a:hover {background:#fff, color:#000} a:hover, a:focus {background:#fff, color:#000} Don't do this: a:focus {outline:none} 9@coolfields
- 10. Keyboard interaction 10@coolfields Keyboard accessible dropdown menus are possible
- 11. Keyboard interaction 11 You need to answer Yes to this: 3) Can I easily access all functionality with the keyboard only? @coolfields
- 13. Keyboard interaction 13 When lightbox opens, focus remains on page below
- 14. Keyboard interaction 14 You need to answer Yes to this: 4) Does the keyboard tab order make sense? @coolfields
- 16. Links Can you answer Yes to this one? 5) Are the links obviously links? 16@coolfields
- 17. Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? 17
- 18. Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? 18
- 19. Links Can you answer No to this one? 7) Do any of your links open new windows or panels without letting the user know in advance? 19 Lightbox functionality – there is no warning that this panel will open
- 21. Media Can you answer Yes to this? 8) Do all images have appropriate alternate text? (appropriate may mean empty ie alt="") 21@coolfields
- 22. Media Using the Wave Toolbar 22@coolfields
- 23. Media Can you answer Yes to this? 9) Do all videos have captions? 23@coolfields
- 24. Coolfields Consulting www.coolfields.co.uk @coolfields Signposting Content Photo: thepicturedrome
- 25. Signposting content Can you answer Yes to this? 10) Are the page titles unique and meaningful? 25@coolfields
- 26. Signposting content Can you answer Yes to this? 11) Do pages have appropriate headings and subheadings? 26@coolfields
- 27. Using headings 27 Headings list from NVDA screen reader Note: NVDA exposes heading hierarchy Heading are used as a navigation feature
- 30. Text Can you answer Yes to this one? 12) Can I resize text in a page without breaking the layout? 30@coolfields
- 31. Normal size NB: Resizing and zooming are not the same thing Text 31@coolfields Larger size
- 32. Text Can you answer No to this one? 13) Is any of the text fully justified? 32@coolfields
- 34. Text 34 Left aligned textFully justified text
- 35. "Rivers of white space" Text 35 Left aligned textFully justified text
- 36. Coolfields Consulting www.coolfields.co.uk @coolfields User Input Photo: AlecCouros
- 37. User input Can you answer Yes to this one? 14) Do all form fields have an accompanying label? 37@coolfields
- 38. User input 38
- 39. User input 39
- 41. Colour & shape Can you answer Yes to this one? 15) Is the colour contrast sufficient? 41
- 45. Colour & shape Can you answer No to this one? 16) Is meaning conveyed by colour or shape only? 45@coolfields
- 46. Colour & shape 46 Project Name Status Fully Resourced? Easy peasy project a Quite a tricky project a So glad I'm not on that project r Going OK a @coolfields
- 47. Colour & shape 47 Project Name Status Fully Resourced? Easy peasy project a Quite a tricky project a So glad I'm not on that project r Going OK a @coolfields Green Green Amber Red
- 48. Useful links Colour Contrast Analyzer • http://paciellogroup.com/resources/contrastAnalyser Wave Toolbar • http://wave.webaim.org/toolbar/ 48
- 49. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 49
- 50. Some things I didn't cover • Form submission errors • Movement/flashing on pages • Audio on pages • Updating content after page loaded • Timeouts • Data tables 50@coolfields • Keyboard traps • CAPTCHAs • Skip links • Alternate navigation • Indicating language • Triggering actions • Automated page refreshing • PDFs
- 51. All the questions together 1) Can I easily access all parts of the site with the keyboard only? Right answer - Yes 2) Can I easily see where keyboard focus is? Right answer – Yes 3) Can I easily access all functionality with the keyboard only? Right answer – Yes 4) Does the keyboard tab order make sense? Right answer – Yes 5) Are the links obviously links? Right answer – Yes 6) Do all links provided enough information to state where they lead to? Right answer – Yes 7) Do any of your links open new windows or panels without letting the user know in advance? Right answer – No 8) Do all images have appropriate alternate text? Right answer - Yes 51@coolfields 9) Do all videos have captions? Right answer – Yes 10) Are page titles unique and meaningful? Right answer – Yes 11) Do pages have appropriate headings and subheadings? Right answer – Yes 12) Can I resize text in a page without breaking the layout? Right answer – Yes 13 ) Is any of the text fully justified? Right answer – No 14) Do all form fields have an accompanying label? Right answer – Yes 15) Is the colour contrast sufficient? Right answer – Yes 16) Is meaning conveyed by colour and shape only? Right answer - No