Meter Accessible Names Check
Flags meter elements that lack a label so screen reader users know what the value measures.
- Repository
- thedaviddias/Front-End-Checklist
- Stars
- 74,632
- Licence
- MIT
- Files
- 2 files
What it does
This skill teaches an AI agent to review web page markup for HTML meter elements (or elements with role="meter") that have no accessible name. A meter shows a value such as battery level or storage used, and without a label a screen reader user hears only a number. Once installed, the agent checks for missing aria-label or aria-labelledby attributes and suggests how to add them, with a short explanation of why it matters.
Great for
- Front-end developers reviewing pages or components that display gauges, progress-style measurements or strength indicators
- Accessibility reviewers doing a checklist pass on a web interface
- Design-system teams checking shared components for proper labelling
Skip it if
- Projects that do not use meter elements or role="meter", since the check has nothing to examine
- Full accessibility audits: the skill covers only this one rule and does not test keyboard use or colour contrast in depth, and the agent's review is not a substitute for testing with real assistive technology
Try asking
- “Review this HTML component and tell me if any meter elements lack an accessible name.”
- “Check my password strength widget for accessibility problems with its meter element.”
- “Add proper labels to the storage usage meter in this page.”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the MIT licence and an attribution note.
aria-meter-name.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip aria-meter-name.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip aria-meter-name.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 (after JavaScript runs) rather than source templates, so the agent sees the actual markup.
- Ask the agent to also name the exact element and the label it recommends, then verify in browser accessibility tooling.
- The description is broad; give a specific component or file so the review stays focused on this rule.
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.