Accessibility-flavored React components make your design system delicious!
Good grief, there’s an agenda...
Who are you, again?
[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] Big Bird kicks open the apartment door
[image] Pictures of me on a cyclocross bike, in costume
[image] A group of dinousaurs grazing, lift their heads up in unison
[image] Amiga computer from the 1990s
[image] Photoshop 3 user interface featuring an image of a tiny baby monkey!
[image] Macromind Director user interface
[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] Netscape logo
HTML + CSS + JS
JavaScript Framework of the week
[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] 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 displaying various dishes
[image] Shrimp and lime jello mold, plated with apple slices
[image] Meats and poultry cookbook reference page
[image] Soups and sauces reference page
[image] Vegetables reference page
[image] Desserts reference page
[image] Table settings and enertaining reference page
Design Systems and React
React is a kitchen utensil
What does an icon mean, anyway?
Pair icons with text …when possible
[image] Natalie Portman, weeping in the corner
Icon fonts to the rescue
Icon font pattern
Accessible icon pattern
Icon font
Hide icon font from screen readers
Descriptive icon name
Visually-hidden text
Margin/padding support
Spans all the way down
Informative or decorative?
Informative icons should announce
Hide decorative icons from screen readers
Guardrails
…but SVGs!
Buttons
Buttons
Button
Button
Button
Button
Button
Inputs
Placeholders are NOT labels
Avoid Horizontal Scrolling
Disclosure Widgets
Disclosure Widgets
Menus & Toggle Tips
Tooltips are NOT Toggle Tips
Tooltips can be problematic
Primary keyboard interactions
Targeted focus management
Disclosure WIdgets Demo
Document, document, document