Visual Accessibility

Ensuring your application is accessible to all users is not just a compliance requirement—it's good business. retestr.ai provides powerful visual emulation tools to help you experience your site through the eyes of users with visual impairments.

Visual Emulation Modes

You can configure any test case to run in specific Accessibility Modes. When enabled, the runner injects SVG filters or CSS overrides into the page before capturing the screenshot.

Each mode generates a separate visual snapshot (e.g., homepage-protanopia.png), which is diffed against a corresponding baseline.

Supported Modes

Mode	Description	Simulation Technique
Default	Standard rendering (no filter).	N/A
Protanopia	Red-blindness (approx. 1% of males).	SVG Color Matrix Filter
Deuteranopia	Green-blindness (approx. 5% of males).	SVG Color Matrix Filter
Tritanopia	Blue-blindness (rare).	SVG Color Matrix Filter
Achromatopsia	Total color blindness (grayscale).	SVG Color Matrix Filter
Blurred	Simulates vision loss or cataracts.	CSS filter: blur(4px)
Print	Simulates how the page looks when printed.	page.emulateMedia({ media: 'print' })

How it Works

1. Injection: Before taking a screenshot, the retestr.ai runner injects a hidden SVG definition into the DOM containing the color matrix for the selected simulation.
2. Application: A CSS rule html { filter: url(#filter-id) } is applied to the root element, instantly transforming the entire page.
3. Capture: The screenshot is taken with the filter active.
4. Verification: If your design relies solely on color to convey meaning (e.g., a green "Submit" button vs. a red "Cancel" button that look identical in Deuteranopia), the visual diff will make this obvious or you can manually review the artifact.

Configuration

To enable accessibility emulation for a test case:

1. Open the Test Case Editor.
2. Navigate to the Settings tab.
3. Find the Accessibility section.
4. Select the desired Emulation Modes (e.g., "Deuteranopia", "Blurred").
5. Save the test case.

The next time this test runs, it will execute once for each selected mode.

JSON Configuration (Advanced)

If you are using the API or editing the JSON config directly, you can set the accessibilitySettings field:

{
  "accessibilitySettings": {
    "modes": ["default", "protanopia", "blurred"]
  }
}

Benefits

• Catch Contrast Issues: Quickly see if text becomes unreadable against its background for color-blind users.
• Verify Information Hierarchy: Ensure that your layout still makes sense even without color cues.
• Test Print Styles: Verify that your "Print to PDF" layout hides navigation bars and ads correctly.