Accessibility-flavored React components make your design system delicious!

A presentation at axe-con 2021 by Kathleen McMahon

Accessibility-flavored React components make your design system delicious!

Accessibility-flavored React components make your design system delicious!

Good grief, there’s an agenda...

Good grief, there’s an agenda...

Who are you, again?

Who are you, again?

[image] Me on a cyclocross bike, hopping over barriers and riding through mud.

[image] Me on a cyclocross bike, hopping over barriers and riding through mud.

[image] Me on a cyclocross bike, in Spam, Ninja Turtle, Nerds candy box, Medusa costumes

[image] Me on a cyclocross bike, in Spam, Ninja Turtle, Nerds candy box, Medusa costumes

[image] Big Bird kicks open the apartment door

[image] Big Bird kicks open the apartment door

[image] Pictures of me on a cyclocross bike, in costume

[image] Pictures of me on a cyclocross bike, in costume

[image] A group of dinousaurs grazing, lift their heads up in unison

[image] A group of dinousaurs grazing, lift their heads up in unison

 [image] Amiga computer from the 1990s

[image] Amiga computer from the 1990s

[image] Photoshop 3 user interface featuring an image of a tiny baby monkey!

[image] Photoshop 3 user interface featuring an image of a tiny baby monkey!

[image] Macromind Director user interface

[image] Macromind Director user interface

 [image] box of older storage tech, including 3.5" floppy disks, Zip disks, Bernoulli disks, SyQuest disks

[image] box of older storage tech, including 3.5" floppy disks, Zip disks, Bernoulli disks, SyQuest disks

[image] Arrangement of all my software reference books from the 1990s through early 2000s

[image] Arrangement of all my software reference books from the 1990s through early 2000s

[image] Netscape logo

[image] Netscape logo

HTML + CSS + JS

HTML + CSS + JS

JavaScript Framework of the week

JavaScript Framework of the week

 [image] Stanley Spadowski shouts "OPEN WIDE!" and douses boy with a fire hose

[image] Stanley Spadowski shouts "OPEN WIDE!" and douses boy with a fire hose

[image] Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee

[image] Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee

[image] woman attempting to arrange 10 squirming kittens in a straight line, with varied success

[image] woman attempting to arrange 10 squirming kittens in a straight line, with varied success

[image] Betty Crocker cookbook from the mid 20th century, "Why nearly 9 million women cherish this cookbook" prominently featured as a callout

[image] Betty Crocker cookbook from the mid 20th century, "Why nearly 9 million women cherish this cookbook" prominently featured as a callout

[image] Betty Crocker cookbook from the mid 20th century displaying various dishes

[image] Betty Crocker cookbook from the mid 20th century displaying various dishes

 [image] Shrimp and lime jello mold, plated with apple slices

[image] Shrimp and lime jello mold, plated with apple slices

[image] Meats and poultry cookbook reference page

[image] Meats and poultry cookbook reference page

[image] Soups and sauces reference page

[image] Soups and sauces reference page

[image] Vegetables reference page

[image] Vegetables reference page

[image] Desserts reference page

[image] Desserts reference page

[image] Table settings and enertaining reference page

[image] Table settings and enertaining reference page

Design Systems and React

Design Systems and React

React is a kitchen utensil

React is a kitchen utensil

What does an icon mean, anyway?

What does an icon mean, anyway?

Pair icons with text …when possible

Pair icons with text …when possible

[image] Natalie Portman, weeping in the corner

[image] Natalie Portman, weeping in the corner

Icon fonts to the rescue

Icon fonts to the rescue

Icon font pattern

Icon font pattern

Accessible icon pattern

Accessible icon pattern

Icon font

Icon font

Hide icon font from screen readers

Hide icon font from screen readers

Descriptive icon name

Descriptive icon name

Visually-hidden text

Visually-hidden text

Margin/padding support

Margin/padding support

Spans all the way down

Spans all the way down

Informative or decorative?

Informative or decorative?

Informative icons should announce

Informative icons should announce

Hide decorative icons from screen readers

Hide decorative icons from screen readers

Guardrails

Guardrails

…but SVGs!

…but SVGs!

Buttons

Buttons

Buttons

Buttons

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Inputs

Inputs

Placeholders are NOT labels

Placeholders are NOT labels

Avoid Horizontal Scrolling

Avoid Horizontal Scrolling

Disclosure Widgets

Disclosure Widgets

Disclosure Widgets

Disclosure Widgets

Menus & Toggle Tips

Menus & Toggle Tips

Tooltips are NOT Toggle Tips

Tooltips are NOT Toggle Tips

Tooltips can be problematic

Tooltips can be problematic

Primary keyboard interactions

Primary keyboard interactions

Targeted focus management

Targeted focus management

Disclosure WIdgets Demo

Disclosure WIdgets Demo

Document, document, document

Document, document, document

Design Systems are a popular way to bake your product. An often-missing ingredient, however, is accessible UI components. In this talk, you’ll learn the recipe for a delectably inclusive design system by mixing accessibility flavor into some commonly-used React components including icons, buttons, inputs, and disclosure patterns. You’ll also learn how to spice up your design system’s documentation with approachable, accessibility best-practices guidance including interactive examples, and component dos and don’ts. Even if you’ve never seen React before, join me to learn how to make your design system delicious.

Code

The following code examples from the presentation can be tried out live.

Buzz and feedback

Here’s what was said about this presentation on Twitter.