Using Design Tokens to up your Accessibility Game

Using Design Tokens to up your Accessibility Game

by Karen Hawkins on March 28, 2024

Meet Karen Hawkins

Today’s Goals

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

SECTION 1 Little Ditty about Design and Designs Systems

A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. Nielsen Norman Group 5

Atomic Design Atomic design is a methodology for creating design systems. It is a framework to break interfaces down into fundamental reusable building blocks and build them back up in potentially infinite variations. Atoms Concept reference: Brad Frost Molecules Organisms Templates Pages 6

Atomic Breakdown of a Button Atoms Molecule 7

Atomic Breakdown of a Button: Further Analysis Atoms Properties Molecule Font Type Font Size Text Color Padding Border Color Border Size Border Corners Button Fill 8

Subatomic Design Design tokens are small, repeatable design decisions, that store a design system’s visual attributes. They ensure the same style values are used across design files and code. Subatomic Particles Atoms Molecules Organisms Templates Pages 9

Subatomic Breakdown of a Button Atoms Properties / 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 10

Design Tokens Fill Some of the Gap Design Tokens Molecular States Border Color: color-text-dark Molecule Border Size: border-1 Border Color: color-focus Border Size: border-3 Border Color: color-error Border Size: border-3 11

Style Guides Map to Atoms and Subatomic Particles Focus on design tokens 12

Components Map to Molecules Focus on foundational aspects: • States • Variations • Keyboard interactions • Screen reader experiences • Etc. 13

Patterns Map to Organisms Focus on higher order thinking: • Reading order • Landmarks • Skip links • Interdependencies between multiple components • Etc. 14

SECTION 2 Design Tokens in Style Guides 15

Colours 16

Grid 17

Typography 18

Spacing 19

Border Thickness 20

Border Radius 21

Shadow 22

Grid Accessibility 1.4.10: Reflow • 400% zoom: 1280 / 4 = 320 • Mobile designs are on a 320px viewport for vertically scrolling content • Or 1024 / 4 = 256 for horizontally scrolling content • Benefits: • Ensures a design for 1 column of content • Enforces designing responsively / for mobile (1.3.4 Orientation) 23

Typography Accessibility Best Practices • Font type: Selected for perceived readability • Min font size: 12pt / 16px / 1 REM • Body copy font weight: Regular / 400 • Body copy line height: 1.5X font size • Heading font weight: Semi-bold / 600 1.4.4 Resize Text • 200% font size: 24pt / 32px / 2 REM • 200% line height: 3X font size 24

Spacing Accessibility 2.5.8 Target Size (Minimum) • Minimum target size for icons: 24px X 24px Best Practices • Aiming for 44px X 44px (2.5.5 Target Size) • Considerations for contextual spacing requirements for improved operability and readability 25

Colour Accessibility (1 / 2) Best Practices • Documented colour pairs that meet minimum standards with guidelines for usage • No placeholder text (1.4.3 Minimum Contrast, 3.3.2. Labels or Instructions) • No images of text (1.4.3 Minimum Contrast) 26

Sidebar: Dual Modality Design Colour Position Read means stop. Top means stop. Yellow means slow down. Middle means slow down. Green means go. Bottom means go. 27

Colour Accessibility (2 / 2) 1.4.1 Use of Colour Contrast • • Not using colour alone to indicate meaning, information, etc. • Particular attention to state design and chart design • Inline links underlined by default • Using at least 1 dimension to convey meaning, with or without the addition of colour Aiming for greater than 7:1 contrast for text (1.4.6 Contrast Enhanced) • Aiming for greater than 4.5:1 contrast for graphical objects and user interface components (1.4.11 Non-Text Contrast) • Aiming for greater than 3:1 contrast for inactive elements (1.4.3 Minimum Contrast) 1.3.3 Sensory Characteristics • Not using colour alone to indicate meaning, information, etc. in instructions 28

Focus Indicator Accessibility Best Practices • Focus indicator is always situated outside an element • Focus indicator is made of 3 rings which meets contrast requirements between the rings (white, medium pink, white) • Each ring is 2px thick (2.4.13 Focus Appearance) • Contrast is guaranteed with any adjacent colour in our design system 29

SECTION 3 Design Tokens in Component Libraries 30

Components Map to Molecules Design tokens help with: • State design • Variation design 31

Primary Button Design Token Example 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 32

Primary Button Design Token Example 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 33

State Change Design Examples Hover • Background colour change (token) • Underlined Focus • Background colour change (token) • Underlined • Focus indicator Inactive • Background colour change (token) Default 34

Hover State Options: Colour-Only Default Options 35

Hover State Options: Underline, Bold Text, Larger Text, Smaller Text Default Options 36

Hover State Options: Button Size Default Options 37

Hover State Options: Invert Colours Default Options 38

Hover State Options: Thick Lines Default Options 39

Hover State Options: Border Thickness Default Options 40

Hover State Options: Border Radius Default Options 41

Hover State Options: Shadows Default Options 42

Hover State Options: Animation Default Options 43

Versions Consider the Variations Types Mobile 200% and Long Text 44

Default Hover Focus Apply Design Decisions to Links 45

Default Hover Focus Inactive Error Apply Design Decisions to Other Elements 46

Patterns Map to Organisms Design tokens help with: • ? 47

Questions? Comments? 48

Slides, Contact Details, and a Guide Connect with me Get today’s slides Get heuristics guide Email and LinkedIn Deck on notist Downloadable document Karen Hawkins, CPACC https://noti.st/khawk27 Accessible design heuristics 49

Thank you Karen Hawkins karen.hawkins@levelaccess.com levelaccess.com