Use Case

Accessibility Documentation & Visual Evidence

Capture and document accessibility states across your website. Build visual evidence for WCAG compliance reviews.

Overview

Web accessibility compliance requires visual documentation. WCAG audits need screenshots showing focus states, color contrast, text sizing, and keyboard navigation paths. Manual capture is tedious and inconsistent.

Screenshotly captures pages in specific states needed for accessibility audits: high-contrast mode, zoomed views, keyboard focus states, and screen reader outlines. These captures document current compliance and track improvements over time.

Accessibility consultants use automated captures to efficiently audit large sites. Development teams capture before-and-after states to document fixes. Legal teams maintain compliance records for ADA and similar regulations.

Key Benefits

Document WCAG compliance visually

Capture at different zoom levels

Track accessibility improvements

Efficient large-site auditing

Results You Can Expect

WCAG-ready

compliance documentation

Multi-state

focus and zoom capture

Historical

improvement tracking

How It Works

Define pages and states to audit

Capture at standard and zoomed viewports

Document focus states and keyboard navigation

Compare against WCAG criteria

Archive for compliance records

Code Example

// Capture page at different zoom levels for a11y audit
const auditAccessibility = async (url) => {
  const viewports = [
    { width: 1280, height: 800, scale: 1 },   // Standard
    { width: 1280, height: 800, scale: 1.5 },  // 150% zoom
    { width: 1280, height: 800, scale: 2 },    // 200% zoom
  ];

  const captures = await Promise.all(
    viewports.map(vp =>
      fetch('https://api.screenshotly.app/screenshot', {
        method: 'POST',
        headers: {
          'Authorization': 'Bearer YOUR_API_KEY',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          url,
          device: 'desktop',
          format: 'png',
          viewport: { width: vp.width, height: vp.height },
          deviceScaleFactor: vp.scale,
        }),
      })
    )
  );

  return captures;
};

Frequently Asked Questions

Can I test keyboard navigation with screenshots?

Capture screenshots with JavaScript injection to simulate tab focus states. This documents the visual focus indicator for WCAG 2.4.7 compliance.

How do I document color contrast compliance?

Capture at standard and high-contrast modes. Combine with automated contrast analysis tools for comprehensive WCAG 1.4.3 compliance documentation.

What zoom levels should I capture for WCAG documentation?

WCAG 1.4.4 requires content to be usable at 200% zoom. Capture at 100%, 150%, and 200% (deviceScaleFactor 1, 1.5, and 2) to document that layout does not break and text remains readable. Some auditors also request 400% evidence for WCAG 1.4.10 reflow compliance.

How do I capture keyboard focus state screenshots?

Use Screenshotly's JavaScript injection to programmatically move focus to each interactive element before capture. This documents the visual focus indicator required by WCAG 2.4.7 and lets you verify that focus rings are visible against all background colors.

Ready to automate accessibility?

Get started with 100 free screenshots. No credit card required.

Start Free Trial Try Playground