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

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

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

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

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

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

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

Todd Libby @toddlibby 8 August, 2022, KCDC

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

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

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

Four Principles

History Todd Libby @toddlibby 8 August, 2022, KCDC

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

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

“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

• 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

• 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

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

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

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

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

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

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

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

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

• 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

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

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

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

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

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

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

Examples Todd Libby @toddlibby 9 August, 2022, KCDC

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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