Inclusively-Delicious Design Systems

A presentation at Boston CSS in February 2019 in Boston, MA, USA by Kathleen McMahon

Slide 1

Slide 1

Accessibility-flavored React components make your design system delicious!

— Kathleen McMahon Frontend Engineer O’Reilly Media

Slide 2

Slide 2

Topics covered

• Why use React • Why accessible components? • Design systems are a cookbook • Design systems and React • Icons • Buttons • Inputs • Documentation • Wrap-up

Slide 3

Slide 3

Why use React?

Slide 4

Slide 4

Slide 5

Slide 5

Go where the work is

Slide 6

Slide 6

Dev Dinosaur

Slide 7

Slide 7

Am I relevant?

Slide 8

Slide 8

Dinosaurs are ALWAYS the hotness

Slide 9

Slide 9

Why accessible components?

Slide 10

Slide 10

Our users are diverse

Slide 11

Slide 11

Users access content in many ways

Slide 12

Slide 12

Web Content Accessibility Guidelines (WCAG)

Slide 13

Slide 13

The Four Principles of Accessibility

• Perceivable • Operable • Understandable • Robust

Slide 14

Slide 14

POUR yourself a coffee

• Perceivable • Operable • Understandable • Robust

Slide 15

Slide 15

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Slide 16

Slide 16

Your Design system is a cookbook

Slide 17

Slide 17

Cookbooks have Personality

Slide 18

Slide 18

Design Systems and React

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

React is like a kitchen utensil

CC BY-SA 2.0: Jeppestown utensil

Slide 22

Slide 22

You are the cook

CC BY-SA 2.0: Jeppestown utensil

Slide 23

Slide 23

Components are your tried and true recipes

Slide 24

Slide 24

WCAG is Your reference material

Slide 25

Slide 25

Our cookbook is in beta

Slide 26

Slide 26

Component recipe

Slide 27

Slide 27

Start with high-quality ingredients (semantic HMTL)

Slide 28

Slide 28

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

Slide 29

Slide 29

Follow the directions (documentation)

Slide 30

Slide 30

Provide helpful hints (best practices)

Slide 31

Slide 31

Icons

Slide 32

Slide 32

Icons Informative or decorative

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

Slide 33

Slide 33

Accessible Icon component: SVGs vs. Icon Fonts

Slide 34

Slide 34

Icon

• Icon font HTML pattern

Slide 35

Slide 35

Icon

• Apply the icon font as a pseudo-element

Slide 36

Slide 36

Icon

• Add descriptive icon text

Slide 37

Slide 37

Icon

• Wrap spans and convert display property to inline-block

Slide 38

Slide 38

Icon

• Screen reader hears: “\f12f email”

Slide 39

Slide 39

Icon

• Hide icon font from screen reader

Slide 40

Slide 40

Icon

• Visually-hide descriptive text from screen reader

Slide 41

Slide 41

Icon

• To hide, or not to hide?

Slide 42

Slide 42

Icon

• Hide a decorative icon from screen reader…

Slide 43

Slide 43

Icon

• Announce an informational icon to screen reader

Slide 44

Slide 44

React class component

Slide 45

Slide 45

React render function

Slide 46

Slide 46

Dear React, make the UI look like this.

Slide 47

Slide 47

JSX syntax

Slide 48

Slide 48

What this looks like in JavaScript

Slide 49

Slide 49

Mom’s Spaghetti

Slide 50

Slide 50

JSX syntax

Slide 51

Slide 51

class ⇒ className

close empty span

Slide 52

Slide 52

Renders as HTML in the browser

Slide 53

Slide 53

JSX syntax

Slide 54

Slide 54

Incoming props

Slide 55

Slide 55

Add component guardrails

Slide 56

Slide 56

IconHidden guardrails

Slide 57

Slide 57

Icon guardrails

Slide 58

Slide 58

Icon description guardrails

Slide 59

Slide 59

Helpful hints Informative Icon

Slide 60

Slide 60

Helpful hints Decorative icon

Slide 61

Slide 61

Helpful hints Custom-text informative Icon

Slide 62

Slide 62

Buttons

Slide 63

Slide 63

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 64

Slide 64

Markup has meaning. There is no spec for “div: use it for whatever.”

— @scottohara at @boston_css

Slide 65

Slide 65

Button

<button class=”root”> Send an email </button>

Slide 66

Slide 66

Buttons

Slide 67

Slide 67

Slide 68

Slide 68

Button

Sprinkle some ARIA

Slide 69

Slide 69

Button

HTML syntax

Slide 70

Slide 70

JSX syntax

Slide 71

Slide 71

Add icon support

Slide 72

Slide 72

Wrap contents in span for flexbox

Slide 73

Slide 73

Allow for custom button text

Slide 74

Slide 74

Add click handler support

Add disabled button support

Slide 75

Slide 75

Add props support

Pop JSX into render ( )

Slide 76

Slide 76

No iconName? No icon rendered

Slide 77

Slide 77

Helpful hints Featured button

Slide 78

Slide 78

Helpful hints Featured Icon button

Slide 79

Slide 79

Helpful hints Featured button with custom Icon title

Slide 80

Slide 80

Inputs

Slide 81

Slide 81

Inputs - labels and error messages are key ingredients

• Labeled inputs give all users more context

Slide 82

Slide 82

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 83

Slide 83

Horizontal Scrolling

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

Slide 84

Slide 84

Fieldsets and legends

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

Slide 85

Slide 85

Slide 86

Slide 86

Slide 87

Slide 87

Slide 88

Slide 88

Slide 89

Slide 89

Slide 90

Slide 90

Slide 91

Slide 91

JSX syntax

Slide 92

Slide 92

JSX syntax

Slide 93

Slide 93

Add guardrails

Slide 94

Slide 94

Add guardrails

Slide 95

Slide 95

Helpful hints Default input

Slide 96

Slide 96

Helpful hints Input with icon

Slide 97

Slide 97

Helpful hints Invalid input

Slide 98

Slide 98

Helpful hints Disabled input

Slide 99

Slide 99

Document, document, document

Slide 100

Slide 100

Dedicate a page to accessibility links

Slide 101

Slide 101

Wrap-up

Slide 102

Slide 102

Your Design system is a cookbook

Slide 103

Slide 103

Cookbooks have Personality

Slide 104

Slide 104

React is like a kitchen utensil CC BY-SA 2.0: Jeppestown utensil

Slide 105

Slide 105

You are the cook CC BY-SA 2.0: Jeppestown utensil

Slide 106

Slide 106

Components are your tried and true recipes

Slide 107

Slide 107

Helpful hints in every recipe

Slide 108

Slide 108

WCAG is Your reference material

Slide 109

Slide 109

Document, document, document

Slide 110

Slide 110

Thank you.