Design System Carnival! One accessible component, many pretty masks.

A presentation at React Summit US in in Jersey City, NJ, USA by Kathleen McMahon

 Design-systems are a Carnival! One accessible component Many pretty masks | Kathleen McMahon @resource11

Design-systems are a Carnival! One accessible component Many pretty masks | Kathleen McMahon @resource11

 https://noti.st/resource11

https://noti.st/resource11

@resource11 Twitter | Instagram | GitHub

@resource11 Twitter | Instagram | GitHub

Who are you, again?

Who are you, again?

Kathleen McMahon | Engineer • Designer • Speaker

Kathleen McMahon | Engineer • Designer • Speaker

 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: a wide-screen view of the colorful lamps and lighting strips adorning my home office desk and bookcases

image: a wide-screen view of the colorful lamps and lighting strips adorning my home office desk and bookcases

image: A wide-planked boardwalk — with soft sand and sea grass surrounding its weathered wooden railing — leads toward the calm ocean during a cloudy afternoon low tide

image: A wide-planked boardwalk — with soft sand and sea grass surrounding its weathered wooden railing — leads toward the calm ocean during a cloudy afternoon low tide

 image: A montage of sand dollars of various sizes and colors, next to a tiny and medium sand dollar in the palm of my hand.

image: A montage of sand dollars of various sizes and colors, next to a tiny and medium sand dollar in the palm of my hand.

image: Thor, resting on the windowsill of my kitchen window, enjoying the warm summer breeze and sunshine on his soft beige fur and dreamy blue eyes.

image: Thor, resting on the windowsill of my kitchen window, enjoying the warm summer breeze and sunshine on his soft beige fur and dreamy blue eyes.

image: Otis — my silky black haus panther — nestled between my purple bed pillows, gazing at me with calm golden eyes.

image: Otis — my silky black haus panther — nestled between my purple bed pillows, gazing at me with calm golden eyes.

 image: A gathering of green aventurine, sodalite, rose quarts towers, and quarts diamond on the kitchen table

image: A gathering of green aventurine, sodalite, rose quarts towers, and quarts diamond on the kitchen table

 image: Otis, the black wonder cat, steps into the frame of my crystal collection

image: Otis, the black wonder cat, steps into the frame of my crystal collection

image: Otis' paws walk through my crystal arrangement on the kitchen table

image: Otis' paws walk through my crystal arrangement on the kitchen table

 image: grouping of citrine, amethyst, and celestite glowing in the sun-washed windowsill

image: grouping of citrine, amethyst, and celestite glowing in the sun-washed windowsill

 image: Otis — sassy black cat — sits exactly on top of all my windowsill crystals, seeking attention.

image: Otis — sassy black cat — sits exactly on top of all my windowsill crystals, seeking attention.

image: In pure art director fashion, Thor sits distinctly on one windowsill sand dollar. Ready to provide his ultimate design judgement..

image: In pure art director fashion, Thor sits distinctly on one windowsill sand dollar. Ready to provide his ultimate design judgement..

 image: Thor looks up from the windowsill to the camera with a very satisfied look. His blue eyes gaze hypnotically my way as his pink nose points upward, whiskers pridefully twitching.

image: Thor looks up from the windowsill to the camera with a very satisfied look. His blue eyes gaze hypnotically my way as his pink nose points upward, whiskers pridefully twitching.

image: Otis looking very cute as he lays upside down on my bed, gazing at me.

image: Otis looking very cute as he lays upside down on my bed, gazing at me.

 Design Systems are ALWAYS the hotness image: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee.

Design Systems are ALWAYS the hotness 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

Design-systems are a Carnival!

Design-systems are a Carnival!

image: Mannequin wearing Bauta mask adorned with navy Tabarro

image: Mannequin wearing Bauta mask adorned with navy Tabarro

 image: Mannequin wearing plague doctor mask in muted purple costume

image: Mannequin wearing plague doctor mask in muted purple costume

image: A crowd of Jester masks hanging in a Venetian vendor's market

image: A crowd of Jester masks hanging in a Venetian vendor's market

image: Rows of brightly-colored porcelain masks handing on a Venetian market wall

image: Rows of brightly-colored porcelain masks handing on a Venetian market wall

image: A group of very elaborate and detailed bespoke masquerade art pieces in a Venetian gallery

image: A group of very elaborate and detailed bespoke masquerade art pieces in a Venetian gallery

