# Front A11Y

> Audit or fix accessibility issues (WCAG 2.1 AA) in HTML, Vue, Svelte, or Astro files. Checks images, ARIA, keyboard navigation, forms, and semantic HTML. Usage: /front-a11y [fix]

- Skill: `effeilo/front-a11y` (Agent Skill, multi-file: 16 files)
- Install (CLI): `npx skillmds@latest add effeilo/front-a11y`
- Raw SKILL.md: https://api.skillmd.com/api/skills/effeilo/front-a11y/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: effeilo (https://skillmd.com/u/effeilo)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/effeilo/front-a11y

---


Audit or fix accessibility issues in the file that is currently open or explicitly mentioned by the user.

- Default (no arguments): **Audit mode** : analyse the file and produce a structured report of all accessibility issues found.
- If `$ARGUMENTS` contains `fix`: **Fix mode** : apply all automatically-fixable issues directly to the file, then report what was fixed and what requires manual attention.

---

## Step 1 : Detect the file language

Look at the extension of the target file:

- If `.html` → the language file is `front-a11y-html.md`
- If `.jsx` or `.tsx` → the language file is `front-a11y-jsx.md`
- If `.vue` → the language file is `front-a11y-vue.md`
- If `.svelte` → the language file is `front-a11y-svelte.md`
- If `.astro` → the language file is `front-a11y-astro.md`
- Otherwise → inform the user that this file type is not supported. Supported types: `.html`, `.jsx`, `.tsx`, `.vue`, `.svelte`, `.astro`.

The path of this skill file is always available from context. Resolve all sub-file paths relative to it.

---

## Step 2 : Load the shared rules

Read `front-a11y-rules.md` (located in the same directory as this skill file).
It contains all accessibility rules, their severity levels, detection criteria, and fix instructions.

---

## Step 3 : Load the language-specific notes

Read the language file identified in Step 1 (located in the same directory as this skill file).
It contains syntax notes for that language, detection nuances that override or extend the shared rules, and framework-specific additional rules.

---

## Step 4 : Apply both

Apply all rules from `front-a11y-rules.md`, adjusted by the syntax notes and detection nuances from the language file.
Then apply the framework-specific rules from the language file.

---

## Output rules

### Audit mode

- Do **not** modify the file.
- Output a structured accessibility report using this format:

```
## Accessibility Audit : filename.ext

### 🔴 Critical
**[line N] Short issue title**
Element: `<img src="hero.jpg">`
Problem: The `alt` attribute is missing.
Fix: Add `alt="[description]"` for meaningful images, or `alt=""` for decorative ones.

---

### 🟠 Major
...

### 🟡 Minor
...

---

### Summary
| Severity | Count |
|---|---|
| 🔴 Critical | N |
| 🟠 Major | N |
| 🟡 Minor | N |
| **Total** | **N** |
```

- Group issues by severity: Critical → Major → Minor.
- If a severity has no issues, omit that section.

### Fix mode

- Apply all automatically-fixable issues directly to the file.
- Output the **complete corrected file** : do not truncate.
- Preserve all original formatting and indentation.
- After the file, output a **Fix Report**:

```
## Fix Report : filename.ext

### ✅ Fixed
- [line N] Short description of applied fix
- ...

### ⚠️ Requires manual attention
- [line N] Short description + suggested action
- ...
```