Alerts - Progress
An alert is a message that is displayed to inform the user about important information. These alerts can be critical alerts, progress alerts, feedback alerts, status alerts and so on.
A progress alert is a mechanism used to notify the users about the current status or progress of a task that is being performed by the users.
NOTE:
- New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
- Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.
- The progress alert text MUST meet the minimum contrast requirement ratio of 4.5:1 for the standard text.
- The progress alert text MUST meet the minimum contrast requirement ratio of 3:1 for the large text or text with 14pts and bold.
- The non-text content such as icons or graphics MUST meet the minimum contrast requirement ratio of 3:1 in the progress alerts.
- Only color MUST NOT be used to convey progress alerts.
-
Depending on the context of the alert, provide appropriate ARIA roles such as status,
marqueeortimeron the<div>container containing the updates. -
Alternatively, attributes such as
aria-liveandaria-atomicCAN be provided. -
role=“status”
-
The
role="status"is used to communicate the status of an operation or a process, such as a progress bar or a message that appears when content is being loaded. -
Elements with the
role="status"have an implicitaria-livevalue ofpoliteand an implicitaria-atomicvalue oftrue.
-
The
-
role “marquee”
-
The
role="marquee"is used for the non-essential scrolling or moving content, such as stock tickers and ad banners. -
Elements with
role="marquee"have an implicitaria-livevalue ofoff.
-
The
-
role “timer”
- The
role="timer"is used for any kind of timer or clock, such as a countdown timer or stopwatch readout. -
Elements with
role="timer"have an implicitaria-livevalue ofoff.
- The
-
aria-live attribute
-
The
aria-liveattribute defines when assistive technology should inform the user of updates to content. -
The
aria-liveattribute have 3 values such asassertive,politeandoff. -
When
aria-live="assertive"is set, then screen readers will announce changes immediately as soon as it occurs on the page. -
When
aria-live="polite"is set then screen readers will announce changes when users are idle. -
When
aria-live="off"is set then screen readers will not announce any changes on the page. -
Ideally,
aria-live="polite"should be used except for important information and alerts.
-
The
-
aria-atomic attribute
- SHOULD be used along with
aria-liveattribute. -
The
aria-atomicattribute defines whether assistive technologies should present all, or only parts of, the changed region. -
The
aria-atomicattribute have 2 values such astrueorfalse. -
When
aria-atomic="true"is set then screen readers will announce entire region content including changed content. -
When
aria-atomic="false"is set then screen readers will announce only the changed content. -
Ideally,
aria-atomic="true"should be used so that screen reader users will understand the changed information effectively.
- SHOULD be used along with
-
Defining the progressbar
-
The
role="progressbar"is used to convey the progress status for tasks that takes a long time. -
Set
aria-valueminandaria-valuemaxto indicate the minimum and maximum progress indicator values. - Set
aria-valuenowattribute to indicate the current progress indicator value. - A progressbar image SHOULD be provided using CSS to indicate the current progress.
- Color alone SHOULD NOT be used to indicate the current progress.
- The progressbar image SHOULD be visible in Windows High Contrast Mode.
-
In case of textual updates to be conveyed,
aria-valuetextCAN be used wherein the string can be included.
For more information on progressbar, visit https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role .
-
The
For example,
<h2>Upload Resume</h2>
<input type="file" id="file-input">
<!-- Progress alert -->
<div class="progress-alert" role="alert">
<p>Uploading Progress: <span id="progress-percent">0%</span></p>
<!-- Progress bar -->
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Upload Resume Status">
<div class="progress-bar-fill" style="width: 0;" aria-hidden="true"></div>
</div>
</div>
<button>Upload</button>
A well-defined progress alert benefits majorly the below users.
- People with cognitive disabilities
- People with visual disabilities
- People using speech input
- People with limited dexterity
- People using keyboard only
<label for="file-input" id="upload">Upload Resume</label>
<input type="file" id="file-input">
<div class="progress-bar-alert">
<div class="progress-alert" id="progress-alert" role="alert">
<p>Uploading Progress: <span id="progress-percent">0%</span></p>
</div>
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Upload Resume Progress">
<div class="progress-bar-fill" style="width: 0;" aria-hidden="true"></div>
</div>
</div>
<button id="uploadFile">Upload</button>
.progress-alert {
position: relative;
margin: 1rem 0;
padding: 1rem;
border-radius: 5px;
text-align: center;
}
.progress-bar {
position: relative;
display: inline-block;
width: 100%;
height: 20px;
background-color: #ddd;
border-radius: 10px;
overflow: hidden;
}
.progress-bar-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #4caf50;
transition: width 0.3s ease-in-out;
}
.progress-alert p {
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: bold;
}
:focus {
border: 2px solid #000;
}
button {
background-color: #003057;
border: 1px solid #000;
color: #fff;
padding: 5px 10px;
text-align: center;
text-decoration: none;
font-size: 1.2rem;
border-radius: 5px;
cursor: pointer;
margin: 1rem auto;
}
button:focus {
outline: 2px solid #000;
outline-offset: 1px;
}
label {
display: block;
}
.progress-bar-alert {
background-color: #f5f5f5;
}
let button = document.getElementById('uploadFile');
let input = document.getElementById("file-input");
button.addEventListener('click', (e) => {
if (input.files.length > 0) {
let alertbox = document.querySelector('.progress-alert');
let progressalert = document.querySelector('.progress-bar');
let progressBar = document.querySelector('.progress-bar-fill');
let progressPercent = document.querySelector('#progress-percent');
let progressValue = 0;
let progressInterval = setInterval(function() {
progressValue += Math.floor(Math.random() * 25);
if (progressValue > 100) {
progressValue = 100;
}
progressalert.setAttribute('aria-valuenow', progressValue);
progressBar.style.width = progressValue + '%';
progressPercent.textContent = progressValue + '%';
if (progressValue === 100) {
clearInterval(progressInterval);
alertbox.classList.add('completed');
}
}, 1000);
} else {
alert('Please select a file');
}
});
Uploading Progress: 0%