How do I know if my web project is accessible?

16 questions you can ask yourself to determine whether or not your web project is accessible.

Props to Graham Armfield of http://coolfields.co.uk for allowing me to build on his slides.

Transcript

1. Coolfields Consulting www.coolfields.co.uk @coolfields Michael Beil Coffee Dev Web Addict michaelbeil@me.com @michaelbeil How do I know if my web project is accessible?
2. Coolfields Consulting www.coolfields.co.uk @coolfields Social Stuff #a11y @MadJavaScript @michaelbeil
3. Coolfields Consulting www.coolfields.co.uk @coolfields Social Stuff #a11y @MadisonJavascript
4. Coolfields Consulting www.coolfields.co.uk @coolfields Relax
5. 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 • Can be hard to interpret
6. What I’m going to cover So how about a simple yes/no checklist? Easy to check with free tools
7. The Four Principles of Accessibility Perceivable – Make web content available for the senses: sight, sound, or touch. The most practical way to achieve this is to provide text alternatives for any non-text content. Operable – Make interface elements operable (forms, control, navigation). The biggies here are making keyboard navigation available and giving users time to read or click through content (i.e. imagine a slider that rotates images faster than a user can process or click). Understandable – Make sure content and user interface are understandable. Now this is User Interface 101, accessibility or not. If somebody’s having to guess about where to click, then the design is a failure. Stick to layouts and interfaces that are predictable – if you get too clever with a design, people won’t intuitively know how to use it. Designers, don’t hate on this one. Accessible does not have to equal boring or ugly. Robust – Content can be used reliably by a variety of user agents, including assistive technologies. The bottom line here? Always strive to conform with current web coding standards. See: http://www.carriedils.com/how-to-check-website-accessibility/
8. Take note •
9. Disclaiming We’re only going to cover some common accessibility issues. But, if you can answer these questions correctly, your site/project/app will be more accessible than many.
10. Legal stuff • Section 255 of the Telecommunications Act • (USA) Rehabilitation Act, Section 504 • (USA) Rehabilitation Act Amendments of 1998, Section 508 http://www.w3.org/WAI/Policy/#US
11. Coolfields Consulting www.coolfields.co.uk @coolfields Keyboard Interaction
12. 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?
13. Keyboard interaction Hover states Keyboard focus
14. 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} jQuery $(selector).hover(inFunction,outFunction); $(selector).focusin(inFunction); $(selector).focusout(outFunction);
15. Keyboard interaction
16. Keyboard interaction You need to answer Yes to these: 3) Can I easily access all functionality with the keyboard only? 4) Does the keyboard tab order make sense?
17. Keyboard interaction Img of Lightbox When lightbox opens, focus remains on page below
18. Keyboard interaction
19. Coolfields Consulting www.coolfields.co.uk @coolfields Links
20. Links Can you answer Yes to this one? 5) Are the links obviously links?
21. Links Can you answer Yes to this one? 6) Do all links provide enough information to state where they lead to? Elements list in NVDA
22. Coolfields Consulting www.coolfields.co.uk @coolfields Media
23. Media Can you answer Yes to these? 7) Do all images have appropriate alternate text? (appropriate may mean empty ie alt="") 8) Do all videos have captions?
24. Coolfields Consulting www.coolfields.co.uk @coolfields Signposting Content
25. Signposting content Can you answer Yes to all these? 9) Are the page titles unique and meaningful? 10) Do pages have appropriate headings and subheadings? 11) Are ARIA landmark roles present?
26. Using headings Headings  list  from   NVDA  screen  reader Note:  NVDA  exposes   heading  hierarchy Headings  are  used  as   a  navigation  feature
27. ARIA landmark roles Banner Navigation Footer Content Sidebar
28. ARIA landmark roles <header role="banner"> <nav role="navigation"> <footer role="contentinfo"> <main role="main"> <aside role= "complementary">
29. Coolfields Consulting www.coolfields.co.uk @coolfields Text
30. Text Can you answer Yes to this one? 12) Can I resize text in a page without breaking the layout?
31. Normal size NB: Resizing and zooming are not the same thing Text Larger size
32. Text Can you answer No to this one? 13) Is any of the text fully justified?
33. "Rivers of white space" Text Left aligned text Fully justified text could cause distraction.
34. Coolfields Consulting www.coolfields.co.uk @coolfields User Input
35. Coolfields Consulting www.coolfields.co.uk @coolfields No Upset Users
36. Coolfields Consulting www.coolfields.co.uk @coolfields No Mixed Emotions
37. Coolfields Consulting www.coolfields.co.uk @coolfields Reach for the stars
38. User input Can you answer Yes to this one? 14) Do all form fields have an accompanying label?
39. User input
40. Coolfields Consulting www.coolfields.co.uk @coolfields Color & Shape
41. Color & shape Can you answer Yes to this one? 15) Is the color contrast sufficient?
42. Color contrast Colour Contrast Analyzer Tool
43. Color contrast Michael
44. Color & Shape Can you answer No to this one? 16) Is meaning conveyed by color or shape only?
45. Assessing accessibility in color and shape … Project Name Status Fully Resourced? Easy peasy project ! Quite a tricky project ! So glad I'm not on that project " Going OK !
46. Coolfields Consulting www.coolfields.co.uk @coolfields Collaboration Connect with your community.
47. Coolfields Consulting www.coolfields.co.uk @coolfields Forget No One
48. Coolfields Consulting www.coolfields.co.uk @coolfields Example
49. Coolfields Consulting www.coolfields.co.uk @coolfields Woot!
50. Coolfields Consulting www.coolfields.co.uk @coolfields Demo
51. Useful resources Color Contrast Analyzer • http://paciellogroup.com/resources/contrastAnalyser Wave Toolbar/Website • Standalone - http://wave.webaim.org • Chrome or Firefox add-on Browser Tools • Chrome - Inspect element: accessibility properties • Firefox – Firebug inspect element
52. Chrome: accessibility properties
53. More useful resources Getting alternate text right • http://owl.li/pGtKC Coding forms for accessibility • http://owl.li/pDLMQ Creating text for screen readers only • http://owl.li/qzOGj
54. Thanks for listening! Any questions? michaelbeil@me.com @michaelbeil Props to @coolfields for letting me build on his slides. Find him at http://coolfields.co.uk. Photos from http://pexels.com and GIFs from http://giphy.com.
55. eo From  http://a11ymemes.tumblr.com
56. Video From  http://a11ymemes.tumblr.com
57. Video From  http://a11ymemes.tumblr.com
58. From  http://a11ymemes.tumblr.com
59. From  http://a11ymemes.tumblr.com
60. From  http://a11ymemes.tumblr.com
61. From  http://a11ymemes.tumblr.com
62. From  http://a11ymemes.tumblr.com
63. From  http://a11ymemes.tumblr.com
64. Some things that weren't covered: • Links that open new windows/panels • Form submission errors • Movement/flashing on pages • Audio on pages • Updating content after page loaded • Timeouts • Data tables • Keyboard traps • CAPTCHAs • Skip links • Alternate navigation • Indicating language • Triggering actions • Automated page refreshing • PDFs