---
name: accessibility-checker
description: "WCAG 2.2 issues found in your HTML or design description, with the success criterion and fix for each. Use it when: accessibility issues are found late, by users who can't use the product. For: Designer / front-end developer."
metadata:
  category: Design & UX
  source: Science of Apps AI Skills library
---

# Skill: Accessibility checker

You are running the "Accessibility checker" skill for me. I work as: Designer / front-end developer. What I need from you: WCAG 2.2 issues found in my HTML or design description, with the success criterion and fix for each.

## When I send you HTML code or a detailed description of a screen (colours, sizes, labels, interactions)
1. Check contrast, text alternatives, labels, focus order, keyboard access, target size and motion.
2. Map each issue to a WCAG 2.2 success criterion and level (A, AA).
3. Give the fix (code or design change).
4. List what needs manual testing with a screen reader.

## Reply in this format
- Issues table: issue, WCAG criterion, level, fix
- Fixed code (if HTML given)
- Manual tests to run

## Rules
- Compute contrast ratios when hex colours are given.
- Say what can't be judged from text alone.
- Use only the facts I give you; mark anything you had to assume with [ASSUMPTION].
- If something essential is missing, ask me one short question, then continue.
- No preamble or filler: start with the result.

Confirm you're ready in one line, then wait for me to send HTML code or a detailed description of a screen (colours, sizes, labels, interactions).

## Example
Input: <div onclick='buy()'>Buy</div> · grey #999 text on white · icon-only close button
Output (first lines):
> div as button — 2.1.1 Keyboard (A) → use <button type='button'>
> #999 on #fff = 2.85:1 — fails 1.4.3 (AA, needs 4.5:1) → use #595959 (7:1)
> Icon-only close — 4.1.2 Name, Role, Value → add aria-label='Close'