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/)
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
17. Cooking Class Agenda
● Foundational ingredients
common accessible code techniques
● Sugar, spice, and everything nice
making your distinct design accessible
● Sharing your recipes
documenting accessibility
29. 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>
30. Decorative: At your discretion, often empty
alt=“Illustration of
Cordelia grinning,
wearing a chef’s hat,
and stirring batter”
alt=“”
32. A R I A
Accessible Rich Internet Applications
Communicate element’s
role, state, and properties
to assistive technology.
33.
34. 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.
35. 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/
46. Two color rules:
Do maintain reasonable contrast between
text and background colors.
Don’t use color alone to convey meaning.
47. 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
65. 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
66.
67. 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.