Progress Bars & Meters, Accurately Describe Information For Accessibility
Hey! Just so you know, this article is over 2 years old. Some of the information in it might be outdated, so take it with a grain of salt. I'm not saying it's not worth a read, but don't take everything in it as gospel. If you're curious about something, it never hurts to double-check with a more up-to-date source!
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.
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.
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.