A presentation at KCDC 2022 in in Kansas City, MO, USA by Todd Libby
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 web is accessible by default, and in this talk, I cover the four principles of accessibility. We’ll start with a little history lesson on how POUR began and then we will take a walk through the four principles of accessibility, or “POUR”. Perceivable, Operable, Understandable, and Robust.
These four principles in WCAG 2.1 will be covered and explained to users of all levels. All recommendations that are made for accessibility best practices are based on the four principles of accessibility.
We will also cover some common areas where failures of accessibility lie and how decisions affect accessibility with some real-world examples of how the four principles of accessibility weren’t achieved and examples of how they can be achieved.
for free. You
can too.