Using Design Tokens to up your Accessibility Game

Using Design Tokens To Up Your Accessibility Game Enabling designers to proactively embed accessibility considerations in their design systems November 13, 2024

Today’s agenda 1. Learn what types of design token decisions affect the accessibility of UI (User Interface) elements. 2. Learn how to use design tokens to improve the accessibility of UI elements. 3. Understand the importance of using design tokens to ensure a consistent experience across a wide set of UI elements. Copyright © Level Access. All Rights Reserved. | Confidential 3

Design systems are like Lego kits • Contain reusable components and instructions • Components meet clear standards • Components can be assembled in a variety of ways • Instructions are for both creation and use

Subatomic breakdown of a button Atoms Properties and design tokens Molecule Font Type: body-copy-semi-bold Font Size: body-copy-semi-bold Text Color: interactive Padding: spacing-10 Border Color: interactive Border Size: border-2 Border Corners: border-radius-2 Button Fill: color-background-light Copyright © Level Access. All Rights Reserved. | Confidential 9

Design tokens fill some of the accessibility gaps in design systems Molecule Properties and design tokens Molecular states Border Color: color-text-dark Border Size: border-1 Border Color: color-focus Border Size: border-3 Border Color: color-error Border Size: border-3 Copyright © Level Access. All Rights Reserved. | Confidential 10

Remaining gaps are filled with other aspects of design, content, and documentation Molecule Other element Molecular states Error message Copyright © Level Access. All Rights Reserved. | Confidential 11

Components map to atoms and molecules Focus on foundational aspects: • States • Variations • Zoom • Keyboard interactions • Screen reader experiences • Touch experiences • Voice control experiences • Etc. Copyright © Level Access. All Rights Reserved. | Confidential 13

Patterns map to organisms Focus on higher order thinking: • Reading order / focus order • Feedback • Focus management • Skip links • Interdependencies between multiple components • Etc. Copyright © Level Access. All Rights Reserved. | Confidential 14

Templates map to templates Focus on additional navigational paradigms: • Skip links • Landmarks • Additional navigational and orientation support • Consistent help • Etc. Copyright © Level Access. All Rights Reserved. | Confidential 15

Fully designed pages map to pages Focus on the content: • Page titles • Page / site / section language • Plain language • Content uniqueness and differentiation • Alternative text • Media (audio, video, images, etc.) • Etc. Copyright © Level Access. All Rights Reserved. | Confidential 16

Example primary button (default state) Design tokens Font Type: body-copy-semi-bold Font Size: body-copy-semi-bold Text Color: color-text-light Padding: spacing-10 Border Color: interactive Border Size: border-2 Border Corners: border-radius-2 Button Fill: color-background-interactive Copyright © Level Access. All Rights Reserved. | Confidential 19

Example primary button (default state) tokens, requirements, and best practices Design tokens Font Type: body-copy-semi-bold Font Size: body-copy-semi-bold Accessible design requirements • Text to fill contrast 4.5:1 or better • Target size 24px X 24px or larger • Has a label Text Color: color-text-light Padding: spacing-10 Border Color: interactive Border Size: border-2 Accessible design best practices • Readability of selected font (minimalist and clear character differentiation) Border Corners: border-radius-2 • Minimum font size 12pt (16px) Button Fill: color-background-interactive • Fill to background contrast 3:1 or better Copyright © Level Access. All Rights Reserved. | Confidential 20

Button hover and focus state accessible design requirements and best practices Accessible design requirements Accessible design best practices • • Text to fill contrast 4.5:1 or better • Target size 24px X 24px or larger • Has a label • Minimum font size 12pt (16px) • Additional to default state: • Fill to background contrast 3:1 or better • Additional to default state: o o Cannot rely on color alone to indicate Readability of selected font (minimalist and clear character differentiation) meaning (must use redundant coding) o All states should be visually differentiated Every actionable element must have a o Hover and focus states should be highly designed focus state which includes a focus salient indicator Copyright © Level Access. All Rights Reserved. | Confidential 27

SIDEBAR Focus indicator design Accessible design requirements • Every actionable element must have a visible focus indicator Accessible design best practices • The focus indicator should be highly salient • Focus indicator should have sufficient contrast and size o Contrast of 3:1 or better between focused and unfocused pixels o Area equivalent to 2px thick perimeter or larger Copyright © Level Access. All Rights Reserved. | Confidential 28

Button hover and focus state design examples Hover • Dark blue (token) • Double underline (token) • Dark blue (token) • Double underline (token) • Focus indicator (tokens) Default Focus Copyright © Level Access. All Rights Reserved. | Confidential 30

SIDEBAR Default - #074EB0 Using only color to indicate focus #074EB0 and #333333 Contrast - 1.63:1 #074EB0 and #000000 Contrast - 2.72:1 #074EB0 and #6A95D0 Contrast – 2.5:1 #074EB0 and #A30083 Contrast - 1.05:1 #074EB0 and #FFFFFF Contrast – 7.7:1 Copyright © Level Access. All Rights Reserved. | Confidential 33

TIP Pressure test your foundational and complex components on a 320px screen width • 400% zoom minimum design size: o 1280px / 4 = 320px for vertically scrolling content o Or 1024px / 4 = 256px for horizontally scrolling content • Additional benefits: o Ensures a design for 1 column of content o Enforces designing responsively / for mobile Copyright © Level Access. All Rights Reserved. | Confidential 47

Example style decisions extended to radio buttons and checkboxes Default Hover Focus Inactive Unselected radio button Selected radio button Unselected checkbox Selected checkbox Partially selected checkbox Copyright © Level Access. All Rights Reserved. | Confidential 50

Example style decisions extended to exposed dropdown panels States on an unselected item Default Hover Focus States on a selected item Default Hover Focus Copyright © Level Access. All Rights Reserved. | Confidential 53

Consistency is key to usability Usability quality attributes Consistent experiences are • Learnability • Easy to learn • Memorability • Easy to remember • Efficiency • Efficient • Error tolerance • Error tolerant • Satisfaction • Pleasant to use Concept reference: Usability 101 - Introduction to Usability Copyright © Level Access. All Rights Reserved. | Confidential 56

Key takeaways • Set up your tokens to maximize component design accessibility • Component design: o Design as many variations as required by your design system o Augment that set with additional variations as required by accessibility requirements o Use redundant coding / at least 2 ways to communicate o Aim for consistency across element families Copyright © Level Access. All Rights Reserved. | Confidential 60

Any questions?

Thank you

Using Design Tokens to up your Accessibility Game

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63