Difference between revisions of "Aria live error handling"

From Level Access Web Labs
Jump to navigation Jump to search
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
Note: This example sets focus to the error message on submit -- the live region test is triggered on blur when the letter t is entered in the email field and the change is triggered with CSS change from display none to block.
 +
 
<html lang=en-us>
 
<html lang=en-us>
 
<head>
 
<head>
 +
  <script type="text/javascript">
 +
  // function to display constraints as well as error messages.
 +
  function myFunction(){
 +
    document.getElementById("errMsg").style.display="block";
 +
    document.getElementById("errMsg2").style.display="block";
 +
    document.getElementById("top").focus();
 +
  }
  
<script type="text/javascript">
+
  // function validating the username text field and displaying an error is the value is 't'
// function to display constraints as well as error messages.
+
  function check ()
function myFunction(){
+
  {
 
+
    var txtValue = document.getElementById("uname").value;
document.getElementById("errMsg").style.display="block";
+
    if (txtValue == "t"){
document.getElementById("errMsg2").style.display="block";
+
      document.getElementById("errMsg2").style.display="block";
document.getElementById("top").focus();
+
      document.getElementById("uname").focus();}
}
+
    else {
// function validating the username text field and displaying an error is the value is 't'
+
      document.getElementById("btnSubmit").focus();
function check ()
+
    }
{
+
  }
var txtValue = document.getElementById("uname").value;
 
 
 
if (txtValue == "t"){
 
document.getElementById("errMsg2").style.display="block";
 
document.getElementById("uname").focus();}
 
else {
 
document.getElementById("btnSubmit").focus();
 
}
 
}
 
  
 
</script>
 
</script>
Line 27: Line 27:
 
</head>
 
</head>
 
<body>
 
<body>
<div id="top" tabindex="-1">
+
  <div id="top" tabindex="-1">
<label id="myLbl" for="x">Email
+
  </div>
<input type="text" id="x" aria-describedby="z"/>
 
<div id="errMsg" aria-live="polite" style="display:none">Error - Your email is not valid</div>
 
</label>
 
 
 
<div id="z">This is the constraint pop-up</div>
 
  
 +
  <label id="myLbl" for="x">Email
 +
    <input type="text" id="x" aria-describedby="z"/>
 +
    <div id="errMsg" aria-live="polite" style="display:none">Error - Your email is not valid</div>
 +
  </label>
  
<label id="myLbl2" for="uname">Username
+
  <div id="z">This is the constraint pop-up</div>
<input type="text" id="uname" aria-describedby="constraint2" onblur="check();"/>
 
<div id="errMsg2" aria-live="polite" style="display:none">Error - Your username is not valid</div>
 
</label>
 
  
<div id="constraint2">This is the constraint pop-up for username</div>
+
  <label id="myLbl2" for="uname">Username
 +
    <input type="text" id="uname" aria-describedby="constraint2" onblur="check();"/>
 +
    <div id="errMsg2" aria-live="polite" style="display:none">Error - Your username is not valid</div>
 +
  </label>
  
 +
  <div id="constraint2">This is the constraint pop-up for username</div>
 
<button id="btnSubmit" onclick="myFunction();">click me</button>
 
<button id="btnSubmit" onclick="myFunction();">click me</button>
</div>
+
  </div>
 
</body>
 
</body>
 
</html>
 
</html>
 +
 
==Test results for ARIA live error handling ==
 
==Test results for ARIA live error handling ==
 
{| class="wikitable" border="1"
 
{| class="wikitable" border="1"
Line 54: Line 55:
 
! Notes
 
! Notes
 
|- style="background-color:#99FF99;"
 
|- style="background-color:#99FF99;"
|JAWS||Internet Explorer||Works as expected When the error occurs the error message is announced automatically.  The link is in the JAWS links list.  When enter is pressed on the link the link is activated.
+
|JAWS||Internet Explorer||Works as expected When the error occurs the error message is announced automatically.  
|- style="background-color:#99FF99;"
+
|-style="background-color:#99FF99;"
 
|JAWS||Firefox||Works as expected When the error occurs the error message is announced automatically.
 
|JAWS||Firefox||Works as expected When the error occurs the error message is announced automatically.
 
|- style="background-color:#FFFF99;"
 
|- style="background-color:#FFFF99;"
|NVDA||Internet Explorer|| Does not Work as expectedWhen navigating to the e-mail or user name field using the TAB key the error message is always announced .  This occurs even if the error message is not displayed.
+
|NVDA||Internet Explorer|| Does not Work as expected When navigating to the e-mail or user name field using the TAB key the error message is always announced .  This occurs even if the error message is not displayed.
 
|- style="background-color:#FFFF99;"
 
|- style="background-color:#FFFF99;"
 
|NVDA||firefox|| Does Not Work as expected When Navigating to the e-mail or user name edit fields with the TAB key or the ARROW keys in browse mode the error message is always announced.
 
|NVDA||firefox|| Does Not Work as expected When Navigating to the e-mail or user name edit fields with the TAB key or the ARROW keys in browse mode the error message is always announced.

Latest revision as of 01:30, 10 November 2018

Note: This example sets focus to the error message on submit -- the live region test is triggered on blur when the letter t is entered in the email field and the change is triggered with CSS change from display none to block.

This is the constraint pop-up
This is the constraint pop-up for username

Test results for ARIA live error handling

AT Browser Notes
JAWS Internet Explorer Works as expected When the error occurs the error message is announced automatically.
JAWS Firefox Works as expected When the error occurs the error message is announced automatically.
NVDA Internet Explorer Does not Work as expected When navigating to the e-mail or user name field using the TAB key the error message is always announced . This occurs even if the error message is not displayed.
NVDA firefox Does Not Work as expected When Navigating to the e-mail or user name edit fields with the TAB key or the ARROW keys in browse mode the error message is always announced.
VoiceOver Safari Works as expected, The The error message is announced when the error occurs, and when navigating to a field with an error.
Talkback Firefox Works as expected, TheThe error message is announced when navigating to a field with an error.
Talkback Chrome Works as expected, The error message is announced when navigating to a field that contains an error.