Por si no funciona lo anterior:
🔍 My Process for Testing a Web Page for WCAG Conformance
Ensuring web accessibility goes beyond automated testing—it’s about a detailed, methodical approach. Here’s how I test a webpage for WCAG conformance:
1️⃣ Start with the Basics
- Double-check I’m testing the correct URL, component, and page state.
- Open the page in my browser, set the screen width to 1280px, and open developer tools. (I live in developer tools!)
2️⃣ Inspect Elements
- Work top-down, element by element, component by component.
- Use developer tools to inspect elements and select shortcut “Expand recursively” to easily view the complete code structure.
-Check each element’s HTML semantic structure, name, role, value, aria and functionality.
***Ask questions like:
*What is this element?
*What’s its role?
*What is it's name and where is the name coming from?
*Does it have supporting attributes for different states?
*Does it pass color contrast requirements?
*Is this an interactive element?
3️⃣ Interactivity and State Testing
- For interactive elements, test with a mouse first, then the keyboard (Tab, Enter, Space) to ensure equitable functionality.
- Ensure all interactive elements have a non-obscured color contrast conforming focus indicator.
- Check hover, focus, active, pressed, selected, expanded, and collapsed states.
- Ensure the element remains conformant, maintains color contrast, and performs its intended functionality in all states across all input devices.
4️⃣ Comprehensive Component Review
Apply this process to all elements within a chosen component or page. Switch to Accessibility Tree View for new fresh perspective.
5️⃣ Screen Reader Testing
Use NVDA to do a pass-through, ensuring I haven’t missed anything important.
6️⃣ Responsive Testing
Test at 1280px for desktop, zoom to 200% for resizing, and zoom to 400% for reflow to check responsiveness and look for cutoff or missing meaningful content.
7️⃣ ARC Toolkit Analysis
- Use ARC Toolkit to run tests with all topics selected.
Manually review errors, alerts, and best practices by toggling disclosure panels.
- Use highlight tools to quickly check:
Page titles, iframes, lists, forms, tables, language attributes, buttons, links, tab order, tab index values, landmarks, and headings.
- Leverage the text spacing tool at 1280px, 200%, and 400% to ensure compliance with resizing and reflow requirements.
Accessibility isn’t just a checkbox—it’s a commitment to inclusivity and usability for all. This thorough (but not exhaustive) testing process ensures every page and component is tested against the WCAG success criteria.
Now knowing how to fix the failures... DM me for help!
What’s your favorite step or tool for accessibility testing? Let’s discuss in the comments!
#AccessibilityTesting #WCAG #WebDevelopment #Accessibility #A11y
