Accessible Design Considerations for Design Systems

Accessible Design Considerations for Design Systems CSUN 2026 March 11, 2025

Karen Hawkins, CPACC Principal of Accessible Design Level Access ▪ Human Factors Engineer ▪ User Experience Designer and Director ▪ Accessible Design Subject Matter Expert Copyright © Level Access. All Rights Reserved. 2

Background Copyright © Level Access. All Rights Reserved. 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 Copyright © Level Access. All Rights Reserved. 4

Pattern Components Design systems map well to our mental model of componentization Copyright © Level Access. All Rights Reserved. 5

Design system levels have different accessibility requirements Copyright © Level Access. All Rights Reserved. Styles Set up your tokens to account for Components Maximize permutations and interactivity Patterns Apply higher order thinking like reading Page templates Consider additional navigational Pages Focus on readable and understandable potential accessibility application order, focus management, and feedback paradigms like skip links and landmarks content 6

Resources used to make this presentation CVS Health Annotation Kit Pexels Moss www.figma.com/community www.pexels.com www.mossgardenhome.com Copyright © Level Access. All Rights Reserved. 7

Accessibility in style guides Copyright © Level Access. All Rights Reserved. 8

Style accessibility Set up your tokens to account for potential accessibility application Copyright © Level Access. All Rights Reserved. 9

Typography Copyright © Level Access. All Rights Reserved. 10

Color Copyright © Level Access. All Rights Reserved. 11

Border thickness Copyright © Level Access. All Rights Reserved. 12

Border radius Copyright © Level Access. All Rights Reserved. 13

Grid Copyright © Level Access. All Rights Reserved. 14

Accessibility in component libraries Copyright © Level Access. All Rights Reserved. 15

Component accessibility Focus on foundational aspects: ▪ States ▪ Variations ▪ Zoom / magnification ▪ Keyboard interactions ▪ Screen reader interactions ▪ Touch interactions ▪ Voice control interactions ▪ Etc. Copyright © Level Access. All Rights Reserved. 16

Accessible design considerations for components Copyright © Level Access. All Rights Reserved. 17

Design for great contrast 4.5:1 contrast required for text color to button color (AAA - 7:1 contrast) 3:1 contrast best practice for button (or border color) to background color Copyright © Level Access. All Rights Reserved. 18

Design for minimum target areas Target area must be 24px X 24px (AAA - 44px X 44px) Copyright © Level Access. All Rights Reserved. 19

Design as many permutations as required Variations Copyright © Level Access. All Rights Reserved. Transformations 20

Font Type: body-copy-semi-bold Font Size: body-copy-semi-bold Sidebar Example tokens for primary default button 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. 21

Default state Sidebar Alter tokens to design different states Copyright © Level Access. All Rights Reserved. Underline Invert colors Bold Shapes 22

Example primary button state designs Default Copyright © Level Access. All Rights Reserved. Hover Focus 23

Example style decisions applied to multiple button types Default Hover Focus Primary button Secondary button Tertiary button Copyright © Level Access. All Rights Reserved. 24

Goal is consistency between element families Default Hover Focus Primary button Secondary button Tertiary button Standalone link Inline link Copyright © Level Access. All Rights Reserved. 25

Extend the styling to other element families Default Hover Focus Unselected radio button Selected radio button Unselected checkbox Selected checkbox Partially selected checkbox Copyright © Level Access. All Rights Reserved. 26

Design for component-specific accessibility requirements Copyright © Level Access. All Rights Reserved. 27

Accessible documentation considerations for components Copyright © Level Access. All Rights Reserved. 28

Typical design specification documentation Styles Layout ▪ Border radius ▪ Width ▪ Border thickness ▪ Height ▪ Colors and contrast ▪ Padding ▪ Shadow ▪ Target size ▪ Text styles ▪ Alignment ▪ Etc. ▪ Breakpoint ▪ Etc. Copyright © Level Access. All Rights Reserved. 29

Document foundational information Minimum documentation ▪ Role ▪ Accessible / programmatic name Copyright © Level Access. All Rights Reserved. 30

