Accessibility: Proven, easy integration into design and development workflows


Published on

Integrating Accessibility (a11y) into the project process can be downright scary. In this session, I’ll cover basic web accessibility principles for web designers, developers, and site owners, then show how to turn seemingly daunting and confusing accessibility requirements into understandable, actionable tasks and techniques. The talk will cover some of the accessibility-specific WordPress plugins and themes available, as well as some quick, easy tests to integrate into design and development workflows.

Published in: Internet
  • Be the first to comment

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

No notes for slide

Accessibility: Proven, easy integration into design and development workflows

  1. 1. Accessibility Proven, easy integration into design and development workflows @iamjolly
  2. 2. What is accessibility? Accessibility (a11y), simply put, means that we’re making our sites work well for everyone.
  3. 3. 1,000,000,000 people with disabilities
 on our planet today Source: WHO/World Bank World Report on Disability, 2011 There are more than
  4. 4. people in the United States have a disability 1 in 5 Source: United States Census Bureau
  5. 5. $175 billion annually in the United States. People with disabilities spend Source: U.S. Departments of Justice and Labor
  7. 7. The disability community is the only group that anyone can join at any time.
  8. 8. Where to start?
  10. 10. Everyone on the project has a role in making a website accessible.
  11. 11. Accessibility in planning
  12. 12. Planning and project admin Procurement/contracting (client teams): ● Require a11y with current guidelines (WCAG 2.0) ● Consider usability testing with people with disabilities Project management (implementation team): ● Map a11y guidelines to roles/tasks ● Communicate requirements & expectations ● Establish test plan for a11y ● A11y represented at every stand-up
  13. 13. “ When the requirements state... Site must be built in accordance with the W3C’s Web Content Accessibility Guidelines 2.0
  14. 14. OMG, it’s 34 pages long!
  15. 15. WCAG is more than just a single line item! The Web Content Accessibility Guidelines (WCAG) 2.0 are: ● 4 Principles, consisting of: ● 12 guidelines, and ● 61 success criteria aligned with Levels A, AA, and AAA ★ Level A: 25 ★ Level AA: 13 ★ Level AAA: 23 Go ahead, take a look: W3C Web Content Accessibility Guidelines
  16. 16. Quick tips for project managers ● Don’t memorize WCAG—it’s imperfect, at best. ● Do understand a11y project duties ● Do communicate frequently ● Add a11y to all project phases ● Incorporate testing with each sprint/iteration ● Be an advocate for end users/a11y Hungry for more? W3C Accessibility Responsibility Breakdown
  17. 17. Accessibility in content
  18. 18. Accessibility for content ● Images need appropriate alternate text (alt text) ● Caption your videos ● Provide transcripts for audio (and video) ● Be careful about reading level ● Avoid rapid flashing (no more than 3x per second)
  19. 19. Alt text for images - some guidelines ● Every image needs an alt attribute! ● Decorative images have an empty alt: alt=“” ● Keep alt text descriptive, but brief ● Ensure functional images have appropriate alt text, for example: alt=“Waffle House home”
  20. 20. Check your content’s reading level ● Text for general audiences: aim for
 a grade level of around 8. Online Tool:
  21. 21. Accessibility in design
  22. 22. Accessibility for designers (UX and UI) ● Design consistent interfaces ● Check color contrast ● Beware of line length issues ● Keep related items close (proximity) ● Design focus states for links, buttons, etc. ● Design for error states
  23. 23. Starting design with an accessible color palette Online tool:
  24. 24. Checking for color contrast during design Web Utility: Lea Verou’s Contrast Ratio
  25. 25. Checking for color contrast during design Application: Colour Contrast Analyser
  26. 26. Design in browser? We got that! Tool: Chrome Accessibility Developer Tools What’s the contrast ratio for “Webcam” in light blue?
  27. 27. The Pinhole/Squint Test Virgin America - Where We Fly
  28. 28. Accessibility in development
  29. 29. Accessibility for developers ● Develop with web standards in mind ★ Set page language ★ Use semantics (headings, buttons, labels) ★ Foreground images, please (with alt text) ★ Hide informative text for screen readers with a CSS class like:
 .screen-reader-text ● Mobile-first, responsive design is your friend
  30. 30. Accessibility for developers ● Use your keyboard for quick tests - regularly!
  31. 31. Accessibility for developers ● Help users with great form error handling Forms Example: Simply Accessible
  32. 32. Accessibility for developers ● Unit test all the things Test Suite: QuailJS
  33. 33. Accessibility for developers ● Unit test all the things Test Suite: QuailJSA11y testing plugin: Access Monitor
  34. 34. Keyboard, keyboard, KEYBOARD!
 After that, screen readers.
  35. 35. A11y plugins and themes
  36. 36. Accessibility Ready Themes:
  37. 37. Plugin: WP Accessibility
  38. 38. Plugin: Genesis Accessible
  39. 39. Plugin: WCAG 2.0 form fields for Gravity Forms
  40. 40. Plugin: Contact Form 7: Accessible Defaults
  41. 41. But… we really should NOT fix themes and plugins this way!
  42. 42. Questions? Thank you! Please reach out via Twitter or @iamjolly