Inclusive Pattern Libraries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Heydon Pickering (@heydonworks)
Large Heydon Collider
Large Hadron Collider
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4658539/ahmed.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4658539/ahmed.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Design
Systems
Design + System
Researching
Deliberating
Problem Solving
Functional pattern of interrelated processes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Design + System
Functional pattern of interrelated processes
Interface
Researching
Deliberating
Problem Solving
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Design systems are not
- Just calalogs of designed stuff
- Just about the way stuff looks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
- Style guides
- Pattern libraries
- Checklists
- Tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
- Style guides
- Pattern libraries
- Checklists
- Tests
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Reusable patterns =
consistency
Inclusive Design Principle: Be Consistent
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
💩
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
💩
💩
💩
💩
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Consistently good
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4727797/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Upcoming article: data tables
Follow @inclusicomps
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
- WCAG references
- Inclusive design principles
- Videos
- Live demos
Educational Documentation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
✔ Folks understand why, not just how
✔ This can be applied as new components are built
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713637/galaxy.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
1. A system for producing inclusive design
2. A design system that is inclusive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Cupper
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Inclusive
inclusive design
documentation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4295424/cupper_logo.png)
- Landmarks
- Heading structure
- Lists
- Source order
- Contrast...?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713676/cupper.png)
Advanced
inclusive
features
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713726/drakeposting_template_by_aaronicworksinc-dahdgl0.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713728/wrapped.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713729/unwrapped.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713732/focused.gif)
tabindex="0"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713732/focused.gif)
role="group"
aria-label="code example"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Applied only where necessary
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713802/aria-current.png)
aria-current="page"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713815/theme-button.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713812/dark.png)
- Light sensitivity disorders
- Migraines
- Better for reading in the dark
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714345/offline.jpg)
Offline first
Cupper saves you money!
Editorial
features
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713637/galaxy.jpg)
Markdown + shortcodes!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713857/warning_code.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713857/warning_code.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713859/warning_output.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713859/warning_output.png)
<aside>
aria-label="warning"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713859/warning_output.png)
<aside>
aria-label="warning"
aria-hidden="true"
focusable="false"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714397/collaps.gif)
Collapsible sections
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714397/collaps.gif)
Collapsible sections
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714401/expandy.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
✔ aria-expanded
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713773/file_tree.png)
File trees
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
File trees
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713777/schort.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
References
WCAG
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714474/wcag_shortcode.png)
WCAG
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714476/wcag_list.png)
WCAG
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714523/descriptions_true.png)
WCAG
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714522/wcag_descs.png)
Inclusive Design Principles
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714779/idp_screenie.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714791/princip_short.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4714795/princ_long.png)
Code
demos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Including inline demos is tricky.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4727734/difficult.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4727761/tog.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4727769/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4727761/tog.gif)
Isolates
for testing
Testing
scripts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
To come...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
💩
✖️
✖️
✖️
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4713612/testing.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Color
contrast
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
To come...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/95757/images/4688319/pasted-from-clipboard.png)
Try it out!
Inclusive Pattern Libraries
By heydon
Inclusive Pattern Libraries
- 2,400