Document interactions Minimum interactions ▪ Pointer ▪ Keyboard ▪ Screen reader Copyright © Level Access. All Rights Reserved. 31

Document behaviors Behavior considerations ▪ What happens when a component receives input? ▪ What happens when component receives focus? ▪ What happens when a component’s value changes? Copyright © Level Access. All Rights Reserved. 32

Document reading order and focus order Best practice Document at the lowest level in your design system whenever possible Copyright © Level Access. All Rights Reserved. 33

Document exceptions Potential exceptions ▪ Color of logos ▪ Keyboard operability ▪ Focus state design ▪ Time limits ▪ Animations ▪ Interruptions ▪ Essential operability (like path-based) Copyright © Level Access. All Rights Reserved. 34

Accessibility in pattern libraries Copyright © Level Access. All Rights Reserved. 35

Pattern accessibility 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. 36

Accessible design considerations for patterns Copyright © Level Access. All Rights Reserved. 37

Design a meaningful reading order Ensure the story makes sense Copyright © Level Access. All Rights Reserved. 38

Provide navigational strategies Provide as many navigational strategies as you can (like headings and skip links) Copyright © Level Access. All Rights Reserved. 39

Optimize feedback and focus management (1 / 2) Ensure appropriate feedback is provided, and pay attention to focus management Copyright © Level Access. All Rights Reserved. 40

Optimize feedback and focus management (2 / 2) Feedback ▪ “x filters applied” incremented by 1 ▪ Filter chip added to set ▪ Control changed its state from unselected to selected Focus management ▪ Focus should stay on the control Copyright © Level Access. All Rights Reserved. 41

Mobile Desktop Design for small screens Copyright © Level Access. All Rights Reserved. 42

Accessible documentation considerations for patterns Copyright © Level Access. All Rights Reserved. 43

Document reading order and / or focus order Copyright © Level Access. All Rights Reserved. 44

Document images and alt text Image is decorative Copyright © Level Access. All Rights Reserved. Image has meaning / content Image is part of a link 45

Document unique / differentiated content Copyright © Level Access. All Rights Reserved. 46

Document pattern-specific requirements Copyright © Level Access. All Rights Reserved. 47

Accessibility in page templates Copyright © Level Access. All Rights Reserved. 48

Page template accessibility Focus on additional navigational paradigms: ▪ Skip links ▪ Landmarks ▪ Additional navigational and orientation support ▪ Etc. Copyright © Level Access. All Rights Reserved. 49

Accessible design considerations for page templates Copyright © Level Access. All Rights Reserved. 50

Provide as many navigational strategies as you can Headings Copyright © Level Access. All Rights Reserved. Skip links Landmarks 51

Provide at least 2 navigational strategies for between-page navigation Navigation options ▪ List of related pages ▪ Site map ▪ Site search ▪ Table of contents ▪ List of all available web pages Copyright © Level Access. All Rights Reserved. 52

Provide cues to help users orient themselves within a set of pages Orientation options ▪ Breadcrumbs ▪ Site map ▪ Current location indicators ▪ The page’s relationship to a larger set of pages Copyright © Level Access. All Rights Reserved. 53

Consistently design and locate navigational elements Think through where navigational elements are located, in all viewport designs Copyright © Level Access. All Rights Reserved. 54

Accessible documentation considerations for page templates Copyright © Level Access. All Rights Reserved. 55

Document headings, skip links, landmarks, and more Headings Copyright © Level Access. All Rights Reserved. Skip links Landmarks 56

Accessibility in pages Copyright © Level Access. All Rights Reserved. 57

Page accessibility 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. 58

Summary Copyright © Level Access. All Rights Reserved. 59

In summary… Copyright © Level Access. All Rights Reserved. Styles Set up your tokens to account for Components Maximize permutations and interactivity Patterns Apply higher order thinking like reading Page templates Consider additional navigational Pages Focus on readable and understandable potential accessibility application order, focus management, and feedback paradigms like skip links and landmarks content 60

Connect with Karen Hawkins Karen Hawkins, CPACC Connect with me Principal of Accessible Design at Level Access Email and LinkedIn Copyright © Level Access. All Rights Reserved. 61