Skip to content
Get packs

Meter Accessible Names Check

Flags meter elements that lack a label so screen reader users know what the value measures.

Source Download skill
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.”
Step-by-step guide: how to use Meter Accessible Names CheckInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    aria-meter-name.zip
  2. 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. 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.