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.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
Text Version
Intro to Testing
Website Testing Process
- Run an automated bulk scanning tool to check
for obvious accessibility problems - Manually test a representative page of every type (home, archives + singles, and any pages with special features):
- With keyboard only
- With the website zoomed 200% and 400%
- With a screen reader
- Resolve all issues from scan and manual testing.
- 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
- WordPress Plugins
- Single Page Scanners
- 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
- NVDA – open source, free, Windows only
- 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.