How to stay web accessible: Applying WCAG 2.1 & 2.2

A rundown on Web Content Accessibility Guidelines (WCAG) 2.1 and 2.2 guidelines and how to apply them. Presented at the 2025 Code4libBC unconference.

Transcript

1. HOW TO STAY WEB ACCESSIBLE: APPLYING WCAG 2.1 & 2.2 Oct 16, 2025 Cynthia Ng @Arty-chan
2. ABOUT ME 2012-2013 at Ryerson University Library & Archives (now TMUL) Migrated website and ensured WCAG 2.0 compliance 2013-2014 at CAPER-BC (Centre for Accessible Post-secondary Education Resources BC) Migrated website and ensured WCAG 2.0 compliance Accessible book production 2014-2016 at National Network for Equitable Library Service (NNELS) Accessible book production and website improvements 2018 at GitLab, assist with first Voluntary Product Accessibility Template (VPAT) report Web Accessibility advocate
3. TheRealPomax. (2025). hello! (Tofino, BC) with permission https://mastodon.social/@TheRealPomax/114722921127898176
4. WHAT IS…?
5. WEB ACCESSIBILITY “Web accessibility, or eAccessibility, is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio- economic restrictions on bandwidth and speed.” - Wikipedia
6. WCAG “Web Content Accessibility Guidelines (WCAG) 2 is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.” - WCAG 2 Overview: Introduction
7. WCAG TIMELINE WCAG 1.0 : 1999 May WCAG 2.0 : 2008 December : 61 success criteria WCAG 2.1 : 2018 June : Added 17 new WCAG 2.2 : 2023 October : Added 9 new, removed 1 WCAG 3.0 (future) : 2025 September (latest draft)
8. WHAT WE’RE (NOT) COVERING New Success Criteria in WCAG 2.1 New Success Criteria in WCAG 2.2 1.3.4 Orientation (AA) 1.3.5 Identify Input Purpose (AA) 1.3.6 Identify Purpose (AAA) 1.4.10 Reflow (AA) 1.4.11 Non-Text Contrast (AA) 1.4.12 Text Spacing (AA) 1.4.13 Content on Hover or Focus (AA) 2.1.4 Character Key Shortcuts (A) 2.2.6 Timeouts (AAA) 2.3.3 Animation from Interactions (AAA) 2.5.1 Pointer Gestures (A) 2.5.2 Pointer Cancellation (A) 2.5.3 Label in Name (A) 2.5.4 Motion Actuation (A) 2.5.5 Target Size (AAA) 2.5.6 Concurrent Input Mechanisms (AAA) 4.1.3 Status Messages (AA) 2.4.11 Focus Not Obscured (Minimum) (AA) 2.4.12 Focus Not Obscured (Enhanced) (AAA) 2.4.13 Focus Appearance (AAA) 2.5.7 Dragging Movements (AA) 2.5.8 Target Size (Minimum) (AA) 3.2.6 Consistent Help (A) 3.3.7 Redundant Entry (A) 3.3.8 Accessible Authentication (Minimum) (AA) 3.3.9 Accessible Authentication (Enhanced) (AAA)
9. TEMPLATE & STRUCTURE
10. RESPONSIVE DESIGN Orientation - AA (1.3.4) allow portrait and landscape Reflow - AA (1.4.10) content readable/functional at 320px width (400% zoom) Source: GR8DAN, CC0, via Wikimedia Commons
11. VISUAL DESIGN
12. NON-TEXT CONTRAST - AA (1.4.11) 3:1 contrast
13. TEXT SPACING - AA (1.4.12) stay readable/usable Line height: 1.5× font size Paragraph spacing: 2× font size Letter spacing: 0.12× font size Word spacing: 0.16× font size Apply WCAG text spacing adjustments ❌ Bad: Breaks with spacing This text is in a fixed-height container. When spacing adjustments are applied, the content gets cut off at the bottom and becomes unreadable. Users lose access to important information because the container cannot expand to fit the adjusted spacing requirements. This demonstrates a failure to meet WCAG 1.4.12. Fixed dimensions - content gets cut off ✂️ ✅ Good: Adapts to spacing This text is in a flexible container with scrolling enabled. When spacing adjustments are applied, all content remains accessible and readable. Users can scroll to see everything without losing any information. This demonstrates proper implementation of WCAG 1.4.12 text spacing requirements. Fixed dimensions with scroll - all content accessible ✓
14. FOCUS Focus Appearance - AAA (2.4.13) minimum size and contrast requirements Focus Not Obscured (Minimum) - AA (2.4.11) partially hidden is allowed Focus Not Obscured (Enhanced) - AAA (2.4.12) nothing hidden
15. CONTENT ON HOVER OR FOCUS - AA (1.4.13) Dismissible: can be closed without moving pointer/focus (usually ESC key) Hoverable: pointer can move over the new content without it disappearing Persistent: stays visible until dismissed or no longer valid ❌ Not Hoverable ✅ Dismissible, Hoverable, Persistent ⓘ Hover for info ⓘ Hover for info
16. ANIMATION Animation from Interactions - AAA (2.3.3)
17. INPUT AND POINTER INTERACTIONS
18. KEYBOARD AND INPUT ACCESSIBILITY Character Key Shortcuts - A (2.1.4) don't conflict; single-key off/remap option Concurrent Input Mechanisms - AAA (2.5.6) allow multiple inputs Label in Name - A (2.5.3) programmatic name has label text
19. TOUCH AND POINTER INTERACTION
20. TARGET SIZE Target Size (Minimum) - AA (2.5.8) 24x24 px or 24px diameter spacing Target Size (Enhanced) - AAA (2.5.5) 44x44 px
21. POINTER CANCELLATION - A (2.5.2) down-event not used up-event and allow undo up reversal essential
22. DRAGGING MOVEMENTS - AA (2.5.7) single-pointer alternative ❌ Drag-only reordering ⋮⋮ Item A (drag only) ⋮⋮ Item B (drag only) ⋮⋮ Item C (drag only) ✅ Buttons as alternative ▲ ▼ Item 1 ▲ ▼ Item 2 ▲ ▼ Item 3
23. GESTURE ACCESSIBILITY Motion Actuation - A (2.5.4) alternative & disable option Pointer Gestures - A (2.5.1) provide simple alternatives
24. SITE CONTENT
25. CONSISTENT NAVIGATION Consistent Help - A (3.2.6)
26. FORMS AND INPUT FIELDS
27. IDENTIFY PURPOSE Identify Input Purpose - AA (1.3.5) autocomplete <label for="user-phone">Phone Number</label> <input type="tel" id="user-phone" autocomplete="tel"> Identify Purpose - AAA (1.3.6) for all user interface components, icons, and regions
28. REDUNDANT ENTRY - A (3.3.7) Shipping Address Full Name Address Postal Code Billing Address Same as shipping address Full Name Address Postal Code
29. AUTHENTICATION Accessible Authentication (Enhanced) - AAA (3.3.9) alternative non-cft authentication method mechanism to assist Accessible Authentication (Minimum) - AA (3.3.8) object recognition non-text personal content
30. STATUS MESSAGES - AA (4.1.3) ✓ Trigger Success Message ✗ Trigger Error Message ℹ Trigger Info Message Uses aria-live="polite"
31. TIMEOUTS - AAA (2.2.6) show time left before session expiry Simulate Session Timeout Warning
32. TESTING AND VALIDATION Automated Testing (covers 20-60%) Source: Deque, The Automated Accessibility Coverage Report. https://www.deque.com/automated-accessibility-testing-coverage/ Example: axe, WAVE, Lighthouse Browser/Design Tools accessibility panel, responsive design mode Manual Testing screen readers, keyboard-only
33. TAKE AWAY “WCAG covers a wide range of recommendations for making web content more accessible, [and f]ollowing these guidelines will also often make web content more usable to users in general.” - WCAG 2.2 : Abstract
34. THANKS! Cynthia "Arty" Ng artychan@mastodon.social arty-chan@bsky.social about.me/cynthiang