An Accessible Design Framework

An Accessible Design Framework Enabling designers to proactively embed accessibility considerations into all aspects of their work March 20, 2024

MY OBJECTIVE Provide designers with a framework to design with accessibility in mind, as well as check their work or the work of others for accessibility. Copyright © Level Access. All Rights Reserved. | Confidential 4

Definition of “Human Factors” by the Human Factors and Ergonomics Society Human Factors is a body of knowledge about human abilities, human limitations, and other human characteristics that are relevant to design. Human Factors engineering is the application of Human Factors information to the design of tools, machines, systems, tasks, jobs, and environments for safe, comfortable, and effective human use. Copyright © Level Access. All Rights Reserved. | Confidential 7

Definition of “Human Factors” by the Human Factors and Ergonomics Society Human Factors is a body of knowledge about human abilities, human limitations, and other human characteristics that are relevant to design. Human Factors engineering is the application of Human Factors information to the design of tools, machines, systems, tasks, jobs, and environments for safe, comfortable, and effective human use. Copyright © Level Access. All Rights Reserved. | Confidential 8

KEY TAKEAWAY Our scope of design is a system that includes an able yet flawed human, as well as the set of technologies that enable them to execute their desired tasks in digital environments. Copyright © Level Access. All Rights Reserved. | Confidential 13

KEY TAKEAWAY We need to design for human abilities and limitations, and for technology’s abilities and limitations, all within a given environment or context. Copyright © Level Access. All Rights Reserved. | Confidential 14

Act on the information Perceive information (Operable) (Perceivable) WCAG can be mapped to information processing theory Process information (Understandable) Copyright © Level Access. All Rights Reserved. | Confidential 18

KEY TAKEAWAY Ask yourself: - Is the user able to get all the relevant information? - Is the information easy to understand? - How can the user act on that information? Copyright © Level Access. All Rights Reserved. | Confidential 19

Design for technologies to help humans perceive information In support of perceivability Visual interfaces Voice interfaces Touch interfaces enable visual enable auditory enable touch perception perception perception Copyright © Level Access. All Rights Reserved. | Confidential 20

Information / content Act on the information Perceive information (Output) (Input) Information moves through the system • Output quality is dependent on input quality • If input quality is degraded, Information / content Information / content output quality is degraded Process information Copyright © Level Access. All Rights Reserved. | Confidential 22

KEY TAKEAWAY Technology / experience scope of design Keyboard interfaces Speech recognition Voice interfaces Touch interfaces Visual interfaces Pointers Motion High-quality content Copyright © Level Access. All Rights Reserved. | Confidential 27

FRAMEWORK REQUIREMENTS

Map to our mental model of design. 2. Fold into our natural design processes. Copyright © Level Access. All Rights Reserved. | Confidential 29

Manual evaluations require iterating over various perspectives • Animation • ARIA and dynamic content • Authoring tools • Charts and graphs • Color and contrast • CSS • Custom controls • Data tables • Embedded media and object elements • Focus control • Forms • Frames • Image maps • Images • Keyboard accessibility • Language and content • Layout tables • Links • Lists • Live regions • Multimedia • Navigation • Page structure • Typography Copyright © Level Access. All Rights Reserved. | Confidential 34

KEY TAKEAWAY To cover the full set of accessibility requirements, you need to comb over your designs multiple times, each time with a different perspective: - Can they perceive all pertinent information? - Can they understand all the information? - Can they execute the actions they want to take? Copyright © Level Access. All Rights Reserved. | Confidential 35

Experience creation involves including three types of accessibility requirements Design Content Documentation requirements requirements requirements Experience Copyright © Level Access. All Rights Reserved. | Confidential 36

PUTTING IT ALL TOGETHER The Accessible Design Framework Act / Operate Perceive Understand For any component In each phase of the Apply relevant For each technology design in any viewport information exchange accessibility requirements or experience process and best practices Copyright © Level Access. All Rights Reserved. | Confidential 37

Product card example Visual interfaces Contrast … Font … … Perceive Understand Voice interfaces … Touch interfaces … Content … Pointers … Keyboard interfaces … Motion … Speech recognition … Operate Copyright © Level Access. All Rights Reserved. | Confidential 39

Text perceivability for visual interfaces Design requirements Contrast Documentation requirements Design requirements Selection Documentation requirements Design requirements Font Size Documentation requirements Concerns for this component include: • Color usage • Font selection and size • Padding between letters, words, … Design requirements Padding Documentation requirements lines, and paragraphs • How the component handles text at 200% and zoom to 400% Design requirements 200% text Documentation requirements Design requirements Zoom Documentation requirements … Copyright © Level Access. All Rights Reserved. | Confidential 40

Text perceivability for voice interfaces Design requirements Regular text Documentation requirements Design requirements Concerns for this component include: • letters (as opposed to words) • Capitals Capitals being read aloud as individual Screen reader Documentation requirements … Design requirements Sizes being read aloud as individual letters (as opposed to words) Abbreviations Documentation requirements … Copyright © Level Access. All Rights Reserved. | Confidential 41

Text perceivability for touch interfaces Design requirements Haptic Documentation requirements No touch concerns for text in this component Design requirements Braille Documentation requirements … Copyright © Level Access. All Rights Reserved. | Confidential 42

Text understandability Content requirements Reading order Documentation requirements Concerns for this component include: • Reading order / focus order • Plain language • Meaningful descriptions Order Content requirements Focus order Documentation requirements Content requirements Language Documentation requirements Content requirements Descriptions Documentation requirements … Copyright © Level Access. All Rights Reserved. | Confidential 43

Text operability Design requirements Pointers Documentation requirements No operability concerns for text in this Design requirements component Keyboard interfaces Documentation requirements Design requirements Motion Documentation requirements Design requirements Speech recognition Documentation requirements … Copyright © Level Access. All Rights Reserved. | Confidential 44

Apply the framework to all elements Frames Buttons Perceive Visual interfaces … Voice interfaces … Touch interfaces … … Content … Understand … Images Links Operate Pointers … Keyboard interfaces … Motion … Speech recognition … … Copyright © Level Access. All Rights Reserved. | Confidential 45

Apply the framework to the component Perceive Visual interfaces … Voice interfaces … Touch interfaces … … Content … Understand … Operate Pointers … Keyboard interfaces … Motion … Speech recognition … … Copyright © Level Access. All Rights Reserved. | Confidential 46

Key takeaways summarized • Our scope of design is a system that includes an able yet flawed human, as well as the set of technologies that enable them to execute their desired tasks in digital environments. • Design for human abilities and limitations, and for technology’s abilities and limitations, all within a given environment or context. • It’s the quality of the content that’s important to help people understand it. • Content can be thought of as a technology that enables the understandability of the system. • Content needs to be thoughtfully designed so it can move through the system quickly and efficiently. • Appropriately design the features and functionality against which the realized page will be tested. • To cover the full set of accessibility requirements, you need to comb over your designs multiple times, each time with a different perspective: o Can they perceive all pertinent information? o Can they understand all the information? o Can they execute the actions they want to take? Copyright © Level Access. All Rights Reserved. | Confidential 49

Paramount takeaway Iterate to design for many technological experiences Keyboard interfaces Speech recognition Voice interfaces Touch interfaces Visual interfaces Pointers Motion High-quality content Copyright © Level Access. All Rights Reserved. | Confidential 50

Thank you

An Accessible Design Framework

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54