MoreLesson 169Free preview

Progress Bars

This lesson is part of How To · All levels

Summary

This lesson discusses making progress bars to show the percentage of completion of tasks. Progress can be displayed with an inbuilt progress or div element whose width is set to a percentage. In addition to visual display, progress values need to be conveyed to the screen reader through the ARIA attribute.

Key points

Use the <progress> element when only a semantic built-in indicator is needed
For the custom bar, use the role="progressbar" with the aria-valuemin, aria-valuemax, and aria-valuenow
Adjust the width of the filling element in percent and display the progression number as text
Update the values of JavaScript consistently, including ARIA labels and attributes

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.