How to Create an Accessible Progress Bar With React

Progress bars are great for user engagement because they provide a goal to achieve. Instead of staring at a web page waiting on a resource, you see a progress bar filling up. Progress bars should not be limited to sighted users only. Everyone should be able to understand your progress bar with ease.

So how do you build an accessible progress bar with React?

Create a new component called ProgressBar.js and add the following code:

const ProgressBar = ({progress}) => {
return (


{`${progress}%`}


);
};

export default ProgressBar;

The first div element is the container and the second div is the actual progress bar. The span element holds the progress bar percentage.

For accessibility purposes, the second div has the following attributes:

The aria-valuemin and aria-valuemax attributes are not necessary if the progress bar maximum and minimum values are 0 and 100 since HTML defaults to these values.

You can style the progress bar using inline styles or a CSS-in-JS library like styled-components. Both of these approaches provide a simple way of passing props from the component to the CSS.

You need this functionality because the width of the progress bar depends on the progress value passed in as props.

You can use these inline styles:

const container = {
height: 20,
width: "100%",
backgroundColor: "#fff",
borderRadius: 50,
margin: 50
}

const bar = {
height: "100%",
width: `${progress}%`,
backgroundColor: "#90CAF9",
borderRadius: "inherit",
}

const label = {
padding: "1rem",
color: "#000000",
}

Modify the return portion of the component to include styles as shown below:

{`${progress}%`}

Render the progress bar like this:

This displays a progress bar with 50 percent complete.

You can now create an accessible progress bar with percentages that you can reuse in any part of your application. With React, you can create independent UI components like these and use them as building blocks of a complex application.