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

A presentation at Connect.Tech in October 2023 in Atlanta, GA, USA by Todd Libby

Slide 1

Slide 1

The Four Principles of the A“POUR”calypse The harbingers of accessibility Todd Libby 25 October - Connect.Tech

Slide 2

Slide 2

Slide 3

Slide 3

Thank You!

Slide 4

Slide 4

Me, Explained.

Slide 5

Slide 5

Slide 6

Slide 6

About Me • Accessible digital experiences • Senior Accessibility Engineer • Accessibility/Disability Advocate • Portland, ME - Phoenix, AZ • @toddlibby - X • @toddl.dev - Bluesky • @todd@a11y.info - Mastodon

Slide 7

Slide 7

Work What I do • Accessibility Consultant • W3C Invited Expert - WCAG 2.2 & WCAG3 • Advocate for Accessibility & Disability Rights

Slide 8

Slide 8

Four

Slide 9

Slide 9

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

Slide 10

Slide 10

Slide 11

Slide 11

Four Principles

Slide 12

Slide 12

History

Slide 13

Slide 13

2001 Public Working Draft

Slide 14

Slide 14

2003 Technical Reports (TR) Working Draft

Slide 15

Slide 15

“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.”

Slide 16

Slide 16

Navigable

Slide 17

Slide 17

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

Slide 18

Slide 18

2008 Working Draft (CR) Candidate Recommendation

Slide 19

Slide 19

WCAG 2.1

Slide 20

Slide 20

2018 Recommendation published, 5 June

Slide 21

Slide 21

13

Slide 22

Slide 22

78

Slide 23

Slide 23

Slide 24

Slide 24

2023

Slide 25

Slide 25

Slide 26

Slide 26

WCAG 2.2 9 Success Criteria

Slide 27

Slide 27

Slide 28

Slide 28

2028?

Slide 29

Slide 29

Slide 30

Slide 30

The Four Principles

Slide 31

Slide 31

Perceivable

Slide 32

Slide 32

Operable

Slide 33

Slide 33

Understandable

Slide 34

Slide 34

Robust

Slide 35

Slide 35

Why?

Slide 36

Slide 36

Why do we care about accessible content?

Slide 37

Slide 37

Examples

Slide 38

Slide 38

  1. Perceivable

Slide 39

Slide 39

Alternative Text alt=“Two lobster rolls in a styrofoam container. One with chives and mayonnaise and another with chipotle mayonnaise with a lemon wedge.”

Slide 40

Slide 40

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 ffi be able to understand the content.

Slide 41

Slide 41

Form Fields fi Required form elds or error messages. Are they perceivable as error messages?

Slide 42

Slide 42

Use of color Text formatting, color, design, UX mistakes

Slide 43

Slide 43

  1. Operable

Slide 44

Slide 44

Keyboard Navigation Using other methods rather than the mouse

Slide 45

Slide 45

Notifications Extending time for users

Slide 46

Slide 46

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

Slide 47

Slide 47

Navigation Visible focus indicators and a logical tab order

Slide 48

Slide 48

Labels Visible text and programmatic text large enough to view.

Slide 49

Slide 49

Placeholders Are not labels

Slide 50

Slide 50

  1. Understandable

Slide 51

Slide 51

Abbreviations Non-English speaking

Slide 52

Slide 52

Hover Content does not change on focus or on input. Unexpected changes are a failure.

Slide 53

Slide 53

Error Messages fi Identi able error messages

Slide 54

Slide 54

  1. Robust

Slide 55

Slide 55

Semantic HTML

Slide 56

Slide 56

Buttons

Slide 57

Slide 57

<button>

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

<button type=“button” role=“button” aria-label=“button”>

Slide 61

Slide 61

Accessible websites accomplish most of the goals of POUR.

Slide 62

Slide 62

Web accessibility is achieved when we think of the “people on the other side of the glass”.

Slide 63

Slide 63

The needs of users with disabilities should be considered first and foremost.

Slide 64

Slide 64

Accessibility is a right. NOT a privilege.

Slide 65

Slide 65

Thank you! Slides: https://toddl.dev/slides