WordCamp EU 2024 Accessibility Testing Workshop

Below are embedded Google Slides for Amber’s WordCamp EU 2024 Accessibility Testing Workshop. If these embedded slides do not work for your assistive technology, you may view the presentation slides on Google or access a text version lower on this page.

Embedded Slides

Questions?

If you have questions or need help with accessibility testing after the presentation, stop by the Equalize Digital sponsor booth or contact us.

You can also get free accessibility help from people in the community in the WordPress Accessibility Facebook group.

Article continued below.

Text Version

Intro to Testing

Website Testing Process

1. Run an automated bulk scanning tool to check
   for obvious accessibility problems 
2. Manually test a representative page of every type (home, archives + singles, and any pages with special features):
   1. With keyboard only
   2. With the website zoomed 200% and 400%
   3. With a screen reader
3. Resolve all issues from scan and manual testing.
4. Bonus: bring in screen reader users or other users with disabilities for user testing to confirm accessibility.

Reference Materials

• Web Content Accessibility Guidelines 2.2
• WCAG Quick Reference
• MDN Web Docs: ARIA
• Shift Left with Accessibility Checklist
• Example Audit Report Sheet
• How to make different Chrome profiles (if you want a testing-only profile)

Get to Know WCAG

Each success criterion has several key parts:

• The number and name.
• A Level, A, AA, or AAA.
• A description that tells you how to measure if the criterion is met.
• Links to two different types on helpful guidance: an understanding doc that explains the criterion and a “how to meet” doc with examples of passes for the criterion.

We don’t have time to learn WCAG today. Our WCAG Quick Reference is helpful as well for summarizing somethings that need to be tested for each criterion.

Automated Testing

Automated Testing Tools

• Tiny Helpers
  • HeadingsMap Chrome, HeadingsMap Firefox
  • taba11y Chrome Extension
  • Colorblindly Chrome Extension
• WordPress Plugins
  • Equalize Digital Accessibility Checker
  • Editoria11y
  • Sa11y
• Single Page Scanners
  • WAVE
  • Deque’s Axe Free/Pro
  • IBM Equal Access Accessibility Checker
• SaaS Scanners
  • SiteImprove
  • Monsido
  • PopeTech (uses the WAVE API)

Other Automated Testing Notes

You’ll need to get familiar with HTML and using the browser inspector.

Tools demonstrated live: Equalize Digital Accessibility Checker (free) and HeadingsMap Chrome extension.

Keyboard Testing

The Goal

• “Keyboard” testing is more than just keyboard functionality – this is when the bulk of manual testing happens.
• Look for:
  • Clear focus indicators.
  • Ability to interact with all elements with a keyboard alone.
  • Keyboard traps
  • Content a11y issues – see Equalize Digital’s checklist

Test Zoomed to 200% and 400%

• 1.4.10 Reflow requires that no loss of content or functionality occurs and horizontal scrolling is avoided when content is presented at a width of 320 pixels – I.e. the website must be responsive.
• Best tested by setting the browser window to 1280 pixels wide and then zooming the page content to 400%.
• Content that requires horizontal scrolling, such as data tables, complex images (such as maps and charts), toolbars, etc. are exempted.

Screen Reader Testing

Screen Readers

• VoiceOver – built into Mac and Apple devices
  • Keyboard shortcuts for VoiceOver
• NVDA – open source, free, Windows only
  • Keyboard shortcuts for NVDA
• Jaws – paid screen reader

Listen For…

• Anything that interrupts or makes announcements without prompting.
• Ambiguous or unclear links, buttons, or other elements.
• Status messages (success, error, etc.) that are not announced by the screen reader.
• Missed opportunities to manage focus.
• Plus check for elements missing from the headings, links, buttons, etc. panels.