Guide · Agent skill
How to use the Meter Accessible Names Check agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The aria-meter-name skill is an agent skill for Claude that reviews web page markup for HTML meter elements, or elements with role="meter", that have no accessible name. It is written for front-end developers, accessibility reviewers and design-system teams who want a second pair of eyes on gauges, progress-style measurements and strength indicators. After reading this guide you will know how to install the skill, how to ask for a review in plain language, and what the agent will and will not check.
Meter Accessible Names Checkthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the aria-meter-name ZIP from the skill page on this directory.
- 2Unzip the skill. Extract the folder so it contains SKILL.md and references/rule.md.
- 3Place or upload it. Put the folder in ~/.claude/skills/ for personal use or .claude/skills/ for a project, or upload it under Settings → Capabilities → Skills in the Claude apps.
- 4Make a request. Ask the agent to review specific markup or components for meter elements that lack an accessible name.
- 5Review the suggestions. Check each flagged element, the proposed aria-label or aria-labelledby, and the explanation given.
- 6Verify the fix. Test the corrected page with browser accessibility tooling or assistive technology before shipping.
What an agent skill is and what this one makes the agent do
An agent skill is a folder containing a SKILL.md file and optional reference files. When the skill is installed and a request matches its description, the agent loads these instructions and follows them for the task.
This skill teaches the agent to check for meter elements or role="meter" that lack an accessible name. A meter shows a value such as battery level or storage used. Without a label, a screen reader user may hear only a number such as '50%' and not know whether it refers to battery life, storage space or password strength. Once installed, the agent looks for missing aria-label or aria-labelledby attributes, suggests how to add them and gives a short explanation of why it matters.
- Checks elements that are <meter> or have role="meter"
- Flags those with no accessible name
- Suggests aria-label or aria-labelledby as the fix
- Explains why context helps screen reader users
Install the skill from the ZIP or upload it in Claude
Download the ZIP for the skill from the aria-meter-name page on this directory and unzip it. For a personal install, place the unzipped folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. The skill is meant to be picked up when you ask for a review of rendered HTML, components or design-system patterns that involve meter elements. Name the file, component or page and say what you want checked, for example whether the meters have accessible names.
The skill's description focuses on reviewing rendered HTML, interactive components and design-system patterns. Asking for a meter label check in those terms gives the best match.
- "Check the meters in components/StorageBar.html for missing accessible names."
- "Review this dashboard markup. Do any role=\"meter\" elements lack aria-label or aria-labelledby?"
- "Look at our shared design-system gauge component and tell me if the meter needs a label."
Example: reviewing a meter and fixing it
The reference file gives this pattern. A meter with no context is flagged, and two corrected versions are shown: one that uses aria-labelledby pointing to a visible label, and one that uses aria-label for a simple measurement.
Expect the agent to point at the exact element, explain that the value has no name, and offer one of these fixes. Check the suggested markup in your own page before you ship it.
<label id="cpu-label">CPU Usage</label>
<meter id="cpu" aria-labelledby="cpu-label" min="0" max="100" value="45">45%</meter>
<meter value="0.6" aria-label="Cloud storage space used"></meter>
<meter value="80" min="0" max="100"></meter>What the skill needs and how it handles scripts and network
The skill lists no required tools. It does not run scripts and does not use the network, according to its listing. Its files are references/rule.md and SKILL.md, and the agent works from the markup you provide.
Because it runs no scripts and makes no network calls, the main safety consideration is the content you share with the agent, such as page markup. Review the ZIP contents before installing any skill, as you would with any downloaded code.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
Limits: what this skill does not cover
The skill covers one rule. It does not perform a full accessibility audit, and it does not test keyboard use or colour contrast in depth. The agent's review is not a substitute for testing with real assistive technology.
If the project has no meter elements or role="meter", the check has nothing to examine. For a broader review, pair this skill with manual testing and browser accessibility tooling.
- Not for projects without meter or role="meter" elements
- Not a full accessibility audit
- Does not test keyboard behaviour or contrast in depth
- Verify fixes with browser accessibility tools or assistive technology
What people use it for
- Reviewing a dashboard that shows battery, storage or CPU usage as meters
- Checking a shared design-system gauge or progress-style component for a label
- Doing one rule of a manual accessibility checklist pass on a web interface
- Checking password strength indicators that use a meter element
Frequently asked questions
How do I install the aria-meter-name skill?
Download the ZIP from the skill page and unzip it. Place the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps, you can upload it under Settings → Capabilities → Skills.
Is the aria-meter-name skill free?
The skill is listed under the MIT licence. This page does not state any price, so check the source repository for licence terms before reuse.
What does the skill require to run?
Its listing shows no required tools. It runs no scripts and uses no network, so it works from the markup you provide to the agent.
What does the agent actually check?
It checks for meter elements and elements with role="meter" that lack an accessible name, meaning no aria-label or aria-labelledby. It then suggests how to add one and explains why context matters for screen reader users.
Can this skill replace a full accessibility audit?
No. The skill covers only this one rule. It does not test keyboard use or colour contrast in depth, and its review is not a substitute for testing with real assistive technology.
Does it work for elements other than meter?
The skill targets <meter> and role="meter" only. For progress bars or other widgets, you would need a different skill or a manual check.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you build or review interfaces with gauges, meters or strength indicators and want a quick, repeatable check that each one has a name. Pick something else if your project has no meter elements, or if you need a full accessibility audit covering keyboard use, contrast and real assistive technology testing.
Download the skill