Components menu
Progress bar
A progress bar is a visual representation of the progress of a task or process. It is commonly used in web applications to provide feedback to users about the status of an operation, such as file uploads, downloads, or completion of a task.
Accessibility
Accessibility for website progress bars is crucial to ensure that all users, including those with disabilities, can effectively use and interact with the component.
Color Contrast
Ensure sufficient colour contrast between the progress bar and its background to make it easily distinguishable. The Web Content Accessibility Guidelines (WCAG) 2.2 recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Colour options
- Green -
.progress-bar--success - Yellow -
.progress-bar--warning - Red -
.progress-bar--danger
Semantic HTML and role
Use full aria attributes, even when using a native. It’s recommended to add full aria attributes, even when using a native progress element.
The progress bar role defines an element that displays the progress status for tasks that take a long time. It includes properties like aria-valuemin, aria-valuemax, and aria-valuenow.
ARIA structure for screen readers to announce
The ARIA creates this structure:
- Name - From aria-labelledby="progresslabel" → “Progress”
- Value - From aria-valuenow="25" Screen readers convert this to spoken text → “25 percent”
- Role - From role="progressbar" Read as → “progress bar” or “progress indicator”
These three elements combined form the spoken output.
Keyboard navigation
Ensure keyboard navigation works with Tab, Shift+Tab, and Enter to advance steps.
Error messaging
Provide accessible error messaging that explains what to do next if a step fails.
HTML
<div class="progress"
role="progressbar"
aria-labelledby="progresslabel"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
aria-valuetext="25% complete">
<span id="progresslabel" class="visually-hidden"> Progress of form completion </span>
<div class="progress-bar progress-bar--success" style="width: 25%"> 25% </div>
</div>
CSS
/* Progress bar
------------------------------------ */
.progress {
--bs-progress-height: 1.5rem;
--bs-progress-font-size: 1rem;
--bs-progress-bg: var(--grey-four);
--bs-progress-border-radius: 0.375rem;
--bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--bs-progress-bar-color: #ffffff;
--bs-progress-bar-bg: var(--scottish-teal);
--bs-progress-bar-transition: width 0.6s ease;
display: flex;
height: var(--bs-progress-height);
overflow: hidden;
font-size: var(--bs-progress-font-size);
background-color: var(--bs-progress-bg);
border-radius: var(--bs-progress-border-radius);
margin-bottom: 15px;
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: var(--bs-progress-bar-color);
text-align: center;
white-space: nowrap;
background-color: var(--bs-progress-bar-bg);
transition: var(--bs-progress-bar-transition);
}
.progress-bar--info {
color: #ffffff !important;
background-color: var(--scottish-teal) !important;
}
.progress-bar--success {
color: #000000 !important;
background-color: var(--success-green) !important;
}
.progress-bar--warning {
color: #000000 !important;
background-color: var(--warning-yellow) !important;
}
.progress-bar--danger {
color: #ffffff !important;
background-color: var(--error-red) !important;
}