Accessible Design Considerations for Styles, Components, Patterns, and Pages

A presentation at World Usability Congress 2024 in October 2024 in Graz, Austria by Karen Hawkins

Slide 1

Accessible Design Considerations for Styles, Components, Patterns, and Pages Enabling designers to proactively embed accessibility considerations in their design systems October 17, 2024

Slide 2

Slide 3

Slide 4

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

Slide 5

Slide 6

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

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 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. | Confidential 15

Slide 16

Slide 17

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

Slide 18

Slide 19

Slide 20

SIDEBAR Example tokens for a primary button (default state) 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 20

Slide 21

SIDEBAR You alter tokens to design different states Color Alone Underline or Bold Underline or Bold, and Color Invert Colors Bold Shapes Shadow Copyright © Level Access. All Rights Reserved. | Confidential 21

Slide 22

Example button state designs Default Hover Focus Inactive • Medium blue fill • Dark blue fill • Dark blue fill • Light blue fill • White text • White underlined text • White underlined text • White text • Focus indicator Copyright © Level Access. All Rights Reserved. | Confidential 22

Slide 23

Slide 24

Slide 25

Extend the styling to other elements Default Hover Focus Inactive Unselected radio button Selected radio button Unselected checkbox Selected checkbox Partially selected checkbox Copyright © Level Access. All Rights Reserved. | Confidential 25

Slide 26

Slide 27

Slide 28

Typical design specification documentation requirements Styles Layout • Border radius • Width • Border thickness • Height • Colors and contrast • Padding • Shadow • Target size • Text styles • Alignment o Font • Breakpoint o Font size • Etc. o Font weight o Letter spacing o Line height o Text alignment • Etc. Copyright © Level Access. All Rights Reserved. | Confidential 28

Slide 29

Slide 30

Slide 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. | Confidential 31

Slide 32

Slide 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. | Confidential 33

Slide 34

Slide 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. | Confidential 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

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

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

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

Slide 49

Slide 50

Slide 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. | Confidential 51

Slide 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. | Confidential 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 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. | Confidential 57

Slide 58

Slide 59

Design system level In summary… Styles Notable accessibility considerations Set up your tokens to account for potential accessibility application Components Patterns Page templates Pages Maximize permutations and interactivity Higher order thinking like reading order, focus management, and feedback Additional navigational paradigms like skip links and landmarks Focus on readable and understandable content Copyright © Level Access. All Rights Reserved. | Confidential 59

Slide 60

Any questions?

Slide 61

Thank you