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...

Try it out!

Inclusive Pattern Libraries

By heydon

Inclusive Pattern Libraries

  • 586
Loading comments...

More from heydon