Accessibility-flavored React components make your design system delicious!

A presentation at Accessibility Chicago by Kathleen McMahon

Accessibility-flavored React components make your design system delicious!

Accessibility-flavored React components make your design system delicious!

[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

[image] Photoshop 3 user interface

[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

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

[image] Natalie Portman, weeping in the corner

[image] Natalie Portman, weeping in the corner

[image] Moody view of empty bowling lanes

[image] Moody view of empty bowling lanes

[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

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.

Video

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 social media.