WCAG Accessibility Scanning

Maeris MCP includes static accessibility analysis aligned with WCAG 2.1 AA and WCAG 2.2 standards. The scanner checks your HTML, JSX, Vue, and Angular templates for accessibility violations and produces a structured report with specific remediation steps for each issue found.

Running an Accessibility Scan

Use the security scan command with an accessibility profile:

# WCAG 2.1 AA scan maeris scan security --profile wcag_2_1_aa # WCAG 2.2 scan (includes new 2.2 success criteria) maeris scan security --profile wcag_2_2 # GIGW accessibility profile (WCAG 2.1 AA + Indian government requirements) maeris scan security --profile gigw_accessibility

WCAG 2.1 AA vs WCAG 2.2

WCAG 2.1 AA

The current standard required by most government mandates, legal frameworks (ADA, EN 301 549, Section 508), and accessibility certification bodies. Covers 50 success criteria across four principles: Perceivable, Operable, Understandable, and Robust.

WCAG 2.2

Published in October 2023. Adds 9 new success criteria including focus appearance, dragging movements, accessible authentication, and consistent help. Recommended for new projects targeting the highest accessibility standards.

What Gets Checked

The accessibility scanner analyzes your source files for the following categories of issues:

Color Contrast

Text color vs background color combinations are analyzed from inline styles and Tailwind/CSS class names. WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

ARIA Labels & Roles

Checks for missing aria-label, aria-labelledby, and aria-describedby attributes on interactive elements. Also validates correct use of ARIA roles — e.g., elements with role="button" must be keyboard-activatable.

Keyboard Navigation

Detects patterns that break keyboard accessibility: missing tabIndex on custom interactive elements, tabIndex="-1" incorrectly hiding focusable elements, click handlers on non-interactive elements without keyboard event equivalents, and focus traps in modals without proper escape key handling.

Images & Alternative Text

All <img> elements are checked for an alt attribute. Decorative images must have alt="". Informative images must have descriptive alt text. SVG elements used as icons must have a title or accessible label.

Screen Reader Compatibility

Checks for live regions (aria-live) on dynamic content that updates without a page reload. Validates that form inputs are associated with visible labels via htmlFor/for. Detects empty links and buttons that would be announced with no context.

Semantic HTML Structure

Validates correct heading hierarchy (no skipping from h1 to h3), proper use of landmark elements (<main>, <nav>, <footer>), and avoidance of tables used for layout rather than data.

Example Scan Output

WCAG 2.1 AA Accessibility Scan — my-web-app
============================================

CRITICAL (3 findings)
  [1.4.3] Insufficient color contrast
    File: components/Button.jsx:12
    Issue: Text color #9CA3AF on #FFFFFF has ratio 2.1:1 (required: 4.5:1)
    Fix:   Use #6B7280 or darker for text to achieve minimum 4.5:1 ratio

  [4.1.2] Input missing accessible label
    File: pages/contact.js:34
    Issue: <input type="email"> has no associated label or aria-label
    Fix:   Add <label htmlFor="email">Email</label> or aria-label="Email"

HIGH (7 findings)
  ...

PASSED: 1.1.1 Non-text Content (alt text)
PASSED: 2.1.1 Keyboard (all interactive elements keyboard accessible)

Summary: 10 issues found across 3 severity levels

Exporting the Accessibility Report

# Export as HTML (shareable visual report) maeris report security --format html --output accessibility-report.html # Export as JSON maeris report security --format json --output accessibility.json

Related Guides

For OWASP security scanning and other security profiles, see the OWASP Top 10 Security Scan guide.