Progress Bars & Meters, Accurately Describe Information For Accessibility

by Jack Pritchard

In my previous blog post, I discussed creating accessible progress interfaces and how you can include them in your products.

I mentioned in the post that in my current place of work we have a component library that included a progress bar React component.

Progress bar filled 50%

We have used this component in several parts of our interface to describe progress in completing tasks, but recently I had found some uses of the component in places which I questioned.

Label above progress bar "You have requested £30,000 of your £60,000 limit."

Take this instance for example, where we are describing the amount of money a customer has requested us to loan to them. We show the amount requested (current) and show their credit limit (max) so that they understand how much they could request, and feedback how much they are currently requesting.

Seems pretty standard, and a great visual representation of the values would be our progress bar component. However, semantically the component doesn't fit the bill at all. We aren't showing the progress a user has made in a set of steps, or in achieving a larger goal. Instead, we are showing values that represent a defined range.

A meter is a graphical display of a numeric value within a defined range. For example, showing battery percentage. A meter is not appropriate for values that do not have a meaningful maximum limit. Meters should not be used to indicate progress (for example loading), this should be communicated with the element.

Adapting our Component


In my previous article on accessible progress interfaces I showed how we can create a styled div element which represents a progress bar with the property

on the div to describe the purpose of the element to users.