Aria Progressbar Name
Testing & Qualityaria-progressbar-nameAria Progressbar Name is an Agent Skill for testing & quality published in the thedaviddias/Front-End-Checklist repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for progress bars. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
How to use this skill
Bring this guide into your coding agent with a prompt tailored to the tool you use.
- Open your project in Codex.
- Copy and paste the prompt below.
- Review files and risks before approving any action.
Inspect the Agent Skill at https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/aria-progressbar-name/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/aria-progressbar-name, but wait for my approval before writing files or running scripts.
Copying this prompt does not install or run the skill. Review third-party files before use.
Provide accessible names for progress bars
Without an accessible name, screen reader users will only hear that a progress bar exists but won't know what task or process it represents.
Quick Reference
- Use
aria-labeloraria-labelledbyto name progress bars - Ensure the name describes what the progress indicates
- Avoid redundant text like "progress" in the label
- Provide
aria-valuenow,aria-valuemin, andaria-valuemaxwhen the value is known - Visual progress meters should use real progress semantics rather than decorative divs when they communicate status
Check
Check if all progress bar elements (role="progressbar") have an accessible name via aria-label or aria-labelledby.
Fix
Add an aria-label or aria-labelledby attribute to the progress bar to describe what it is measuring.
Explain
Explain why progress bars need accessible names for screen reader users to understand the context of the loading state.
Code Review
Review the rendered markup and interactive states that affect Provide accessible names for progress bars. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/accessibility/aria-progressbar-name