Web Component Accessibility

Accessibility (a11y) patterns and remediation guidance for web components. Reference any time work involves the visible or interactive surface of a component — generating, modifying, reviewing, or styling HTML, JS, or CSS — to apply WCAG 2.2 standards.

Review Context

Conduct a review specifically focused on enhancing web accessibility, guided by the WCAG (Web Content Accessibility Guidelines).

In order to mark code as a violation, it must have a direct correlation to the WCAG rule cited such that it is a clear violation of the criteria.

Key Review Criteria:

1. Focus Exclusively on Accessibility:

• Evaluate the component solely for accessibility.
• Only consider compliance with the cited WCAG Success Criteria, ignoring violations that can be attributed to other criteria.
• Avoid addressing general code style, patterns, or issues unrelated to accessibility.

2. Ensure Minimum and Sufficient Accessibility:

• Identify accessibility issues that prevent the component from meeting the minimum requirements outlined by WCAG.
• Avoid suggesting enhancements that go beyond the scope of WCAG compliance unless strictly necessary.

3. WAI-ARIA Usage:

• Use WAI-ARIA attributes only when strictly required to achieve accessibility that cannot otherwise be addressed with semantic HTML.
• Avoid unnecessary complexity or potential regressions caused by incorrect or overuse of ARIA attributes.

4. Component Library Usage

• Assume that well-known component libraries (e.g., Salesforce Lightning, Material UI, Chakra UI) are accessible out of the box when correctly implemented. Unless they are used specifically in conflict with WCAG, library-provided components can be ignored for this review, as they are implemented in an accessible way beneath the abstraction.

Focus: Provide actionable feedback to ensure the component meets the necessary WCAG accessibility requirements, avoiding extraneous feedback unrelated to the prompt's scope. Identify issues in code only if there is an immediate fix. You MUST conduct the review, and subsequently suggest the code fix that solves this issue.

Success Criteria Reviewers

Identify which Success Criteria apply to the code under review, then open the reference files relevant to that code. Each reference is a self-contained reviewer with analysis framework, examples, and remediation guidance.

Perceivable

• SC 1.1.1 Non-text Content
• SC 1.3.1 (i) Lists
• SC 1.3.1 (ii) Tables
• SC 1.3.1 (iii) Form Labels
• SC 1.3.1 (iv) Regions
• SC 1.3.1 (v) Groups
• SC 1.3.5 Identify Input Purpose
• SC 1.4.3 Contrast (Minimum)

Operable

• SC 2.1.1 Keyboard
• SC 2.4.4 Link Purpose
• SC 2.4.6 Headings and Labels
• SC 2.5.1 Pointer Gestures
• SC 2.5.2 Pointer Cancellation
• SC 2.5.3 Label in Name
• SC 2.5.7 Dragging Movements

Understandable

• SC 3.2.1 On Focus
• SC 3.2.2 On Input
• SC 3.3.1 Error Identification
• SC 3.3.2 Labels or Instructions
• SC 3.3.3 Error Suggestion

Robust

• SC 4.1.2 (i) Name
• SC 4.1.2 (ii) Role
• SC 4.1.2 (iii) Value

Vision-Assisted Review

When component screenshots or design mocks are available, augment the source-code review with these vision-level reviewers. Each reference covers image-based evaluation for the corresponding Success Criterion — contrast ratios, color dependence, resize/reflow behavior, and non-text content identification from pixels rather than from the DOM.

• SC 1.1.1 Non-text Content (vision)
• SC 1.4.1 Use of Color (vision)
• SC 1.4.3 Contrast (vision)
• SC 1.4.10 Reflow (vision)
• SC 1.4.11 Non-text Contrast (vision)

Review Output

For each Success Criterion you evaluated, report violations found. If no violations exist for a criterion, return an empty list for that criterion.