Scaling Accessibility in the Age of Components
summary
Optimizely UI (OUI) components get concrete fixes: button icons gain a box-shadow focus ring and darker hover token; icon color props stop accepting arbitrary hex and use a color-token whitelist (nine approved tokens validated for contrast against white). Input component now requires an ID and label, removing the standalone label export so labels and inputs are always associated. Custom select dropdowns implement aria-haspopup/aria-expanded, role=menu/menuitem, tabindex=-1 and explicit keyboard handlers for Enter/Space, arrows and Escape.
AI-written summary · about
chapters (13)
- 0:00Start
- 0:29Hi, I'm Ayesha
- 1:04UX Engineering Optimizely
- 3:00Today's Agenda
- 3:31What is Accessibility?
- 4:10Who benefits?
- 4:58Ally is for Everyone
- 5:54Component Libraries
- 7:25Button Icons
- 15:30Inputs
- 20:10Dropdowns
- 23:15Take Away #1
- 27:28Resources
related talks
25mAccessibility in the Age of Components
27mMaking Interactions Accessible to All Users
24mEscape the Office: Designing Interfaces for Other Developers
35mAccelerating accessibility in web
40mAccessibility-flavored React components make your design system delicious
50mAccessibility-flavored React components...
40mBuilding Accessible Reusable Components
54mInclusively Responsive UIs with CSS and SVG