Inclusive Pattern Libraries
Heydon Pickering (@heydonworks)
Large Heydon Collider
Large Hadron Collider
Design
Systems
Design + System
Researching
Deliberating
Problem Solving
Functional pattern of interrelated processes
Design + System
Functional pattern of interrelated processes
Interface
Researching
Deliberating
Problem Solving
Design systems are not
- Just calalogs of designed stuff
- Just about the way stuff looks
- Style guides
- Pattern libraries
- Checklists
- Tests
- Style guides
- Pattern libraries
- Checklists
- Tests
Reusable patterns =
consistency
Inclusive Design Principle: Be Consistent
💩
💩
💩
💩
💩
Consistently good
Upcoming article: data tables
Follow @inclusicomps
- WCAG references
- Inclusive design principles
- Videos
- Live demos
Educational Documentation
✔ Folks understand why, not just how
✔ This can be applied as new components are built
1. A system for producing inclusive design
2. A design system that is inclusive
Cupper
Inclusive
inclusive design
documentation
- Landmarks
- Heading structure
- Lists
- Source order
- Contrast...?
Advanced
inclusive
features
tabindex="0"
role="group"
aria-label="code example"
Applied only where necessary
aria-current="page"
- Light sensitivity disorders
- Migraines
- Better for reading in the dark
Offline first
Cupper saves you money!
Editorial
features
Markdown + shortcodes!
<aside>
aria-label="warning"
<aside>
aria-label="warning"
aria-hidden="true"
focusable="false"
Collapsible sections
Collapsible sections
✔ aria-expanded
File trees
File trees
References
WCAG
WCAG
WCAG
WCAG
Inclusive Design Principles
Code
demos
Including inline demos is tricky.
Isolates
for testing
Testing
scripts
To come...
💩
✖️
✖️
✖️
Color
contrast
To come...
