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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Any questions?

Thank you