ARIA Progressbar Must Have an Accessible Name

No Comments

Quick Reference

Element Code: AC-015

Issue: Progress bar elements lack accessible names

Impact: Users cannot understand what process the progress bar represents

Fix: Add aria-label or aria-labelledby describing the process

Detection: axe DevTools, screen reader testing

What Is This Issue?

Progress bars show completion status of tasks. Without accessible names, screen reader users hear percentage values without knowing what operation is in progress.

Why This Matters for Your Website

Progress indicators are common in forms, uploads, and multi-step processes. Unlabeled progress bars leave users guessing about what is happening.

How to Fix This Issue

  1. Add descriptive aria-label: Example: aria-label="File upload progress"
  2. Include aria-valuenow: Current progress value
  3. Set aria-valuemin/max: Define the range

Tools for Detection

  • axe DevTools: Flags missing progressbar names

TL;DR (The Simple Version)

Your progress bars have no labels. Add aria-label to explain what process each bar is tracking (like "File upload progress" or "Form completion").

About SEO ProCheck

Technical SEO consulting and GEO strategy with 20 years of enterprise experience. Case studies, resources, and tools for search and AI visibility.

Work With Me

Technical SEO audits, GEO strategy, site migrations, and international SEO. Hourly consulting for teams who need hands-on support, not just reports.

Subscribe to our newsletter!

More from our blog