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.