Focus People, Focus!

Focus people, focus! Karen Hawkins September 20, 2023

Meet Karen Hawkins Karen Hawkins, CPACC Connect with me Get today’s slides Principal of Accessible Design, Email Deck on notist Level Access LinkedIn https://noti.st/khawk27 2

Today’s learning objectives

1. Understand the importance of focus states, who they are designed for and why.
2. Learn the accessibility requirements of focus states for some common components, including buttons, links, and other actionable elements.
3. Connect the focus state designs to the Web Content Accessibility Guideline Success Criteria. 3

What is a focus state? 4

Hover state Focus state Clearly indicates upon Clearly indicates which page element which page element the mouse hovers has keyboard focus 5

Why focus on focus states? 6

Design teams traditionally only design pointer experiences 7

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 8

Atomic Design Example Atoms Molecules Organism 9

Holistically design all states of molecules and atoms Molecular Variations and States Molecule 10

Focus on Design Interactivity 11

Design 12

The focus indicator is obvious “you are here” feedback 13

Focus indicators should contrast well with adjacent colors White (#FFFFFF) Fushia (#B00083) White (#FFFFFF) 14

Focus indicators should have sufficient size 15

Focus indicator inverse principle High Contrast + Small Size Low Contrast + Large Size 16

Don’t rely solely on the focus indicator 17

Think “obviousness” 18

Sidebar: Design Consistency Across Device Usage Pointer / Hover Keyboard / Focus 19

Focus on consistency. 20

Consistency is key to a usable experience Usability definition Consistent experiences are • • • • • • • • • • Learnability Memorability Efficiency Errors Satisfaction Source: Usability 101 - Introduction to Usability by the Nielsen Norman Group Easy to learn Easy to remember Efficient Error tolerant Pleasant to use 21

Holistically design important button states Button design considerations • Text size • Text color • Button color • Background color • Borders / Shadows • Target size • Secondary indicator not reliant on color 22

Holistically design important link states Link design considerations • Text size • Text color • Background color • Target size • Secondary indicator not reliant on color 23

Consider links in a paragraph Additional design considerations for links contained in a paragraph • Link text color to background color: 4.5 to 1 • Paragraph text color to background color: 4.5 to 1 • Link text to paragraph text: 3 to 1 24

Aim for consistent styling 25

Holistically design important control states Control design considerations • Text size (if applicable) • Text color (if applicable) • Border color (if applicable) • Control color • Background color • Target size • Secondary indicator not reliant on color 26

Continue to aim for consistent styling 27

Know when to extend the styling 28

Design all states Possible states • Selected / Activated • Inactive / Disabled • Clicked / Pressed • Dragged • Loading / Processing • Expanded / Collapsed • Open / Closed • Etc. 29

Design for additional accessibility use cases Additional use cases • Text at 200% • Lengthy text • Lengthy text at 200% • With icons • Linking offsite • Skip link • Error states • Mobile version (responsive / 1 column / zoomed at 400%) • Etc. 30

Ensure they work on all your backgrounds 31

Interactivity 32

Design focus interactivity • Think through and document the interactivity and resultant behavior when an element receives focus, for example: o How is content exposed using a keyboard? o How does focus move from the trigger to the revealed content using a keyboard? o How is the revealed content dismissed using a keyboard? • Ensure context remains when an element receives focus 33

Summary 34

Focus on focus states. 35

Takeaways • Design focus indicators to have sufficient contrast and size • Design focus states to be obvious • Design focus states to be consistent • Design focus states for as many atoms, molecules, and organisms as required by your design system • It’s ok if your hover states and focus states are similar – it is actually encouraged! 36

Designer Accessibility Foci All permutations as to what it looks like Atom Designs Molecule All expectations about how it works and how it behaves Design Documentation Organism 37

Related success criteria Design of focus state Interactivity on focus • 1.4.1 (links in paragraph) • 1.4.2 (audio control) • 1.4.3 (contrast minimum) • 1.4.13 (content on hover or focus) • 1.4.11 (non-text contrast) • 2.1.2 (no keyboard trap) • 2.4.1 (bypass blocks) • 2.2.1 (timing adjustable) • 2.4.7 (focus visible) • 2.2.2 (pause, stop, hide) • 4.1.2 (name, role, value) • 2.5.1 (pointer gestures) • 2.5.4 (motion actuation) • 3.2.1 (on focus) • 3.2.2 (on input) • 4.1.3 (status messages) 38

Questions? 39

Slides, Contact Details, and a Guide Connect with me Get today’s slides Get agile design guide Email and LinkedIn Deck on notist Downloadable document Karen Hawkins, CPACC https://noti.st/khawk27 Accessibility in the design process 40

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