Design-systems are a Carnival! One accessible component Many pretty masks | Kathleen McMahon @resource11
https://noti.st/resource11
@resource11 Twitter | Instagram | GitHub
Who are you, again?
Kathleen McMahon | Engineer • Designer • Speaker
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-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: 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: 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' paws walk through my crystal arrangement on the kitchen table
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: 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: 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.
image: Woman attempting to arrange 10 squirming kittens in a straight line, with varied success
Design-systems are a Carnival!
image: Mannequin wearing Bauta mask adorned with navy Tabarro
image: Mannequin wearing plague doctor mask in muted purple costume
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: 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: 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 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: red-haired woman wearing a small oval mask, made of Velvet, which is held with the mouth thanks to a button.
image: 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: Venetians row during the Carnival masquerade parade on the Venetian Grand Canal.
Is it consistent for everyone?
Vision Sensory Hearing Language Motor Cognitive Low bandwidth
Why accessible components?
February 2023 — WebAIM Million — An accessibility analysis of the top 1,000,000 home pages
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 2021 — 68.1% 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 — 68% More detected errors than those without ARIA present
What can we do about this?
Disclosure widget
One pattern, a few uses
image: thumbnails of "accessibility-flavored react components make your design system delicious" talk
Anatomy of a disclosure widget
image: WAI site card view of various design patterns, highlighting the disclosure pattern
Primary keyboard interactions | Space bar/Enter key Escape key Mouse clicks
<button />
<button> | Supports Mouse clicks Enter keypress Spacebar keypress
ARIA support
State & click handlers
Focus management
CSS focus states
Mouse click management
image: Arrangement of handcrafted Venetian masks displayed in a shop window
Toggletips
Toggletips are NOT Tooltips
Toggletips
Toggletips
Toggletips
Icons — Informative or decorative
image: code snippet of our button
Toggletip
ToggleSearch
Targeted focus management
Embedded search widget
This is where it gets tricky
Hamburger navigation [image: navigation with apple, orange, grape link that visually present as buttons
Hamburger navigation
Hey Links Whoa
image: code snipped of unordered list of links
How about Buttons Whoa
image: code snipped of unordered list of buttons
Yes… Roving Focus Whoa
image: code snipped of roving focus
Yo TagPalooza I’m clever
image: code snippet of Tag component
image: code snippet of Tag component
Check out my Fancy List Separation of concerns, baby.
image: code snippet of List component
Some Ternary magic? …Hey now.
image: Jim Halpert slowly reclines in the car passenger seat, hiding in embarrassment
What pattern is this?
image: Menu and Menubar pattern highlighted on WAI page
image: WAI-ARIA Roles, States, and Properties – WAI page
image: Menu and Menubar Pattern – WAI page
image: Mythical University mega menu example – WAI page
image: Menu button pattern highlighted – WAI page
image: Menu Button Pattern – WAI page
image: Disclosure (Show/Hide) Pattern – WAI page
image: brown squirrel sitting on a picnic table, shouting with outstretched paws
image: Shrimp and lime jello mold, plated with apple slices
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: Carousel illuminated at night, Lorenzo Dominici — Unsplash
image: Open UI homepage
A solution is coming
image: 60-foot inflatable viking monster float lurks over a crowd
image: 60-foot inflatable viking monster float holding a beheaded Caesar
Wrap-up
Design-systems are a Carnival!
Our users are diverse
image: Red squirrel with one paw outstretched in a "please stop!" gesture
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 holding a beheaded Caesar
image: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee.
Thank you.
https://noti.st/resource11/