Decorative Elements Accessibility Check
Reviews HTML for images and icons that screen readers should skip, using alt and aria-hidden rules
- Repository
- thedaviddias/Front-End-Checklist
- Stars
- 74,632
- Licence
- MIT
- Files
- 2 files
What it does
When installed, the agent reviews web page markup and components for decorative images, icons and SVGs that screen readers would announce needlessly. It checks that decorative images use empty alt text, decorative icons use aria-hidden, and decoration is not exposed to assistive technology. It is also told not to flag harmless decorative elements unless there is a real semantic, focus or layout problem.
Great for
- Front-end developers reviewing HTML or component code for accessibility
- Designers or QA reviewers checking whether decorative graphics are announced by screen readers
- Teams wanting a quick first-pass accessibility check on a snippet
Skip it if
- Full accessibility audits: the skill covers only one narrow rule about decorative content and cannot replace testing with real assistive technology
- Judging whether an image is truly decorative; the agent must infer this from the snippet, so context-dependent images may be misclassified
Try asking
- “Review this component's markup and tell me which decorative icons need aria-hidden”
- “Check whether the divider images on this page should have empty alt text”
- “Audit this HTML snippet for decorative elements that screen readers will announce”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the MIT licence and an attribution note.
decorative-elements.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip decorative-elements.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip decorative-elements.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Paste the rendered HTML or the full component, not just a fragment, so the agent can judge whether an image is really decorative.
- Verify suggested fixes with a browser accessibility inspector or a screen reader, since the agent works from text alone.
- Ask for references/rule.md details when you need framework-specific examples.
What's inside
- references/rule.md
- SKILL.md
Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.