This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

Difference between revisions of "Using ARIA role=alert or Live Regions to Identify Errors"

From WCAG WG
Jump to: navigation, search
(Status)
(Status)
Line 2: Line 2:
  
 
*4th Nov, Ready for TF review.
 
*4th Nov, Ready for TF review.
*Combine with info from http://www.w3.org/WAI/GL/wiki/Using_ARIA_role_of_alert_for_Error_Feedback_in_Forms
+
*Combine with info from [http://www.w3.org/WAI/GL/wiki/Using_ARIA_role_of_alert_for_Error_Feedback_in_Forms Using_ARIA_role_of_alert_for_Error_Feedback_in_Forms]
 
* [https://www.w3.org/2002/09/wbs/35422/20130502tfaria2/ More ARIA techniques for 02 May 2013] surveyed by TF
 
* [https://www.w3.org/2002/09/wbs/35422/20130502tfaria2/ More ARIA techniques for 02 May 2013] surveyed by TF
  

Revision as of 23:16, 20 June 2013

Status

User Agent notes

  • Jaws 10 and higher supports this technique.

Applicability

This technique applies to HTML with WAI-ARIA.

This technique relates to Success Criterion (SC) 3.3.1. (Error identification):

Description

The purpose of this technique is to notify Assistive Technologies (AT) when an input error occurs. The aria-live attribute makes it possible for an AT (such as a screen reader) to be notified when an error appears or changes on the page. 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.

There are different methods to display an alert or assertive live region on the page and depending on how you create the error container or inject the error messages determines if it will work in the more difficult browsers/screen reader combinations like IE8+JAWS14 or VoiceOver+Safari. Read more about browser/AT support issues here: http://blog.paciellogroup.com/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/.

Examples

Four Live Examples of Simple Form Validation Using Only WAI-ARIA role=alert or aria-live=assertive http://pauljadam.com/demos/aria-alert-validation.html

This page has four different examples to demonstrate the differences in browser/AT support.

In the first two examples jQuery is used to test if the inputs are empty on submit and inject error messages into the live region containers if so. This has been tested successfully on OS X+Safari+VoiceOver. It works decently on iOS 6 but on the 2nd submit the live region is not spoken. NVDA2013.1+FF20 & JAWS14+FF20 work well with a difference being that role=alert is announced as "Alert" and aria-live=assertive does not include that extra text. NVDA2013.1+IE8 does NOT work. IE8+JAWS14 ONLY works with aria-live=assertive JAWS14+IE7 also works only with aria-live=assertive. There are recommendations on the web to use BOTH role=alert & aria-live=assertive on the error container for wider UA/AT support.

In the third example the error container is NOT present in the DOM on page load, instead the container is injected into the DOM on submit and then error messages are injected into the container. This method works perfectly with JAWS14/IE8/IE7, NVDA2013.1+FF20, & JAWS14+FF20, BUT it does NOT work at all in VoiceOver on OS X or iOS.

The fourth example is the most bulletproof in terms of screen reader/browser support. It uses use BOTH role=alert & aria-live=assertive on the error container.

NONE of the examples work in NVDA2013.1+IE8!

Injecting error messages into a container with role=alert already present in the DOM

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(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;
	});
});
</script>

<form name="signup" id="signup" method="post" action="">
  <p id="errors" role="alert"></p>
  <p>
    <label for="first">First Name (required)</label><br>
    <input type="text" name="first" id="first">
  </p>
  <p>
    <label for="last">Last Name (required)</label><br>
    <input type="text" name="last" id="last">
  </p>
  <p>
    <label for="email">Email (required)</label><br>
    <input type="text" name="email" id="email">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>

Injecting error messages into a container with aria-live=assertive already present in the DOM

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(e) {
	$('#signup2').submit(function() {
		$('#errors2').html('');
		if ($('#first2').val() === '') {
			$('#errors2').append('<p>Please enter your first name.</p>');
		}
		if ($('#last2').val() === '') {
			$('#errors2').append('<p>Please enter your last name.</p>');
		} 
		if ($('#email2').val() === '') {
			$('#errors2').append('<p>Please enter your email address.</p>');
		} 
		return false;
	});
});
</script>

<form name="signup" id="signup2" method="post" action="">
  <p id="errors2" aria-live="assertive"></p>
  <p>
    <label for="first2">First Name (required)</label><br>
    <input type="text" name="first" id="first2">
  </p>
  <p>
    <label for="last2">Last Name (required)</label><br>
    <input type="text" name="last" id="last2">
  </p>
  <p>
    <label for="email2">Email (required)</label><br>
    <input type="text" name="email" id="email2">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>

Injecting a container with role=alert into the DOM and then injecting error messages into that container

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(e) {
	$('#signup3').submit(function() {
		$('#errors3').remove();
		$('#signup3').prepend('<p id="errors3" role="alert"></p>');
		if ($('#first3').val() === '') {
			$('#errors3').append('<p>Please enter your first name.</p>');
		}
		if ($('#last3').val() === '') {
			$('#errors3').append('<p>Please enter your last name.</p>');
		} 
		if ($('#email3').val() === '') {
			$('#errors3').append('<p>Please enter your email address.</p>');
		} 
		return false;
	});
});
</script>

<form name="signup" id="signup3" method="post" action="">
  <p>
    <label for="first3">First Name (required)</label><br>
    <input type="text" name="first" id="first3">
  </p>
  <p>
    <label for="last3">Last Name (required)</label><br>
    <input type="text" name="last" id="last3">
  </p>
  <p>
    <label for="email3">Email (required)</label><br>
    <input type="text" name="email" id="email3">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>

Injecting error messages into a container with role=alert & aria-live=assertive already present in the DOM

<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(e) {
	$('#signup4').submit(function() {
		$('#errors4').html('');
		if ($('#first4').val() === '') {
			$('#errors4').append('<p>Please enter your first name.</p>');
		}
		if ($('#last4').val() === '') {
			$('#errors4').append('<p>Please enter your last name.</p>');
		} 
		if ($('#email4').val() === '') {
			$('#errors4').append('<p>Please enter your email address.</p>');
		} 
		return false;
	});
});
</script>

<form name="signup" id="signup4" method="post" action="">
  <p id="errors4" role="alert" aria-live="assertive"></p>
  <p>
    <label for="first4">First Name (required)</label><br>
    <input type="text" name="first" id="first4">
  </p>
  <p>
    <label for="last4">Last Name (required)</label><br>
    <input type="text" name="last" id="last4">
  </p>
  <p>
    <label for="email4">Email (required)</label><br>
    <input type="text" name="email" id="email4">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="Submit">
  </p>
</form>

Resources

Tests

Procedure

  1. Trigger the error that causes the content in the live region to appear or update.
  2. Determine that the live region content is automatically read by the AT.

Expected results

Test 2 is true.

This test probably needs input from other TF members.