Progress bar: Progress bar is missing appropriate role and/or attributes

Rule

The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies.

Background

Every user interface control must have a role along with any applicable states and properties so that screen reader users know how to interact with the control. Native HTML elements - such as <button>, <a>, <input>, <select> - already have a role, and their necessary states and properties - such as the checked/unchecked state of a checkbox - are automatically conveyed so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant role(s) and any applicable states and properties using ARIA as well as expected keyboard interactions.

How to Fix

The ARIA role of progressbar is used for an element that displays the progress status for tasks that take a long time, such as a file download. A progressbar indicates that the user's request has been received and the application is making progress toward completing the requested action.

Fix this issue by using the following roles and attributes:

1. Use role="progressbar" on the element.
2. Apply the following attributes to the progressbar:

a. aria-valuemin b. aria-valuemax 3. If the rate of progress is known, apply aria-valuenow and update the value when the visual progress indicator is updated.