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.
Northwestern Mutual
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?
Our users have different needs at different times
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
What can we do about this?
image: thumbnails of "accessibility-flavored react components make your design system delicious" talk
Disclosure widget
One pattern, a few uses
Anatomy of a disclosure widget
A button that opens & closes a container, then returns focus to the button
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
Toggle tips
Toggle tips are NOT Tooltips
Toggletips
Toggle tips
Toggle tips
Icons — Informative or decorative
image: code snippet of our button
Toggle tip
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
How about Buttons Whoa
Yes… Roving Focus Whoa
image: code snipped of roving focus
Yo TagPalooza I’m clever
Check out my Fancy List Separation of concerns, baby.
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/