Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Baking Accessibility In

ABSTRACT: A quick web search can bring up thousands of code samples for any type of component one could imagine building, but 90% of that code isn’t accessible, unintentionally leaving huge audiences of users behind. You have the power to change this! As the people creating style guides and component systems, you’re uniquely positioned to get accessibility right the first time and spread best practices to everyone who uses your code. In this talk, you’ll learn the key ingredients for baking accessibility into your design system, including mindful color palettes, semantic HTML, and a dash of ARIA. Let’s make the web better for everyone, one style guide at a time!

(Originally presented at Clarity Conf in 2016: https://www.clarityconf.com/baking-accessibility-in/)

  • Login to see the comments

Baking Accessibility In

  1. 1. Baking accessibility in
  2. 2. Cordelia McGee-Tubb Accessibility Specialist at Dropbox Soon-to-be Master of Comics @cordeliadillon
  3. 3. What’s accessibility? ● Making products, services, and spaces that everyone can use and enjoy, regardless of their abilities ● Creating flexible systems that consider the experiences of people with disabilities from the very start, not just through tacked-on accommodations
  4. 4. Why am I talking to you about this?
  5. 5. You are creating the cookbooks that everyone else reads.
  6. 6. People want to use your recipes.
  7. 7. Give them the best recipes you can.
  8. 8. (Accessibility) Universal Design
  9. 9. Cooking Class Agenda ● Foundational ingredients common accessible code techniques ● Sugar, spice, and everything nice making your distinct design accessible ● Sharing your recipes documenting accessibility
  10. 10. Foundational ingredients
  11. 11. Use semantic HTML.
  12. 12. Buttons: Use actual <button> elements Primary <button class=“button--primary”> Primary </button> Secondary
  13. 13. Buttons: Use actual <button> elements Primary <a class=“button--primary”> Primary </a> Secondary
  14. 14. Buttons: Use actual <button> elements Primary <div class=“button--primary” onClick=“...”> Primary </div> Secondary
  15. 15. Buttons: Use actual <button> elements Primary <button class=“button--primary”> Primary </button> Secondary
  16. 16. Form fields: Use visible, explicit labels Favorite animal <input type=“text” placeholder=“Favorite animal”/>
  17. 17. Form fields: Use visible, explicit labels Leaping lemurs Favorite animal <label>Favorite animal</label> <input type=“text” placeholder=“Leaping lemurs”/>
  18. 18. Form fields: Use visible, explicit labels Leaping lemurs Favorite animal <label for=“animal”>Favorite animal</label> <input id=“animal” type=“text” placeholder=“Leaping lemurs”/>
  19. 19. Give images some alternative text.
  20. 20. Informational: Short, descriptive alt text <img alt=“Home” src=“house-icon.png”/> <img alt=“Greenhouse” src=“house-icon.png”/>
  21. 21. Redundant: Empty alt text <img alt=“” src=“home-icon.png”/> <span class=“uppercase”>Home</span> HOME <svg aria-hidden=“true”>...</svg> <span class=“uppercase”>Home</span>
  22. 22. Decorative: At your discretion, often empty alt=“Illustration of Cordelia grinning, wearing a chef’s hat, and stirring batter” alt=“”
  23. 23. Include a dash of ARIA when necessary.
  24. 24. A R I A Accessible Rich Internet Applications Communicate element’s role, state, and properties to assistive technology.
  25. 25. Some components that should use ARIA ● Modals ● Menus ● Accordions ● Tabs ● Alerts ● Trees … and various other elements whose functionality or purpose aren’t clear through semantic HTML alone.
  26. 26. Add accessible recipes to your cookbook. WCAG 2.0 Guidelines https://www.w3.org/TR/WCAG20/ Heydon’s Practical ARIA Examples http://heydonworks.com/practical_aria_examples/ Web Accessibility Slack community http://web-a11y.herokuapp.com/
  27. 27. Sugar, spice, and everything nice
  28. 28. Make keyboard interactions as rich as mouse interactions.
  29. 29. Don’t forget about focus styles.
  30. 30. Focus styles
  31. 31. Focus styles
  32. 32. Focus styles Love
  33. 33. Focus styles Love Love Love Love
  34. 34. Color
  35. 35. Two color rules: Do maintain reasonable contrast between text and background colors. Don’t use color alone to convey meaning.
  36. 36. Rule #1: Reasonable contrast for text WCAG 2.0 Guidelines 4.5:1 for regular text 3:1 for large text http://leaverou.github.io/contrast-ratio/ http://wave.webaim.org
  37. 37. dropbox.github.io/scooter/functions.html
  38. 38. dropbox.github.io/scooter/functions.html
  39. 39. Use vibrant colors! Use light colors!
  40. 40. Rule #2: Use more than just color for meaning
  41. 41. Rule #2: Use more than just color for meaning
  42. 42. Rule #2: Use more than just color for meaning
  43. 43. Rule #2: Use more than just color for meaning
  44. 44. Sharing your recipes
  45. 45. Include accessibility notes in your documentation.
  46. 46. Component documentation ● Discourages accidental removal of accessible aspects ● Encourages constant attention to accessibility ● Spreads best practices General documentation ● Might get overlooked (so shouldn’t exist by itself) ● Encourages holistic thinking about inclusive design ● Spreads best practices
  47. 47. Cooking Class Recap ● Bake accessibility in from the beginning! ● Use these key ingredients: ○ semantic HTML ○ alternative text ○ ARIA (as necessary) ○ keyboard interactivity ● Use color! Make sure text is high contrast and and there are additional visual elements for meaning. ● Share your accessible recipes generously.
  48. 48. Thanks! @cordeliadillon

×