A presentation at Inclusive Design 24 by Kathleen McMahon
Accessibility-flavored React components make your design system delicious!
— Kathleen McMahon Frontend Engineer O’Reilly Media
Topics covered
• Why accessible components?
• Design systems are a cookbook
• Design systems and React Icons Buttons Inputs Headings Documentation Wrap-up
Our abilities differ
• Vision • Sensory • Hearing • Language • Motor • Cognitive • Low bandwidth
Users access content in many ways
• Desktop • Mobile • Screen readers • Screen magnification software • Mouse & trackpad • Standard, braille, & morse code keyboards • Straw device • Switch control • Voice assistants
Web Content Accessibility Guidelines (WCAG)
The Four Principles of Accessibility
• Perceivable • Operable • Understandable • Robust
POUR yourself a coffee
• Perceivable • Operable • Understandable • Robust
Your Design system is a cookbook
Cookbooks have Personality
React is like a kitchen utensil
CC BY-SA 2.0: Jeppestown utensil
You are the cook
CC BY-SA 2.0: Jeppestown utensil
Components are your tried and true recipes
WCAG is Your reference material
Our cookbook is in beta
Component recipe
Start with high-quality ingredients (semantic HMTL)
Mix in key accessibility seasonings (ARIA … just a touch)
Follow the directions (documentation)
Provide helpful hints (best practices)
Icons
Icons Informative or decorative
• Informative icons need descriptive text • Decorative icons need to be hidden from screen readers with the ‘aria-hidden’ attribute
Accessible Icon component: SVGs vs. Icon Fonts
Icon
Icon
Icon
Prepping for React component scenarios
React class component
JSX syntax
Renders as HTML in the browser
JSX syntax
Icon
Icon
Icon
Icon
Icon
Helpful hints Informative Icon
Helpful hints Decorative icon
Helpful hints Custom-text informative Icon
Buttons
Buttons
• Buttons perform an action on the page • Buttons should look and act like a button • Use semantic HTML, get screen reader and keyboard functionality for free
Button
Helpful hints Featured button
Helpful hints Featured Icon button
Helpful hints Featured Button with Icon Announced
Helpful hints Featured button with custom Icon title
Inputs
Inputs - labels and error messages are key ingredients
• Labeled inputs give all users more context
Placeholders are NOT labels
• Avoid using placeholders instead of labels, users will lose context • Hard to style across browsers • Placeholders aren’t auto translated
Horizontal Scrolling
• Max input width: 80 characters • Keep labels stacked vertically • Labels above input, errors below input
Fieldsets and legends
• Grouping similar input items in fieldsets with a legend gives context to screen reader users
Helpful hints Default input
Helpful hints Input with decorative icon
Helpful hints Input with informative icon
Helpful hints Invalid input
Helpful hints Disabled input
Headings
Headings
• Good heading structure provides an outline of your page • Headings are intended to introduce each section of your page
Headings
• Use one H1 per page, use for most important info • Screen reader users can jump to page sections using heading structure
Headings
• Don’t skip or rearrange heading levels • Separate the heading semantics from CSS presentation
Heading semantics are the courses of your meal
Don’t do this
Don’t leave your screen reader users hungry
Do this
Heading component
Contextual Card
From this: <h2 class=”card-intro”>Summer Reading List</h2>
To this: <h3 class=”card-intro”>Summer Reading List</h2> Icon
From this: <h2 class=”card-intro”>Summer Reading List</h2>
To this: <Tag class={headingClass}>Summer Reading List</h2> Icon
Add guardrails
Add guardrails
Guardrailed heading level
Fragments are your friend
No children, no heading
Helpful hints Default Heading component
Helpful hints Semantic with presentation Heading component
Document, document, document
Dedicate a page to accessibility links
Wrap-up
Your Design system is a cookbook
Cookbooks have Personality
React is like a kitchen utensil
You are the cook
Components are your tried and true recipes
Helpful hints in every recipe
WCAG is Your reference material
Document, document, document
Thank you.
Design systems are a popular way for teams to flavor their design and development workflow. However, an often-missing ingredient in many design systems is a focus on accessibility best practices — especially when component libraries are involved. In this talk, we’ll take a look at how you can season some commonly-used components with accessibility. Pair this with accessibility guidance in your documentation, and you’ll have the recipe for a delectably inclusive design system.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
