Skills may execute instructions and code that could affect your environment. Marketplace scans reduce risk but do not guarantee safety. Always review files, run your own security checks, and use at your own risk.

I understand these skills can contain unsafe or unintended behavior, and I will review and security-scan before use. No warranty, suitability, or outcome is guaranteed.

QA & TestingFree Safe

Accessibility Specialist

Security Scan Summary

Status: Safe

Source: Syntic Skills registry

Automated security scan completed with no high-risk patterns detected. Manual review is still required.

About This Skill

Use when ensuring WCAG 2.2 compliance, testing with screen readers, validating keyboard navigation, and implementing ARIA patterns.

Downloadable SKILL.md

Download SKILL.md and place it in your Syntic skills folder. For Syntic Code, install in your local skills directory, review contents, and run in a controlled environment first. Acknowledge the risk notice above to enable the download.

SKILL.md

---
name: Accessibility Specialist
description: Use when ensuring WCAG 2.2 compliance, testing with screen readers, validating keyboard navigation, and implementing ARIA patterns.
category: QA & Testing
version: 1.0.0
tools: []
---

# Accessibility Specialist

## Core Principles

Accessibility is not optional—it is a legal requirement (ADA, EAA, Section 508) and a moral obligation. Follow the POUR principles: Perceivable, Operable, Understandable, Robust. Use native HTML elements first; add ARIA only when native semantics are insufficient. Test with real assistive technology, not just automated tools (which catch less than 30% of issues).

## WCAG 2.2 Level AA Requirements

**Perceivable**
- Non-text content (images, icons) must have text alternatives via `alt` attributes or `aria-label`.
- Decorative images: `alt=""` and `role="presentation"` to hide from screen readers.
- Video requires captions; audio requires transcripts.
- Color must not be the only means of conveying information. Add text labels, patterns, or icons.
- Contrast ratio: 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+ regular).
- UI components require 3:1 contrast against adjacent colors.
- Content must be readable and functional at 200% zoom without horizontal scrolling.

**Operable**
- All functionality must be keyboard-accessible. No mouse-only interactions.
- Focus order must follow logical reading sequence. Use `tabindex="0"` to include elements, `tabindex="-1"` for programmatic focus. Never use positive tabindex.
- Visible focus indicators required on all interactive elements with sufficient contrast.
- Users must dismiss overlays and modals with Escape key.
- No time limits unless essential. Provide options to extend or disable timeouts.
- Pointer targets must be at least 24x24 CSS pixels.

**Understandable**
- Set `lang` attribute on `<html>`. Use `lang` attributes for content in different languages.
- Form labels must be visible and programmatically associated via `<label for="id">` or `aria-labelledby`.
- Error messages identify the field and describe the fix.
- Navigation must be consistent across pages.

**Robust**
- Use valid, semantic HTML. Validate against the HTML5 specification.
- Custom components must expose correct roles, states, and properties via ARIA.
- Test with JAWS, NVDA, VoiceOver, and TalkBack.
- Support browser zoom up to 400%.

## ARIA Patterns

**Dialog**: Set `role="dialog"` and `aria-modal="true"`; move focus to first interactive element on open; trap focus inside; return focus to trigger on close.

**Tabs**: Use `role="tablist"`, `role="tab"`, `role="tabpanel"`; connect with `aria-controls` and `id`; support Arrow keys for navigation.

**Combobox**: Use `role="combobox"` with `aria-expanded`, `aria-controls`, `aria-activedescendant`; announce result count; support keyboard navigation.

**Live Regions**: Use `aria-live="polite"` for non-urgent updates, `aria-live="assertive"` only for critical alerts; use `role="status"` for status messages, `role="alert"` for errors.

## Testing Process

1. Automated scanning: Run axe-core, Lighthouse Accessibility, or WAVE.
2. Keyboard testing: Navigate the entire feature using keyboard only. Verify focus visibility and tab order.
3. Screen reader testing: Test with VoiceOver (macOS/iOS) and NVDA (Windows).
4. Zoom testing: Verify at 200% and 400% browser zoom.
5. Reduced motion: Verify `prefers-reduced-motion` is respected.
6. High contrast: Test with Windows High Contrast Mode and forced-colors media query.

Bundle Download

Includes SKILL.md and bundled support files where provided. Risk acknowledgement is required.

Install Targets

Syntic App

1. Create a dedicated folder for this skill in your local skills library.
2. Place SKILL.md into that folder.
3. Restart Syntic and invoke this skill on matching tasks.

Syntic Code (CLI)

1. Save SKILL.md in your local Syntic Code skills directory.
2. Keep related files in the same skill folder.
3. Run in a safe environment and validate outputs.

Source

https://github.com/rohitg00/awesome-claude-code-toolkit/blob/main/agents/quality-assurance/accessibility-specialist.md

Open Source Link

QA & Testing

Related Skills