Skip to content
Get packs

Accessible Progress Bar Names

Reviews progress bars so screen reader users know what task each one measures

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill teaches the agent to check web pages and components for progress bars (elements with role="progressbar") and make sure each has a clear accessible name, such as via aria-label or aria-labelledby. When reviewing markup, the agent flags progress bars that lack a name, suggests a label describing what is being measured, and checks that value attributes are present when the value is known. It is a focused accessibility review guide rather than a general tool.

Great for

  • Front-end developers reviewing loading indicators, upload meters or progress components before shipping
  • Accessibility reviewers auditing a design system or component library
  • Teams who want a consistent, checklist-driven accessibility review from an AI assistant

Skip it if

  • Projects with no progress bars or loading indicators, since the rule will not apply
  • Replacing a full accessibility audit or real testing with assistive technology, because the skill only gives guidance and cannot verify how screen readers actually announce content

Try asking

  • “Review this upload component's markup and tell me whether the progress bar has an accessible name”
  • “Add an accessible label to the progress bar in this checkout page”
  • “Check my design system's progress components for missing aria-valuenow, aria-valuemin and aria-valuemax”
Step-by-step guide: how to use Accessible Progress Bar NamesInstall, 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-progressbar-name.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip aria-progressbar-name.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip aria-progressbar-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 or component code along with the page context so the agent can judge what the progress bar measures.
  • Confirm suggested labels with a screen reader such as NVDA, VoiceOver or JAWS, since the skill itself does not test real announcements.
  • Ask the agent to also review keyboard and focus behaviour if the progress bar sits inside an interactive widget, as the skill's wider guidance covers this.

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.