Accessibility-flavored React components make your design system delicious!

Slide 1

— Kathleen McMahon Frontend Engineer O’Reilly Media

Slide 2

Topics covered

• Why accessible components?

• Design systems are a cookbook

• Design systems and React Icons Buttons Inputs Headings Documentation Wrap-up

Slide 3

Our abilities differ

• Vision • Sensory • Hearing • Language • Motor • Cognitive • Low bandwidth

Slide 4

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

Slide 5

Web Content Accessibility Guidelines (WCAG)

Slide 6

The Four Principles of Accessibility

• Perceivable • Operable • Understandable • Robust

Slide 7

POUR yourself a coffee

• Perceivable • Operable • Understandable • Robust

Slide 8

Your Design system is a cookbook

Slide 9

Cookbooks have Personality

Slide 10

Slide 11

Slide 12

React is like a kitchen utensil

CC BY-SA 2.0: Jeppestown utensil

Slide 13

You are the cook

CC BY-SA 2.0: Jeppestown utensil

Slide 14

Components are your tried and true recipes

Slide 15

WCAG is Your reference material

Slide 16

Our cookbook is in beta

Slide 17

Component recipe

Slide 18

Start with high-quality ingredients (semantic HMTL)

Slide 19

Mix in key accessibility seasonings (ARIA … just a touch)

Slide 20

Follow the directions (documentation)

Slide 21

Provide helpful hints (best practices)

Slide 22

Icons

Slide 23

Icons Informative or decorative

• Informative icons need descriptive text • Decorative icons need to be hidden from screen readers with the ‘aria-hidden’ attribute

Slide 24

Accessible Icon component: SVGs vs. Icon Fonts

Slide 25

Icon

Slide 26

Icon

Slide 27

Icon

Prepping for React component scenarios

Slide 28

React class component

JSX syntax

Slide 29

Renders as HTML in the browser

Slide 30

JSX syntax

Slide 31

Icon

Slide 32

Icon

Slide 33

Icon

Slide 34

Icon

Slide 35

Icon

Slide 36

Helpful hints Informative Icon

Slide 37

Helpful hints Decorative icon

Slide 38

Helpful hints Custom-text informative Icon

Slide 39

Buttons

Slide 40

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

Slide 41

Button

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Helpful hints Featured button

Slide 51

Helpful hints Featured Icon button

Slide 52

Helpful hints Featured Button with Icon Announced

Slide 53

Helpful hints Featured button with custom Icon title

Slide 54

Inputs

Slide 55

Inputs - labels and error messages are key ingredients

• Labeled inputs give all users more context

Slide 56

Placeholders are NOT labels

• Avoid using placeholders instead of labels, users will lose context • Hard to style across browsers • Placeholders aren’t auto translated

Slide 57

Horizontal Scrolling

• Max input width: 80 characters • Keep labels stacked vertically • Labels above input, errors below input

Slide 58

Fieldsets and legends

• Grouping similar input items in fieldsets with a legend gives context to screen reader users

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Helpful hints Default input

Slide 70

Helpful hints Input with decorative icon

Slide 71

Helpful hints Input with informative icon

Slide 72

Helpful hints Invalid input

Slide 73

Helpful hints Disabled input

Slide 74

Headings

Slide 75

Headings

• Good heading structure provides an outline of your page • Headings are intended to introduce each section of your page

Slide 76

Headings

• Use one H1 per page, use for most important info • Screen reader users can jump to page sections using heading structure

Slide 77

Headings

• Don’t skip or rearrange heading levels • Separate the heading semantics from CSS presentation

Slide 78

Heading semantics are the courses of your meal

Slide 79

Don’t do this

Slide 80

Don’t leave your screen reader users hungry

Slide 81

Do this

Slide 82

Heading component

Slide 83

Contextual Card

Slide 84

From this: <h2 class=”card-intro”>Summer Reading List</h2>

To this: <h3 class=”card-intro”>Summer Reading List</h2> Icon

Slide 85

From this: <h2 class=”card-intro”>Summer Reading List</h2>

To this: <Tag class={headingClass}>Summer Reading List</h2> Icon

Slide 86

Add guardrails

Slide 87

Add guardrails

Slide 88

Guardrailed heading level

Slide 89

Slide 90

Fragments are your friend

Slide 91

No children, no heading

Slide 92

Helpful hints Default Heading component

Slide 93

Helpful hints Semantic with presentation Heading component

Slide 94

Document, document, document

Slide 95

Dedicate a page to accessibility links

Slide 96

Wrap-up

Slide 97

Your Design system is a cookbook

Slide 98

Cookbooks have Personality

Slide 99

React is like a kitchen utensil

Slide 100

You are the cook

Slide 101

Components are your tried and true recipes

Slide 102

Helpful hints in every recipe

Slide 103

WCAG is Your reference material

Slide 104

Document, document, document

Slide 105

Thank you.