Name ARIA progressbar elements clearly

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

ARIA progressbar elements must have an accessible name (Rule ID: aria-progressbar-name)

Applicable Standards

• WCAG 2.0, 2.1, 2.2 Level A (1.1.1)

• EN 301 549

• Deque Best Practice

Impact

Serious level impact affecting:

• Blind users

• Low vision users

• Users with mobility impairments

Proper Implementation

• Provide descriptive accessible names for progressbar elements

• Use one of these methods:

  • aria-label attribute with non-empty value

  • aria-labelledby referencing an element with visible text

  • title attribute with descriptive text

• Ensure labels clearly describe the progress indicator's purpose

Examples of Correct Usage

1. Using aria-label for an Accessible Name:
   The aria-label clearly describes the purpose of the progress bar ("File upload in progress"), ensuring it is announced by screen readers.

2. Using aria-labelledby to Reference Visible Text:
   The aria-labelledby attribute references the visible text ("Downloading updates..."), providing a clear accessible name for the progress bar.

3. Using the title Attribute for a Simple Name:
   The title attribute provides a descriptive name ("Processing payment") for the progress bar, which is announced by screen readers.

4. Including Both Purpose and Status:
   The aria-label includes both the purpose ("Loading dashboard") and the current status ("60%"), giving users complete context.

5. Using aria-valuetext for Custom Status Text:
   The aria-valuetext provides a custom status message ("Nearly halfway done") that screen readers announce instead of the default numeric value.

Common Errors to Avoid

1. Missing Accessible Name:
   Without an aria-label, aria-labelledby, or title, the progressbar lacks an accessible name, leaving screen reader users unaware of its purpose.

2. Non-Descriptive Name:
   The aria-label ("Progress") is too vague and does not provide meaningful context about the progress bar's purpose.

3. Visible Label Without ARIA Reference:
   The visible label ("Uploading files...") is not connected to the progressbar via aria-labelledby, so screen readers cannot associate the label with the progress bar.

4. Incorrect Use of aria-valuetext:
The aria-valuetext ("80%") repeats the numeric value already provided by aria-valuenow, offering no additional value to screen reader users.

5. Using role="progressbar" for Non-Progress Indicators:
   The progressbar role is misused for a static indicator ("Complete"). This role should only be applied to elements showing dynamic progress.

Rationale

• Enables screen reader users to understand the progress indicator

• Provides context for progress values

• Essential for monitoring task completion

• Ensures users understand what is being measured

• Critical for task progress comprehension

Evaluation Method

1. Inspect the Code

   • Check that:

     • Each progressbar element has a descriptive accessible name via aria-label, aria-labelledby, or title.

     • The purpose and status of the progress bar are clear.

     • aria-valuemin, aria-valuemax, and aria-valuenow are used appropriately.
       
       

2. Test with Assistive Technology

   • Use a screen reader (e.g., NVDA, JAWS, or VoiceOver) to confirm:

     • The progress bar's purpose and current status are announced clearly.

     • Custom status messages (aria-valuetext) are read as intended.
       
       

Evaluation Checklist