Affordable error handling with WAI-ARIA - best practice?
I would like to inform assistive technology users (like braille or scroller) about invalid input fields using WAI-ARIA-Attributes .
I've tried two approaches that work, but I don't know which one is better. Share your thoughts on this.
Approach 1
Using the described aria. SR and Braille read the label if the error message does not exist.
Possible downside: It seems that some older SRs have problems with wai-aria attributes. Also more global identifiers.
<input
id="{{unique-id}}"
type="text"
aria-describedby="{{unique-id}}-error-message"
>
<label
for="{{unique-id}}"
>
{{title}}
</label>
<p
id="{{unique-id}}-error-message"
role="alert"
>
{{error-message}}
</p>
Approach 2
Using the title and aria. Backward compatibility name. Possible disadvantage: redundant text that must be sent from server to client.
<input
id="{{unique-id}}"
type="text"
title="{{title}} {{error-message}}"
aria-label="{{title}} {{error-message}}"
>
<label
for="{{unique-id}}"
>
{{title}}
</label>
<p>
{{error-message}}
</p>
A combination of both approaches suspends attributes in the following order (if supported):
- aria-mark
- name
- aria-describedby
Any thoughts on best practice on this?
source to share
I would suggest you take a look at the ARIA states added explicitly for form validation purposes:
- aria-required (and / or HTML5 required )
- aria-invalid
This code is from Mozilla - visit the site for more information.
<input name="email" id="email" aria-required="true" reqiured
aria-invalid="false" onblur="checkValidity('email', '@', 'Invalid e-mail address');"/>
<script>
function checkValidity(aID, aSearchTerm, aMsg) {
var elem = document.getElementById(aID);
var invalid = (elem.value.indexOf(aSearchTerm) < 0);
if (invalid) {
elem.setAttribute("aria-invalid", "true");
updateAlert(aMsg); // show your ARIA alert message
} else {
elem.setAttribute("aria-invalid", "false");
updateAlert(); // remove your ARIA alert message
}
}
</script>
source to share
Option 3: Using Client Side Validation with the Validation API
This requires Javascript, but you make sure that the browser will initially execute the error message and provide this information to the Accessibility API.
document.getElementById("{{unique-id}}").setCustomValidity("21 characters expected");
I would not use this solution without using sufficient visual information that would not require the user to submit the form before viewing the error message. If your approach can answer this question, I also like G139: Creating a mechanism to allow users to navigate to errors
source to share
1. aria-describedby
<label aria-live="assertive" aria-describedby="error-info">User ID(required)
<span class="error-message" id="error-info">User ID cannot be empty, this will be your screen name</span>
</label>
<input type="text" class="error-decoration"/>
Note: aria-live, aria-describedby added at the time of error, otherwise only label text would display.
2. aria-labelledby
<div id="name">Name</div>
<input type="text" aria-labelledby="Your full name to be entered" />
3. aria-label - when there is no label present
<input type="text" aria-label="Name"/>
source to share