Accessibility Auditing
You MUST read projects/site/src/docs/internal/guidelines/testing-accessibility.md before proceeding.
Audit Scope
When the user invokes this skill for a component, perform the following layers of accessibility verification:
1. Static analysis (ESLint lit-a11y)
Run ESLint on the component source and check for lit-a11y rule violations:
cd projects/core && pnpm exec eslint --no-warn-ignored src/<component>/<component>.ts
Review the component template for common issues:
- Missing
aria-labeloraria-labelledbyon interactive elements - Missing
roleattributes on custom interactive patterns - Images without
alttext - Form inputs without associated labels
2. Runtime testing (axe-core)
Verify <component>.test.axe.ts exists and covers all component variants:
Read path="projects/core/src/<component>/<component>.test.axe.ts"
Check that the test:
- Imports
runAxefrom@internals/testing/axe - Tests every applicable status and size variant, plus the
disabledstate when the component supports it - Expects zero violations:
expect(results.violations.length).toBe(0) - Properly creates and removes fixtures
3. ARIA pattern verification
Identify which WAI-ARIA Authoring Practices pattern the component implements. Verify:
- Correct
roleattribute on the host or internal elements - Required ARIA states (
aria-expanded,aria-selected,aria-checked, etc.) - Proper
tabindexmanagement - Focus management for composite widgets
4. Keyboard navigation
Check if the component uses the keynav reactive controller from @nvidia-elements/core/internal:
Grep pattern="keynav|keyNavigationList|KeyNav" path="projects/core/src/<component>/"
Verify keyboard interactions match the ARIA pattern:
- Arrow keys for navigation within composite widgets
- Enter/Space for activation
- Escape for dismissal
- Tab for focus entry/exit
- Home/End for first/last item
5. Color contrast (theme tokens)
Check that the component uses theme tokens rather than hardcoded colors:
Grep pattern="rgb|#[0-9a-fA-F]|hsl" path="projects/core/src/<component>/<component>.css"
Flag any hardcoded color values. Verify CSS custom properties map to theme tokens that meet WCAG 2.1 AA contrast ratios (4.5:1 for normal text, 3:1 for large text).
Output
Present a structured report with:
- Pass/fail status
- Findings grouped by audit layer
- Specific remediation steps for each finding
- Commands to run the relevant tests