image: Four tiny jester mask magnets hanging in a Venetian shop doorway

image: Four tiny jester mask magnets hanging in a Venetian shop doorway

 image: a white red and orange painted paper mache mask with ribbon ties on a paint-spattered newspapered table

image: a white red and orange painted paper mache mask with ribbon ties on a paint-spattered newspapered table

image: a person wearing a Jester mask smiling

image: a person wearing a Jester mask smiling

image: A gathering of people in 18th century costume dancing at the Giacoma Casanova Carnival

image: A gathering of people in 18th century costume dancing at the Giacoma Casanova Carnival

 image: man walking through a corridor wearing a Baùta and Tabarro

image: man walking through a corridor wearing a Baùta and Tabarro

 image: red-haired woman wearing a small oval mask, made of Velvet, which is held with the mouth thanks to a button.

image: red-haired woman wearing a small oval mask, made of Velvet, which is held with the mouth thanks to a button.

mage: man and woman in 18th-century costume wearing cat masks

mage: man and woman in 18th-century costume wearing cat masks

image: A man in a Harlequin mask surrounded by two surprised woman and an amused man in 19th-century clothing

image: A man in a Harlequin mask surrounded by two surprised woman and an amused man in 19th-century clothing

image: Venetians row during the Carnival masquerade parade on the Venetian Grand Canal.

image: Venetians row during the Carnival masquerade parade on the Venetian Grand Canal.

Is it consistent for everyone?

Is it consistent for everyone?

Vision Sensory Hearing Language Motor Cognitive Low bandwidth

Vision Sensory Hearing Language Motor Cognitive Low bandwidth

 Why accessible components?

Why accessible components?

February 2023 — WebAIM Million — An accessibility analysis of the top 1,000,000 home pages

February 2023 — WebAIM Million — An accessibility analysis of the top 1,000,000 home pages

February 2023 — 29% Increase in added ARIA attributes

February 2023 — 29% Increase in added ARIA attributes

February 2019 — 60.1% of the 1 million pages had ARIA present

February 2019 — 60.1% of the 1 million pages had ARIA present

February 2020 — 64.6% of the 1 million pages had ARIA present

February 2020 — 64.6% of the 1 million pages had ARIA present

February 2021 — 68.1% of the 1 million pages had ARIA present

February 2021 — 68.1% of the 1 million pages had ARIA present

February 2022 — 74.6% of the 1 million pages had ARIA present

February 2022 — 74.6% of the 1 million pages had ARIA present

February 2023 — 80% of the 1 million pages had ARIA present

February 2023 — 80% of the 1 million pages had ARIA present

February 2023 — 68% More detected errors than those without ARIA present

February 2023 — 68% More detected errors than those without ARIA present

What can we do about this?

What can we do about this?

Disclosure widget

Disclosure widget

One pattern, a few uses

One pattern, a few uses

 image: thumbnails of "accessibility-flavored react components make your design system delicious" talk

image: thumbnails of "accessibility-flavored react components make your design system delicious" talk

Anatomy of a disclosure widget

Anatomy of a disclosure widget

image: WAI site card view of various design patterns, highlighting the disclosure pattern

image: WAI site card view of various design patterns, highlighting the disclosure pattern

 Primary keyboard interactions | Space bar/Enter key Escape key Mouse clicks

Primary keyboard interactions | Space bar/Enter key Escape key Mouse clicks

<button />

<button />

&lt;button&gt; | Supports Mouse clicks Enter keypress Spacebar keypress

<button> | Supports Mouse clicks Enter keypress Spacebar keypress

 ARIA support

ARIA support

 State &amp; click handlers

State & click handlers

Focus management

Focus management

CSS focus states

CSS focus states

Mouse click management

Mouse click management

image: Arrangement of handcrafted Venetian masks displayed in a shop window

image: Arrangement of handcrafted Venetian masks displayed in a shop window

Toggletips

Toggletips

 Toggletips are NOT Tooltips

Toggletips are NOT Tooltips

 Toggletips

Toggletips

Toggletips

Toggletips

Toggletips

Toggletips

Icons — Informative or decorative

Icons — Informative or decorative

image: code snippet of our button

image: code snippet of our button

 Toggletip

Toggletip

ToggleSearch

ToggleSearch

Targeted focus management

Targeted focus management

 Embedded search widget

Embedded search widget

 This is where it gets tricky

