skills / design

fixing-accessibility

what it does

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

Verified Before and after: 2 models 1 try per case View source Download .zip

Compare the answers

Answers from Claude Sonnet 5.5 and GPT-6.1 Sol · try 1 of 1

Same request, same model, once with the skill and once without. Read both and judge for yourself.

“Can you check this toolbar for accessibility problems?”

Source material given with the request

<div class="toolbar"> <div class="btn" onclick="saveDoc()">Save</div> <button onclick="deleteDoc()"><svg viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2m-9 0v14h10V6"/></svg></button> <button onclick="share()"><svg viewBox="0 0 24 24"><path d="M4 12v8h16v-8M12 3v13M7 8l5-5 5 5"/></svg> Share</button> <a href="/help/editor">Click here</a> to learn about the editor. </div>
with the skill
There are **three accessibility issues** in this snippet: 1. **Save is not keyboard accessible** ```html <div class="btn" onclick="saveDoc()">Save</div> ``` A clickable `div` is not focusable or operable with Enter/Space by default. Replace it with a native button: ```html <button type="button" class="btn" onclick="saveDoc()">Save</button> ``` 2. **Delete has no accessible name** ```html <button onclick="deleteDoc()"><svg ...>...</svg></button> ``` Screen-reader users cannot determine what this icon-only button does. Add an accessible label and hide the decorative SVG: ```html <button type="button" onclick="deleteDoc()" aria-label="Delete document"> <svg aria-hidden="true" viewBox="0 0 24 24">...</svg> </button>
Show the rest (38 more lines)
``` Also add `aria-hidden="true"` to the Share SVG; its visible “Share” text already names that button. 3. **The help link text is not descriptive** ```html <a href="/help/editor">Click here</a> to learn about the editor. ``` “Click here” does not identify the destination when users navigate by links. Use descriptive link text: ```html <a href="/help/editor">Learn about the editor</a>. ``` ### Minimally corrected version ```html <div class="toolbar"> <button type="button" class="btn" onclick="saveDoc()">Save</button> <button type="button" onclick="deleteDoc()" aria-label="Delete document"> <svg aria-hidden="true" viewBox="0 0 24 24"> <path d="M3 6h18M8 6V4h8v2m-9 0v14h10V6"/> </svg> </button> <button type="button" onclick="share()"> <svg aria-hidden="true" viewBox="0 0 24 24"> <path d="M4 12v8h16v-8M12 3v13M7 8l5-5 5 5"/> </svg> Share </button> <a href="/help/editor">Learn about the editor</a>. </div> ``` **Also verify in the rendered page:** visible keyboard focus and sufficient text/icon contrast—the snippet does not include enough CSS to assess those. `type="button"` prevents unintended form submission if these controls are inside a form. Keep the wrapper as a plain `div` unless you also implement the keyboard behavior expected of an ARIA toolbar; adding `role="toolbar"` alone is not necessary.
without
Yes—there are a few accessibility problems and some improvements worth making. ### Findings - **Save is not keyboard-accessible.** The clickable `<div>` isn’t focusable by default and lacks button semantics and built-in Enter/Space activation. Replace it with a native `<button>`. - **Delete has no accessible name.** Its SVG does not supply a meaningful text alternative. Add `aria-label="Delete document"` or visually hidden text to the button. - **Hide decorative SVGs from assistive technology.** Once the buttons have text labels, use `aria-hidden="true"` on their icons. `focusable="false"` also prevents SVG focus in older browsers. - **“Click here” is not descriptive link text.** Prefer “Learn about the editor,” which makes sense when navigating links out of context. - **The grouping is only visual.** `class="toolbar"` provides no semantic grouping. A named `role="group"` is a straightforward option. If you use `role="toolbar"` instead, implement the toolbar keyboard pattern, including arrow-key navigation and managed focus. ### Suggested markup ```html <div class="toolbar" role="group" aria-label="Document actions"> <button type="button" class="btn" onclick="saveDoc()"> Save </button> <button type="button"
Show the rest (22 more lines)
onclick="deleteDoc()" aria-label="Delete document" > <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"> <path d="M3 6h18M8 6V4h8v2m-9 0v14h10V6"/> </svg> </button> <button type="button" onclick="share()"> <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"> <path d="M4 12v8h16v-8M12 3v13M7 8l5-5 5 5"/> </svg> Share </button> </div> <p><a href="/help/editor">Learn about the editor</a>.</p> ``` `type="button"` prevents unintended form submission if these controls are inside a form. **Also check in the rendered UI:** visible keyboard focus, text and icon contrast, target sizes, and focus handling or announcements after saving, deleting, or opening the sharing interface. Those cannot be assessed from this snippet alone.

Answers are shown exactly as the model wrote them, from the first try, and nothing is picked by hand.

The models

2 models

Claude Sonnet 5.5

made by Anthropic

claude-sonnet-5-5 · revision not reported by the provider

1 try per case · tested 3 Nov 2026

GPT-6.1 Sol

made by OpenAI

gpt-6.1-sol · revision not reported by the provider

1 try per case · tested 3 Nov 2026

The tasks

written by Carte Blanche
accordion-minimal-fix

“Fix the accessibility issue in this accordion. Please keep the change small, we can't refactor this component right now.”

contrast-and-focus-css

“Accessibility audit on our marketing site CSS, please.”

custom-modal-focus

“Here's our custom modal. Keyboard users say it's hard to use. What's wrong and how do I fix it?”

signup-form-errors

“Our signup form fails accessibility review. What needs fixing?”

toolbar-names-and-buttons

“Can you check this toolbar for accessibility problems?”

Install

Download the .zip and unzip it. Put its files, in a folder named fixing-accessibility, here:

Claude Code~/.claude/skills/Every project. For one project only, use .claude/skills/ inside it.
Codex~/.agents/skills/Every project. For one repository only, use .agents/skills/ inside it.
Cursor~/.cursor/skills/Cursor also reads the Claude Code and Codex folders above.

Then start a new session and ask for what the skill does. Other agents that read SKILL.md have their own skills folder; check their docs.

Coming after launch: get skills from inside your agent, no download needed.