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

Prepping for React component scenarios

React class component

JSX syntax

Renders as HTML in the browser

JSX syntax

Icon

Helpful hints Informative Icon

Helpful hints Decorative icon

Helpful hints Custom-text informative Icon

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

• 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

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.