A presentation at Boston CSS in in Boston, MA, USA by Kathleen McMahon
Accessibility-flavored React components make your design system delicious!
— Kathleen McMahon Frontend Engineer O’Reilly Media
Topics covered
• Why use React • Why accessible components? • Design systems are a cookbook • Design systems and React • Icons • Buttons • Inputs • Documentation • Wrap-up
Why use React?
Go where the work is
Dev Dinosaur
Am I relevant?
Dinosaurs are ALWAYS the hotness
Why accessible components?
Our users are diverse
Users access content in many ways
Web Content Accessibility Guidelines (WCAG)
The Four Principles of Accessibility
• Perceivable • Operable • Understandable • Robust
POUR yourself a coffee
• Perceivable • Operable • Understandable • Robust
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
Your Design system is a cookbook
Cookbooks have Personality
Design Systems and React
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 font HTML pattern
Icon
• Apply the icon font as a pseudo-element
Icon
• Add descriptive icon text
Icon
• Wrap spans and convert display property to inline-block
Icon
• Screen reader hears: “\f12f email”
Icon
• Hide icon font from screen reader
Icon
• Visually-hide descriptive text from screen reader
Icon
• To hide, or not to hide?
Icon
• Hide a decorative icon from screen reader…
Icon
• Announce an informational icon to screen reader
React class component
React render function
Dear React, make the UI look like this.
JSX syntax
What this looks like in JavaScript
Mom’s Spaghetti
JSX syntax
class ⇒ className
close empty span
Renders as HTML in the browser
JSX syntax
Incoming props
Add component guardrails
IconHidden guardrails
Icon guardrails
Icon description guardrails
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
Markup has meaning. There is no spec for “div: use it for whatever.”
— @scottohara at @boston_css
Button
<button class=”root”> Send an email </button>
Buttons
Button
Sprinkle some ARIA
Button
HTML syntax
JSX syntax
Add icon support
Wrap contents in span for flexbox
Allow for custom button text
Add click handler support
Add disabled button support
Add props support
Pop JSX into render ( )
No iconName? No icon rendered
Helpful hints Featured button
Helpful hints Featured Icon button
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
JSX syntax
JSX syntax
Add guardrails
Add guardrails
Helpful hints Default input
Helpful hints Input with icon
Helpful hints Invalid input
Helpful hints Disabled input
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 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
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 month’s Meetup, Kathleen McMahon will reveal the recipe for staying technically relevant — and sought after — in today’s workforce: JavaScript framework knowledge blended with solid HTML/CSS skills and accessibility best practices. Particularly for component libraries in a design system.
This talk will demonstrate how you can mix some commonly-used React components with the ingredients of accessibility. Pair this with best practices 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.
