This is an unpublished editor’s draft that might include content that is not finalized. View the published version

Skip to content

Technique ARIA27:Using ariaNotify to convey the status of a progress bar

About this Technique

This technique relates to 4.1.3 Status Messages (Sufficient).

This technique applies to content using WAI-ARIA.

Techniques are examples of ways to meet Web Content Accessibility Guidelines (WCAG). They are not required to meet WCAG. Content can satisfy the normative requirements of WCAG even if it does not use any of the documented techniques. See About WCAG Techniques.

Description

This technique demonstrates how to use the ariaNotify method to programmatically convey the status of a file upload progress bar to assistive technologies.

Note

As of April 2026, ariaNotify is still an experimental feature in web browsers and assistive technologies.

Until it is more broadly supported, only use ariaNotify as a progressive enhancement in combination with other more reliable techniques such as ARIA25: Using an ARIA live region to convey the status of a progress bar.

Example

This example simulates the progress of uploading a document. The progress of the upload is communicated visually to the user with a progress bar. As the progress bar is updated, text is also explicitly passed to the ariaNotify method to trigger an announcement by screen readers.

The following code can also be seen as a working example.

<div class="upload-container">
  <p id="upload-progress-label">Uploading document: <strong>report.pdf</strong></p>
  <div
    aria-labelledby="upload-progress-label"
    role="progressbar"
    aria-describedby="progress-text"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="0"
    id="upload-progress"></div>
    <button id="start-upload" type="button">Start Upload</button>
document.ariaNotify("…");

Tests

Procedure

  1. Verify if the page contains a progress bar that dynamically changes to visually convey status information to the user.
  2. Using a screen reader, check that updates to the progress bar are conveyed to the user, without focus being moved programmatically to the progress bar/the status message

Expected Results

  • #1 and #2 are true.
Back to Top