Accessible Progress Interfaces

All users are new users at some point, and if your application/product is complex enough then it'll have some steps before they've accomplished something worthwhile using it.

Progress interfaces and widgets are commonplace in modern software products that involve a layer of complexity.

Whether it's onboarding screens, to-do lists, or requirement lists; Progress UI indicators are a great way to feedback to users how much progress they have made in achieving a larger goal.

By showing what has been completed and what is left, a user can efficiently prioritise their tasks.

At work, I recently came across a progress interface in our designs.

In our user interface, we had an onboarding widget that describes the requirements expected of a user before they can carry out a significant interaction, making money.

Before the interaction is enabled to the user, they have to provide us with enough information so that we can process their request.

To illustrate how we could build this interface, I have put together a sandbox example that shows the user a number of completed onboarding steps, with a few outstanding.

View full sandbox at - codesandbox.io

To make the component accessible, a number of HTML properties were set on the component at the highest level, including -

• role="progressbar" - The progressbar role should be used for an element that displays the progress status for a task that takes a long time or consists of several steps.
• aria-valuemin - Defines the minimum allowed value for a range widget.
• aria-valuemax - Defines the maximum allowed value for a range widget.
• aria-valuenow - Defines the current value for a range widget.

By combining these properties on the onboarding component, the component is now highly accessible to all users of the product. Those with visual impairments will now be able to make sense of their progress on the product without visual feedback.

Instead, screen readers are able to relay back to the user that the component is a progress bar, what scale the progress bar is on, and how far they are in completing their tasks.

There are some conditions when implementing the aria-valuenow property.

For progress bar elements, assistive technologies should render the value to users as a percentage, calculated from aria-valuemin to aria-valuemax if both are defined.

So in our example sandbox, we could use the max value (4) to determine the percentage the current value is equal to. For example, if aria-valuenow was 2 and aria-valuemax is 4, then the percentage is 50%.

We can include the percentage value in the HTML document without needing to change our designs (sometimes the design is out of our hands as engineers). We can do this by visually hiding the percentage value with CSS using accessibly hidden text - a11yproject.com

I've been playing around with React Aria (developed by the Adobe engineering team) and found that they have a hook that fits the bill for this kind of widget.

It will take a lot of thinking away, and the need for remembering all of the necessary, and appropriate attributes you will need to make your component accessible.

This isn't a one size fits all package, and you will definitely need to consider if it's right for your product needs, but it's definitely a great way for React developers to become more familiar with aria attributes and how you can make your product more accessible to everyone.

View full sandbox at - codesandbox.io

useProgressBar

Documentation for useProgressBar in the React Aria package.

react-spectrum/packages/@react-aria/progress at main · adobe/react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. - react-spectrum/packages/@react-aria/progress at main · adobe/react-spectrum

@react-aria/progress

Spectrum UI components in React. Latest version: 3.4.0, last published: 19 days ago. Start using @react-aria/progress in your project by running `npm i @react-aria/progress`. There are 26 other projects in the npm registry using @react-aria/progress.

• role=progressbar
• role=progressbar
• aria-valuemin
• aria-valuemin
• aria-valuemax
• aria-valuemax
• aria-valuenow
• aria-valuenow