The Four Principles of the A“POUR”calypse: The harbingers of accessibility

A presentation at KCDC 2022 in August 2022 in Kansas City, MO, USA by Todd Libby

Slide 1

Slide 1

The Four Principles of the A“POUR”calypse The harbingers of accessibility Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 2

Slide 2

Thanks! Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 3

Slide 3

Thank you! Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 4

Slide 4

Thank you! Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 5

Slide 5

Thank you! Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 6

Slide 6

Me, Explained. Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 7

Slide 7

Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 8

Slide 8

About Me • Phoenix, AZ - Portland, ME • Lobster rolls & lobsters • Making the Web accessible Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 9

Slide 9

Work What I do • Accessibility Team Lead at WebstaurantStore • Accessibility Engineer at the Centre for Inclusive Design • Accessibility Consultant • W3C Invited Expert - WCAG3 • Advocate for Accessibility Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 10

Slide 10

Slide 11

Slide 11

Famine Death Four Horsemen of the Apocalypse, an 1887 painting by Viktor Vasnetsov. War Conquest

Slide 12

Slide 12

Slide 13

Slide 13

Four Principles

Slide 14

Slide 14

History Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 15

Slide 15

2001 Public Working Draft Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 16

Slide 16

2003 Technical Reports (TR) Working Draft Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 17

Slide 17

“The overall goal is to create Web content that is perceivable, operable, navigable, and understandable by the broadest possible range of users and compatible with their wide range of assistive technologies, now and in the future.” Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 18

Slide 18

• Navigable - Facilitate content orientation and navigation. • Key to e ective use of Web content is the ability to obtain and keep one’s and the ability to e application. ciently move about the site, document or https://www.w3.org/TR/2003/WD-WCAG20-20030429/#navigation @toddlibby ffi ff Todd Libby 8 August, 2022, KCDC

Slide 19

Slide 19

• Navigable - Facilitate content orientation and navigation. • Key to e ective use of Web content is the ability to obtain and keep one’s and the ability to e application. @toddlibby ffi ff Todd Libby ciently move about the site, document or 8 August, 2022, KCDC

Slide 20

Slide 20

2008 Working Draft (CR) Candidate Recommendation Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 21

Slide 21

WCAG 2.1 Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 22

Slide 22

2018 Recommendation published, 5 June Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 23

Slide 23

13 Guidelines Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 24

Slide 24

78 Success Criteria Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 25

Slide 25

WCAG 2.2 9 Todd Libby @toddlibby Success Criteria 8 August, 2022, KCDC

Slide 26

Slide 26

2022 September Todd Libby @toddlibby 8 August, 2022, KCDC

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

The Four Principles Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 31

Slide 31

• Perceivable - Information and user interface components must be presented to users in a way that they can perceive. Users must be able to comprehend the information being presented. • Operable - User interface components and navigation must be operable. Todd Libby @toddlibby • Understandable - Information and the operation of a user interface must be understandable. • Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. 9 August, 2022, KCDC

Slide 32

Slide 32

The Four Principles Perceivable • Text alternatives: Provide text content for all non-text content • • • so it can be converted into other forms of content. Time-based media: Provide alternatives for time-based media. Adaptable: Create content that can be presented in different ways without losing information or structure. Distinguishable: Make it easy for users to hear and see content. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 33

Slide 33

The Four Principles Operable • Keyboard Accessible: Make all functionality available via keyboard. • Enough Time: Provide users enough time to read and use content. • Seizures & Physical Reactions: Do not design content that can cause seizures or physical reactions • Navigable: provide ways to help users navigate, find content, and determine where they are • Input Modalities: Make it easier for users to operate functionality through various inputs other than the keyboard. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 34

Slide 34

The Four Principles Understandable • Readable: Make text content readable and understandable. • Predictable: Make Web pages appear and operate in • predictable ways. Input Assistance: Help users avoid and correct mistakes. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 35

Slide 35

The Four Principles Robust • Compatible: Maximize compatibility with current and future user agents, including assistive technologies. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 36

Slide 36

Why? Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 37

Slide 37

Accessibility Why do we create accessible content? • Ethical: Create accessible content for disabled people to • • • improve their lives. Economic: Accessible content attracts business from a wider audience. Law: Laws are in place for content to be accessible to disabled people. Inclusive: The Web was not created for a certain group of people. The Web is not a barrier to people with disabilities. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 38

Slide 38

Examples Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 39

Slide 39

The Four Principles Perceivable • Text alternatives: Alternative text of images. • Time-based media: Captions in videos, transcriptions for • • podcasts. Adaptable: Required form fields, DOM order matches visual order. Distinguishable: Underlining links, sufficient contrast of text, resizing text. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 40

Slide 40

Alternative Text alt=“A title which reads, ‘Famous chickens’ and in four panels you see Foghorn Leghorn, A bucket of Kentucky Fried Chicken, the Kellogg’s Corn Flakes rooster, and a caricature of Missouri’s own Josh Hawley running away from danger.” Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 41

Slide 41

Captions/Subtitles Video, audio. Live or closed • Indicators for content for the Deaf, Hard of Hearing • Contrast of text su cient with dark background. • Readability • Optional way for disabled users to be able to understand the content. @toddlibby ffi Todd Libby 9 August, 2022, KCDC

Slide 42

Slide 42

Form Fields Required form elds or error messages. @toddlibby fi Todd Libby 9 August, 2022, KCDC

Slide 43

Slide 43

Use of color Text formatting, color, design, UX mistakes Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 44

Slide 44

The Four Principles Operable • Keyboard Accessible: Navigation with TAB key, no keyboard • • • • traps. Enough Time: Stop or pause mechanisms, sufficient time to complete tasks. Seizures & Physical Reactions: Flashing content/animation that does not cause vestibular issues. Navigable: Visible focus indicators, logical focus order. Input Modalities: Labels that include text presented visually, sufficient target size on mobile. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 45

Slide 45

Keyboard Navigation Using other methods rather than the mouse Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 46

Slide 46

Notifications Extending time for users Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 47

Slide 47

Rage Against the Content fl Flashing content exceeding three ashes per second

Slide 48

Slide 48

Navigation Visible focus indicators and a logical tab order Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 49

Slide 49

Labels Visible text and programmatic text large enough to view. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 50

Slide 50

Placeholders Are not labels Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 51

Slide 51

Slide 52

Slide 52

The Four Principles Understandable • Readable: Mechanisms to identify abbreviations/jargon, • • default human language programmatically determinable. Predictable: Changes of context not initiated by focus or change of settings, consistency with navigation/components. Input Assistance: Identifiable error messages, labels or instructions. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 53

Slide 53

Abbreviations Non-English speaking Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 54

Slide 54

Hover Content does not change on focus or on input. Unexpected changes are a failure. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 55

Slide 55

Error Messages Identi able error messages fi Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 56

Slide 56

The Four Principles Robust • Compatible: Accessible APIs, status messages/state during progress, code that uses start and end tags, unique IDs, and elements that do not contain duplicate attributes. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 57

Slide 57

Semantic HTML Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 58

Slide 58

Accessible websites accomplish all of the goals of POUR Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 59

Slide 59

Web accessibility is achieved when we think of the “people on the other side of the glass” Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 60

Slide 60

The needs of the disabled user should be considered first and foremost Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 61

Slide 61

A11y is a right. NOT a privilege. Todd Libby @toddlibby 9 August, 2022, KCDC

Slide 62

Slide 62

Thank you! Eat more lobster! 🦞 Slides: https://noti.st/ colabottles/eHPdlN Todd Libby @toddlibby 9 August, 2022, KCDC