Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
-The purpose of this technique is to alert people that an input error has occurred. Using role="alertdialog" creates a notification. This notification should be modal with the following characteristics:
-
aria-label or aria-labelledby attribute gives the alertdialog an accessible name.alertdialog contains at least one focusable element, and the focus should move to that element when the alertdialog opens.alertdialog whilst it is open.alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.Note that the alertdialog should not be present in a way that it will be accessed by assistive technology until it is needed. One way to do this is not to include it in the static HTML and instead to insert it into the DOM via script when the error condition is triggered. The insertion would correspond to the following HTML sample.
-
This example shows how a notification using role="alertdialog" can be used to notify someone they have entered invalid information.
<div role="alertdialog" aria-labelledby="alertHeading">
- <h1 id="alertHeading">Error</h1>
- <p>Employee's Birth Date is after their hire date.
- Please verify the birth date and hire date.</p>
- <button>Save and Continue</button>
- <button>Return to page and correct error</button>
+
+
+
+ Using aria-alertdialog to Identify Errors
+
+
+ Using aria-alertdialog to Identify Errors
+
+
+ When to Use
+ Technologies that support Accessible Rich Internet Applications (WAI-ARIA).
+
+
+ Description
+ The purpose of this technique is to alert people that an input error has occurred. Using role="alertdialog" creates a notification. This notification should be modal with the following characteristics:
+
+ aria-label or aria-labelledby attribute gives the alertdialog an accessible name.- The
alertdialog contains at least one focusable element, and the focus should move to that element when the alertdialog opens.
+ - The tab order is constrained within the
alertdialog whilst it is open.
+ - When the
alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.
+
+
+
+ Examples
+
+ Alert dialog
+ This example shows how a notification using role="alertdialog" can be used to notify someone they have entered invalid information.
+<div aria-modal="true" role="alertdialog" aria-labelledby="alert-heading">
+ <h1 id="alert-heading">Error</h1>
+ <p>Employee's Birth Date is after their hire date. Please verify the birth date and hire date.</p>
+ <button type="button">Return to page and correct error</button>
</div>
- Working example: Alert dialog.
-
-
- Tests
- Procedure
-
- - Trigger the error that causes the
alertdialog to appear.
- - Determine that the
alertdialog contains at least one focusable element, and the focus moves to that element when the alertdialog opens.
- - Determine that the tab order is constrained within the
alertdialog while it is open, and when the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.
- - Examine the element with
alertdialog applied.
- - Determine that either the
aria-label or aria-labelledby attribute has been correctly used to give the alertdialog an accessible name.
- - Determine that the contents of the
alertdialog identifies the input error.
- - Determine whether contents of the
alertdialog suggests how to fix the error.
-
- Expected Results
-
- - Checks #2, #3, #5 and #6 are true. For Success Criterion 3.3.3, check #7 is also true.
-
- Resources
-
-
-
- Working example: Using aria-alertdialog to Identify Errors
+.
+ alertdialog to appear.alertdialog contains at least one focusable element, and the focus moves to that element when the alertdialog opens.alertdialog while it is open, and when the alertdialog is dismissed, the focus moves back to the position it had before the alertdialog opened, if possible.alertdialog applied.aria-label or aria-labelledby attribute has been correctly used to give the alertdialog an accessible name.alertdialog identifies the input error.alertdialog suggests how to fix the error.role=alert or Live Regions to Identify ErrorsTechnologies that support Accessible Rich Internet Applications (WAI-ARIA).
The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The The following example uses role=alert which is equivalent to using aria-live=assertive.
- In the example there is an empty error message container element with aria-atomic=true and an aria-live property or alert role present in the DOM on page load. The error container must be present in the DOM on page load for the error message to be spoken by most screen readers. aria-atomic=true is necessary to make Voiceover on iOS read the error messages after more than one invalid submission.
- jQuery is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. Each time a new submit is attempted the previous error messages are removed from the container and new error messages injected.
- The following example uses role=alert which is equivalent to using In the example there is an empty error message container element with JavaScript is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. Each time a new submit is attempted the previous error messages are removed from the container and new error messages injected. HTML with Accessible Rich Internet Applications. This technique demonstrates how One of the above two situations may be true for a field which has programmatically associated label and / or instructions that conveys data format, a data range, or the While it is always preferable to programmatically associate specific error description with the failed field, the page's design or the framework employed may sometimes constrain the author's ability to do so. In these cases, authors may programmatically set This ARIA attribute has to be set / turned on programmatically. It should not be set to “true” before input validation is performed or the form is submitted. Setting When visible text is used to programmatically identify a failed field and / or convey how the error can be corrected, setting The A portion of the jQuery code and the HTML form markup follow: This technique demonstrates how The The Below is the rendered HTML code for the email address field in Example 1: When an invalid email address is entered by the user such as "samexample.com" (instead of sam@example.com), the HTML code is: And when no data is entered in the email field, the HTML code is: These are the two JavaScript functions that set the In this example, jQuery code: jQuery is used to add aria-invalid or aria-describedby attributes as well as the class attribute and append the error text. This is the code that inserts aria-invalid and class="error" but does not associate the error text "incorrect data" with the control programmatically: CSS Code: For each form control that relies on JavaScript is needed to add For each form control that relies on This example shows how role="alertdialog" can be used to notify someone they have entered invalid information. This example shows how Employee's Birth Date is after their hire date. Please verify the birth date and hire date.aria-live attribute makes it possible for an AT (such as a screen reader) to be notified when error messages are injected into a Live Region container. The content within the aria-live region is automatically read by the AT, without the AT having to focus on the place where the text is displayed.
@@ -8,40 +10,70 @@
Injecting error messages into a container with role=alert already present in the DOM
- $(document).ready(function(e) {
- $('#signup').submit(function() {
- $('#errors').html('');
- if ($('#first').val() === '') {
- $('#errors').append('<p>Please enter your first name.</p>');
- }
- if ($('#last').val() === '') {
- $('#errors').append('<p>Please enter your last name.</p>');
- }
- if ($('#email').val() === '') {
- $('#errors').append('<p>Please enter your email address.</p>');
- }
- return false;
- });
+ aria-live=assertive.aria-atomic=true and an aria-live property or alert role present in the DOM on page load. The error container must be present in the DOM on page load for the error message to be spoken by most screen readers. aria-atomic=true is necessary to make Voiceover on iOS read the error messages after more than one invalid submission.// Get the form element
+const form = document.getElementById('signup');
+
+// Listen for when the form is submitted
+form.addEventListener('submit', function(event) {
+
+// Stop the form from actually submitting (so we can check it first)
+event.preventDefault();
+
+// Get references to the input fields
+const firstNameInput = document.getElementById('first');
+const lastNameInput = document.getElementById('last');
+const emailInput = document.getElementById('email');
+
+// Get the element where we'll show error messages
+const errorsContainer = document.getElementById('errors');
+
+// Create an empty array to collect error messages
+const errorMessages = [];
+
+// Check if first name is empty
+if (firstNameInput.value === '') {
+ errorMessages.push('<li>Please enter your first name.</li>');
+}
+
+// Check if last name is empty
+if (lastNameInput.value === '') {
+ errorMessages.push('<li>Please enter your last name.</li>');
+}
+
+// Check if email is empty
+if (emailInput.value === '') {
+ errorMessages.push('<li>Please enter your email address.</li>');
+}
+
+// Clear the errors container first
+// (This helps screen readers notice when new content appears)
+errorsContainer.innerHTML = '';
+
+// Wait 500 milliseconds, then show the errors
+setTimeout(function() {
+ // If there are any errors, wrap them in a list and display them
+ if (errorMessages.length > 0) {
+ errorsContainer.innerHTML = '<ul>' + errorMessages.join('') + '</ul>';
+ }
+}, 500);
});<form name="signup" id="signup">
<p id="errors" role="alert" aria-atomic="true"></p>
<div>
- <label for="first">First Name (required)</label><br>
- <input type="text" name="first" id="first">
+ <label for="first">First Name (required)</label>
+ <input autocomplete="given-name" type="text" name="first" id="first">
</div>
<div>
- <label for="last">Last Name (required)</label><br>
- <input type="text" name="last" id="last">
+ <label for="last">Last Name (required)</label>
+ <input autocomplete="family-name" type="text" name="last" id="last">
</div>
<div>
- <label for="email">Email (required)</label><br>
- <input type="text" name="email" id="email">
+ <label for="email">Email (required)</label>
+ <input autocomplete="email" type="text" name="email" id="email">
</div>
<div>
<input type="submit" name="button" id="button" value="Submit">
@@ -52,9 +84,9 @@ Injecting error messages into a container with role=alert already present in
Tests
Procedure
-
role=alert or aria-live=assertive attribute is present in the DOM at page load.role=alert or aria-live=assertive attribute is present in the DOM (Document Object Model). at page load.Resources
Using
aria-invalid to Indicate An Error FieldWhen to Use
+
+
+
+ Using
+
+ aria-invalid to Indicate An Error FieldWhen to Use
Description
-aria-invalid may be employed to specifically identify fields that have failed validation. Its use is most suitable when:
-
-
-required property.aria-invalid to "true" on the fields that have failed validation. This is interpretable mainly by assistive technologies (like screen readers / screen magnifiers) employed by users who are vision impaired. When a field has aria-invalid set to “true”, VoiceOver in Safari announces invalid data when the field gets focus; JAWS and NVDA notify the error as an invalid entry.aria-invalid to "false" is the same as not placing the attribute for the form control at all. Quite understandably, nothing is conveyed by assistive technology to users in this case.aria-invalid to "true" is not required from a strict compliance standpoint but may still provide helpful information for users.Examples
- Using aria-invalid on required fields
+ Description
- aria-invalid attribute is used on required fields that have no input. A message above the form conveys that form submission has failed due to this.<script>
-...
-...
- if ($('#first').val() === '') {
- $('#first').attr("aria-invalid", "true");
-$("label[for='first']").addClass('failed');
- }
- if ($('#last').val() === '') {
- $('#last').attr("aria-invalid", "true");
-$("label[for='last']").addClass('failed');
- }
- if ($('#email').val() === '') {
- $('#email').attr("aria-invalid", "true");
-$("label[for='email']").addClass('failed');
- }
-...
-...
-</script>
+ aria-invalid may be used to identify fields that have failed validation. The aria-invalid attribute can be used as part of a custom validation pattern instead of using the HTML required attribute coupled with specific input types (for example: type="email").aria-invalid attribute should not be set to "true" before input validation is performed. Setting aria-invalid to "false" is the same as not placing the attribute for the form control.Examples
+ Using
+ aria-invalid on required fieldsaria-invalid attribute is used on required fields that are empty when the form is submitted. A message above the form tells the user that there are form fields that need to be completed.HTML:
+
-
- <form name="signup" id="signup" method="post" action="">
+ <p id="errors" aria-live="assertive"></p>
<div>
<label for="first">First Name (required)</label>
- <input type="text" name="first" id="first">
+ <input aria-invalid="false" autocomplete="given-name" id="first" name="first" type="text">
</div>
<div>
<label for="last">Last Name (required)</label>
- <input type="text" name="last" id="last">
+ <input aria-invalid="false" autocomplete="family-name" id="last" name="last" type="text">
</div>
<div>
<label for="email">Email (required)</label>
- <input type="email" name="email" id="email">
+ <input aria-invalid="false" autocomplete="email" id="email" name="email" type="text">
</div>
<div>
- <input type="submit" name="button" id="button" value="Submit">
+ <button id="button" type="submit">Sign Up</button>
</div>
</form>Identifying errors in data format
+CSS:
+
- label.failed {
+ background:#CE0000;
+ color:#fff;
+}aria-invalid and aria-describedby are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using aria-describedby, and aria-invalid makes it easier to programmatically find fields with errors.
-<div class="control">
- <div>
- <label for="email">Email address: [*]</label>
- <input type="email" name="email" id="email" class="error"
- aria-invalid="true" aria-describedby="err_1">
- </div>
- <span class="errtext" id="err_1">Error: Incorrect data</span>
-</div>JavaScript:
+aria-invalid="true" attribute and then create the validation error message:
+
+ const requiredFields = ['first', 'last', 'email'];
+let errorCount = 0;
+
+requiredFields.forEach(fieldId => {
+ const field = document.getElementById(fieldId);
+ if (field.value.trim() === '') {
+ field.setAttribute('aria-invalid', 'true');
+ document.querySelector(`label[for='${fieldId}']`).classList.add('failed');
+ errorCount++;
+ }
+});
+
+if (errorCount > 0) {
+ errText.textContent = `Please complete all ${errorCount} required ${errorCount === 1 ? 'field' : 'fields'} and retry`;
+}Identifying errors in data format
+ aria-invalid and aria-describedby are used together to indicate an error when the personal identification number (PIN), email address, or start date are not in the expected format. The error message is associated with the field using aria-describedby, and aria-invalid makes it easier to programmatically find fields with errors.Features
+
+
+aria-invalid="true" attribute on a form field if the entered data is missing or not in the expected format:
+
+
+aria-describedby attribute.HTML:
-<div class="control">
- <div><label for="email">Email address: [*]</label>
- <input type="email" name="email" id="email" class="error"
- aria-invalid="true" aria-describedby="err_2">
- </div>
- <span class="errtext" id="err_2">Error: Input data missing</span>
+ <label for="pin4">PIN * (4 digits)</label>
+ <input id="pin4" name="pin4" pattern="\d{4}" size="4" type="text" aria-describedby="pin4-errormsg" aria-invalid="true" class="error">
+ <span class="errtext" id="pin4-errormsg">Error: PIN is required</span>
</div>
-$(errFld).attr("aria-invalid", "true").attr("class", "error");
-// Suffix error text:
-$(errFld).parent().append('<span class="errtext">Error: Incorrect data</span>');input.error {
- border: red thin solid;
+CSS:
+
-
- .error {
+ border: #CE0000 thin solid;
}
-
-span.errtext {
- background-color: #EEEEFF;
- background-image:url('images/iconError.gif');
- background-position:right;
- background-repeat:no-repeat;
- border: red thin solid;
+
+.errtext {
+ background: #EEEEFF url('error-icon.svg') no-repeat right 0.25em center;
+ color:#CE0000;
+ display:block;
margin-bottom: 1em;
- padding: .25em 1.4em .25em .25em;
+ max-width: fit-content;
+ padding: .25em 1.6em .25em .25em;
}Tests
- Procedure
- aria-invalid to convey a validation failure:JavaScript:
+aria-invalid, aria-describedby, and class attributes as well as appending the error text. This function is the relevant part of the larger validation script:
+
+
+ function addFieldError(field, message) {
+ const errId = field.id + '-errormsg';
+ const errDiv = document.createElement('div');
+ errDiv.className = 'errtext';
+ errDiv.id = errId;
+ errDiv.textContent = message;
+
+ field.parentNode.appendChild(errDiv);
+ field.setAttribute('aria-describedby', errId);
+ field.setAttribute('aria-invalid', 'true');
+ field.classList.add('error');
+}Tests
+ Procedure
+ aria-invalid to convey a validation failure:
-
aria-invalid is not set to true when a validation failure does not exist.aria-invalid is set to true when a validation failure does exist.aria-invalid is not set to true when a validation failure does not exist.aria-invalid is set to true when a validation failure does exist.Expected Results
+ Expected Results
Resources
-
-
-
+
+ Resources
+
Using ARIA live regions or
-
+ role=alert to identify errorsUsing ARIA live regions or
+
+role=alert to identify errorsUsing aria-alertdialog to Identify Errors
-Using
+ aria-alertdialog to Identify Errorsrole="alertdialog" can be used to notify someone they have entered invalid information.
+
Error
+