Use this skill to determine whether a Lightning Web Component (LWC) is accessible and meets WCAG accessibility guidelines. TRIGGER when the user asks \"is my component accessible?\", \"does my LWC meet accessibility guidelines?\", \"is this component WCAG compliant?\", \"find accessibility problems in this LWC\", \"is this LWC keyboard accessible?\", \"does this component work with a screen reader?\", \"does this component have sufficient color contrast?\", \"check ARIA usage in this LWC\", or …
Use this skill to determine whether a Lightning Web Component (LWC) is accessible and meets WCAG accessibility guidelines.
TRIGGER when the user asks \"is my component accessible?\", \"does my LWC meet accessibility guidelines?\", \"is this component WCAG compliant?\", \"find accessibility problems in this LWC\", \"is this LWC keyboard accessible?\", \"does this component work with a screen reader?\", \"does this component have sufficient color contrast?\", \"check ARIA usage in this LWC\", or \"WCAG 2.2 accessibility check\".
Also TRIGGER when the user wants to fix or improve accessibility (a11y, WCAG, ARIA) in an LWC's HTML, JS, or CSS — semantic markup, focus, keyboard nav, contrast, screen-reader labels, WCAG 2.2 SC.
Produces `a11y-review.md` with WCAG-cited findings.
DO NOT TRIGGER for general LWC generation (use `experience-lwc-generate`) or SLDS visual/design review not focused on accessibility (use `design-systems-slds-validate`).
Similar popular skills
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
Files included with this skill beyond the listing page.
skill mdSKILL.md6,387 B
docsSUMMARY.md995 B
History
First recorded snapshot · 648 installs
SKILL.md
<!-- adk-managed-skill -->
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:
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.
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.
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.
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.
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.
