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, hopping over barriers and riding through mud.
image: Me on a cyclocross bike, in Spam, Ninja Turtle, Nerds candy box, Medusa costumes
image: Stanley Spadowski shouts "OPEN WIDE!" and douses boy with a fire hose
image: Group of penguins gathered on an iceberg with a few swimming and jumping in the ocean. One penguin attempts to jump atop an iceberg to join their penguin friends — and fails — splashing back into the water in ungraceful fashion.
image: a wide-screen view of the colorful lamps and lighting strips adorning my home office desk and bookcases
image: Thor, my floofy beige-striped cat, rests in his bed in my colorfully-lit office
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 and Thor — in perfect light and dark fur contrast — nestle together atop a soft red flannel throw.
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: Lush green foliage surrounding fiberglass boardwalk leading to the ocean at dawn. The bright orange "Public access 1" sign accenting the way to ocean bliss.
image: Weathered wooden railings surround a raised boardwalk leading to an expanse of beach at low tide. Two individuals sit in beach chairs nearby glancing at the calm ocean water.
image: Weathered beige wooden railings and tall sea grass surround soft light beige sand leading to a calm surf at peak low tide. The late morning sun reflecting off of wispy cirrus clouds.
image: Dark gray weathered wooden railing and tall sage green sea grass surround a fiberglass boardwalk leading to a deep blue ocean at low tide in the late afternoon. Two fluffy white clouds sail across the clear blue sky.
image: Calm waves lapping against the sand
image: Dark beige wet sand, ready to reveal a baby sand dollar
image: A sand dollar peeking out of a cluster of rocks, barnacles, and periwinkle shells in a crowded ocean tidal pool.
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 tiny pearlescent shell sits on the side of a dark gray sand dollar in the palm of my hand. Beneath my hand is the cool waters of a very crowded tidal pool full of rocks, shells and ocean water.
image: A gathering of cream-colored sand dollars and a large periwinkle shell in a large open clam shell sitting atop a brown wooden bench at the beach
image: A gathering of a dark gray sand dollar, large and small periwinkle shells in a large open clam shell sitting atop a weathered gray wooden bench at the beach
image: A gathering of sand dollars of many colors and sizes in a large open clam shell sitting atop the sand next to some seaweed at the beach
image: A gathering of sand dollars of multiple shapes, sizes and colors on my dining room windowsill.
image: Otis — black cat of magic — lovingly gazing at me with golden eyes while lying upside down. Paws outstretched.
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 sunshine-washed windowsill
image: Otis — sassy black cat — sits exactly on top of all my windowsill crystals, seeking attention.
image: A gathering of sand dollars of multiple shapes, sizes and colors on my dining room windowsill.
image: Otis — always insistent black cat — standing on my dining table, inspecting my gathering of sand dollars on the dining room windowsill.
image: Thor — ever curious fluffy beige Manx cat of Wonder — standing on my dining table, inspecting my gathering of sand dollars on the dining room windowsill.
image: Thor bravely places his white-mittened beige paw on the windowsill gathering of sand dollars.
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.
image: Otis expectantly gazing at me from his cat tree perch.
image: Penguin — running forward on an icy tundra — skids to a stop.
image: Group of penguins on tundra running away
image: Penguin — running forward on an icy tundra — skids to a stop.
Thanks for your patience
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: Visual of the various intersecting parts of a design system.
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.
Why accessible components?
Our users are diverse
One pattern, many uses
Primitive masks
Anatomy of a disclosure widget
A button that opens and closes a sibling container and returns focus to the button
Primary keyboard interactions
<button />
<button>
ARIA support
State & click handlers
Focus management
CSS focus states
Mouse click management
Toggle tips
Toggle tips are NOT Tooltips
Toggletips
Toggle tips
Toggle tips
Many pretty masks
Icons Informative or decorative
What does an icon mean, anyway?
Pair icons with text …when possible
image: a heart and star icon, each labeled as "favorite"
Toggle tip
ToggleSearch
Targeted focus management
Embedded search widget
Menu lists
Demo
image: brown squirrel sitting on a picnic table, shouting with outstretched paws
image: Shrimp and lime jello mold, plated with apple slices
image: Red squirrel with one paw outstretched in a "please stop!" gesture
image: 60-foot inflatable viking monster float lurks over a crowd
image: 60-foot inflatable viking monster float lurks over a crowd
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 lurks over a crowd
image: Person in inflatable dinosaur costume flips into a raft floating on a pond and claps with glee.
Thank you.
https://noti.st/resource11/