This is where it gets tricky

 Hamburger navigation [image: navigation with apple, orange, grape link that visually present as buttons

Hamburger navigation [image: navigation with apple, orange, grape link that visually present as buttons

Hamburger navigation

Hamburger navigation

Hey Links Whoa

Hey Links Whoa

image: code snipped of unordered list of links

image: code snipped of unordered list of links

How about Buttons Whoa

How about Buttons Whoa

image: code snipped of unordered list of buttons

image: code snipped of unordered list of buttons

 Yes… Roving Focus Whoa

Yes… Roving Focus Whoa

image: code snipped of roving focus

image: code snipped of roving focus

Yo TagPalooza I’m clever

Yo TagPalooza I’m clever

image: code snippet of Tag component

image: code snippet of Tag component

image: code snippet of Tag component

image: code snippet of Tag component

Check out my Fancy List Separation of concerns, baby.

Check out my Fancy List Separation of concerns, baby.

 image: code snippet of List component

image: code snippet of List component

Some Ternary magic? …Hey now.

Some Ternary magic? …Hey now.

 image: Jim Halpert slowly reclines in the car passenger seat, hiding in embarrassment

image: Jim Halpert slowly reclines in the car passenger seat, hiding in embarrassment

 What pattern is this?

What pattern is this?

image: Menu and Menubar pattern highlighted on WAI page

image: Menu and Menubar pattern highlighted on WAI page

image: WAI-ARIA Roles, States, and Properties – WAI page

image: WAI-ARIA Roles, States, and Properties – WAI page

image: Menu and Menubar Pattern – WAI page

image: Menu and Menubar Pattern – WAI page

image: Mythical University mega menu example – WAI page

image: Mythical University mega menu example – WAI page

image: Menu button pattern highlighted – WAI page

image: Menu button pattern highlighted – WAI page

image: Menu Button Pattern – WAI page

image: Menu Button Pattern – WAI page

image: Disclosure (Show/Hide) Pattern – WAI page

image: Disclosure (Show/Hide) Pattern – WAI page

image: brown squirrel sitting on a picnic table, shouting with outstretched paws

image: brown squirrel sitting on a picnic table, shouting with outstretched paws

image: Shrimp and lime jello mold, plated with apple slices

image: Shrimp and lime jello mold, plated with apple slices

Don’t mix the masks. [image]: Red squirrel with one paw outstretched in a &quot;please stop!&quot; gesture

Don’t mix the masks. [image]: Red squirrel with one paw outstretched in a "please stop!" gesture

image: vibrant Carnival, with sweeping bright lights of chaos and a clown, Paolo Nicolello — Unsplash

image: vibrant Carnival, with sweeping bright lights of chaos and a clown, Paolo Nicolello — Unsplash

 image: Carousel illuminated at night, Lorenzo Dominici — Unsplash

image: Carousel illuminated at night, Lorenzo Dominici — Unsplash

image: Open UI homepage

image: Open UI homepage

 A solution is coming

A solution is coming

image: 60-foot inflatable viking monster float lurks over a crowd

image: 60-foot inflatable viking monster float lurks over a crowd

 image: 60-foot inflatable viking monster float holding a beheaded Caesar

image: 60-foot inflatable viking monster float holding a beheaded Caesar

Wrap-up

Wrap-up

Design systems are a Carnival!

Design systems are a Carnival!

 Our users are diverse

Our users are diverse

 image: Red squirrel with one paw outstretched in a &quot;please stop!&quot; gesture

image: Red squirrel with one paw outstretched in a "please stop!" gesture

image: Shrimp and lime jello mold, plated with apple slices

image: Shrimp and lime jello mold, plated with apple slices

 image: 60-foot inflatable viking monster float lurks over a crowd

image: 60-foot inflatable viking monster float lurks over a crowd

 image: 60-foot inflatable viking monster float holding a beheaded Caesar

image: 60-foot inflatable viking monster float holding a beheaded Caesar

 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.

Thank you.

Thank you.

https://noti.st/resource11/

https://noti.st/resource11/

Design System components are like guests at a Venetian Carnival, enjoying the festivities. One guest in particular — the disclosure widget — is known for wearing three distinct masks and elevates a Carnival into the most exclusive Masquerade Ball. Or… is it? What kind of Carnival are you attending if those masks get mixed? In this talk, you’ll learn the secret to creating a reusable — and accessible — component that can masquerade as many, and give your component library access to the most exclusive of Carnival attractions.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

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.