Accessibility Scan

The Accessibility Scan detector analyzes your web application for accessibility issues, with primary focus on WCAG 2.1 compliance. It helps you build products that are usable by everyone — including people with visual, auditory, motor, and cognitive disabilities.

What it checks

WCAG 2.1 Principles

The scan covers all four WCAG principles:

Principle	Examples
Perceivable	Color contrast, image alt text, captions, text resize
Operable	Keyboard navigation, focus management, no seizure-inducing content
Understandable	Form labels, error messages, language declaration
Robust	Valid HTML, ARIA usage, assistive technology compatibility

Conformance levels

Ariftly tests for Level A and Level AA compliance (the level required by most legal standards including ADA, Section 508, and EN 301 549).

Level AAA checks are available as informational findings.

Rule categories

Category	Example rules
Images	Alt text present, decorative images hidden from AT
Color contrast	Text/background contrast ratio ≥ 4.5:1 (AA)
Forms	All inputs have associated labels, error identification
Navigation	Skip links, landmark regions, page title
ARIA	Valid roles, required attributes, no redundant roles
Keyboard	All interactive elements keyboard-accessible, visible focus
Media	Video captions, audio transcripts
Structure	Heading hierarchy, list semantics, table headers

Scan targets

The accessibility scan works on URL targets. It uses a headless browser to render your application and evaluate accessibility in the same context as a real user's browser.

• Supports single-page applications (React, Vue, Angular, etc.)
• Evaluates dynamic content after JavaScript execution
• Configurable crawl depth (default: 3 levels)

Configuration

{
  "detectors": ["accessibility"],
  "detector_options": {
    "accessibility": {
      "wcag_level": "AA",
      "include_aaa": false,
      "crawl_depth": 5,
      "viewport": {
        "width": 1280,
        "height": 800
      },
      "rules": {
        "exclude": ["color-contrast"]
      }
    }
  }
}

Option	Type	Default	Description
wcag_level	"A" | "AA" | "AAA"	"AA"	Minimum conformance level to test
include_aaa	boolean	false	Include AAA checks as informational
crawl_depth	integer	3	How many link levels deep to crawl
viewport	object	1280×800	Browser viewport for rendering
rules.exclude	string[]	[]	Rule IDs to skip

Findings

Example finding

{
  "id": "finding_a01",
  "detector": "accessibility",
  "severity": "high",
  "rule_id": "wcag-1-4-3",
  "title": "Insufficient color contrast",
  "description": "The text element has a contrast ratio of 2.1:1. WCAG AA requires a minimum of 4.5:1 for normal text.",
  "location": {
    "type": "dom_element",
    "selector": "button.primary-cta",
    "url": "https://myapp.example.com/checkout",
    "line": 142
  },
  "remediation": "Change the button text color from #999999 to #595959 or darker to achieve the required 4.5:1 contrast ratio.",
  "references": [
    "https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html"
  ]
}

Severity mapping

WCAG Level	Severity
Level A failure	Critical
Level AA failure	High
Level AAA failure	Medium
Best practice	Low

Legal context

Accessibility compliance is legally required in many jurisdictions:

• USA: ADA Title III, Section 508 (federal agencies)
• EU: European Accessibility Act (EAA), EN 301 549
• UK: Public Sector Bodies Accessibility Regulations
• Canada: AODA (Ontario), ACA

warning

Ariftly's accessibility scan is a tool to help identify issues — it does not constitute legal advice or a legal compliance audit. Consult a qualified accessibility expert and legal counsel for formal compliance certification.

Integration examples

Block deployments with high-severity accessibility issues

# .github/workflows/accessibility.yml
- name: Ariftly Accessibility Scan
  uses: ariftly/scan-action@v1
  with:
    api_key: ${{ secrets.ARIFTLY_API_KEY }}
    project_id: ${{ vars.PROJECT_ID }}
    detectors: accessibility
    fail_on: high