So How Do I Know if My Website is Accessible?

584
-1

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
584
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

So How Do I Know if My Website is Accessible?

  1. 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. 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. 3. What I’m going to cover So how about a simple yes/no checklist? Easy to check – with free tools @coolfields
  4. 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
  5. 5. Coolfields Consulting www.coolfields.co.uk @coolfields Keyboard Interaction
  6. 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
  7. 7. Keyboard interaction 7 Hover states
  8. 8. Keyboard interaction 8 Hover states Keyboard focus
  9. 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. 10. Keyboard interaction 10@coolfields Keyboard accessible dropdown menus are possible
  11. 11. Keyboard interaction 11 You need to answer Yes to this: 3) Can I easily access all functionality with the keyboard only? @coolfields
  12. 12. Keyboard interaction 12
  13. 13. Keyboard interaction 13 When lightbox opens, focus remains on page below
  14. 14. Keyboard interaction 14 You need to answer Yes to this: 4) Does the keyboard tab order make sense? @coolfields
  15. 15. Coolfields Consulting www.coolfields.co.uk @coolfields Photo: Links
  16. 16. Links Can you answer Yes to this one? 5) Are the links obviously links? 16@coolfields
  17. 17. Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? 17
  18. 18. Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? 18
  19. 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
  20. 20. Coolfields Consulting www.coolfields.co.uk @coolfields Media
  21. 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. 22. Media Using the Wave Toolbar 22@coolfields
  23. 23. Media Can you answer Yes to this? 9) Do all videos have captions? 23@coolfields
  24. 24. Coolfields Consulting www.coolfields.co.uk @coolfields Signposting Content Photo: thepicturedrome
  25. 25. Signposting content Can you answer Yes to this? 10) Are the page titles unique and meaningful? 25@coolfields
  26. 26. Signposting content Can you answer Yes to this? 11) Do pages have appropriate headings and subheadings? 26@coolfields
  27. 27. Using headings 27 Headings list from NVDA screen reader Note: NVDA exposes heading hierarchy Heading are used as a navigation feature
  28. 28. Using headings 28
  29. 29. Coolfields Consulting www.coolfields.co.uk @coolfields Text
  30. 30. Text Can you answer Yes to this one? 12) Can I resize text in a page without breaking the layout? 30@coolfields
  31. 31. Normal size NB: Resizing and zooming are not the same thing Text 31@coolfields Larger size
  32. 32. Text Can you answer No to this one? 13) Is any of the text fully justified? 32@coolfields
  33. 33. Text 33 Left aligned text
  34. 34. Text 34 Left aligned textFully justified text
  35. 35. "Rivers of white space" Text 35 Left aligned textFully justified text
  36. 36. Coolfields Consulting www.coolfields.co.uk @coolfields User Input Photo: AlecCouros
  37. 37. User input Can you answer Yes to this one? 14) Do all form fields have an accompanying label? 37@coolfields
  38. 38. User input 38
  39. 39. User input 39
  40. 40. Coolfields Consulting www.coolfields.co.uk @coolfields Colour & Shape
  41. 41. Colour & shape Can you answer Yes to this one? 15) Is the colour contrast sufficient? 41
  42. 42. Colour contrast 42
  43. 43. Colour contrast 43 Colour Contrast Analyzer Tool
  44. 44. Colour contrast 44@coolfields
  45. 45. Colour & shape Can you answer No to this one? 16) Is meaning conveyed by colour or shape only? 45@coolfields
  46. 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. 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. 48. Useful links Colour Contrast Analyzer • http://paciellogroup.com/resources/contrastAnalyser Wave Toolbar • http://wave.webaim.org/toolbar/ 48
  49. 49. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 49
  50. 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. 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

×