Difference between revisions of "ARIA errormessage property"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "<html> <h2> Initial valid state</h2> <label for="startTime"> Please enter a start time for the meeting: </label> <input id="startTime" type="text" aria-errormessage="msg...")
 
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
* aria-errormesssage
 +
* aria-live
 +
Note: while this test hides some of the errormessages the specification indicates they must not be hidden when the field is invalid
 
<html>
 
<html>
 +
  <style>
 +
    [aria-live] {
 +
      color:#3359ec;
 +
    }
 +
  </style>
 
   <h2> Initial valid state</h2>
 
   <h2> Initial valid state</h2>
 
   <label for="startTime"> Please enter a start time for the meeting: </label>
 
   <label for="startTime"> Please enter a start time for the meeting: </label>
Line 6: Line 14:
  
 
   <h2> Initial valid state but visible </h2>
 
   <h2> Initial valid state but visible </h2>
   <label for="startTime"> Please enter a start time for the meeting: </label>
+
   <label for="startTime1"> Please enter a start time for the meeting: </label>
   <input id="startTime" type="text" aria-errormessage="msgID" value="" aria-invalid="false">
+
   <input id="startTime1" type="text" aria-errormessage="msgID" value="" aria-invalid="false">
   <span id="msgID" aria-live="off"> Invalid time:  the time must be between 9:00 AM and 5:00 PM" </span>
+
   <span id="msgID1" aria-live="off"> Invalid time:  the time must be between 9:00 AM and 5:00 PM" </span>
  
 
   <h2> User has input an invalid value </h2>
 
   <h2> User has input an invalid value </h2>
   <label for="startTime"> Please enter a start time for the meeting: </label>
+
   <label for="startTime2"> Please enter a start time for the meeting: </label>
   <input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30 PM" >
+
   <input id="startTime2" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30 PM" >
   <span id="msgID" aria-live="assertive" style="visibility:visible"> Invalid time:  the time must be between 9:00 AM and 5:00 PM" </span>
+
   <span id="msgID2" aria-live="assertive" style="visibility:visible"> Invalid time:  the time must be between 9:00 AM and 5:00 PM" </span>
  
 
   <h2> User has input an invalid value but not visible </h2>
 
   <h2> User has input an invalid value but not visible </h2>
   <label for="startTime"> Please enter a start time for the meeting: </label>
+
   <label for="startTime3"> Please enter a start time for the meeting: </label>
   <input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30 PM" >
+
   <input id="startTime3" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30 PM" >
   <span id="msgID" aria-live="assertive" style="visibility:hidden"> Invalid time:  the time must be between 9:00 AM and 5:00 PM" </span>
+
   <span id="msgID3" aria-live="assertive" style="visibility:hidden"> Invalid time:  the time must be between 9:00 AM and 5:00 PM" </span>
  
 
</html>
 
</html>
 +
==Assistive technology support==
 +
* JAWS 18 (Tested with Firefox)- does not announce content referred to by errormessage
 +
* NVDA 2017.2 (Tested with Firefox)- does not announce content referred to by errormessage
 +
* iOS 10.3.3 and VoiceOver does not announce anything
 +
 
[[category:ARIA]]
 
[[category:ARIA]]

Latest revision as of 16:46, 9 June 2017

  • aria-errormesssage
  • aria-live

Note: while this test hides some of the errormessages the specification indicates they must not be hidden when the field is invalid

Initial valid state

Initial valid state but visible

Invalid time: the time must be between 9:00 AM and 5:00 PM"

User has input an invalid value

Invalid time: the time must be between 9:00 AM and 5:00 PM"

User has input an invalid value but not visible

Assistive technology support

  • JAWS 18 (Tested with Firefox)- does not announce content referred to by errormessage
  • NVDA 2017.2 (Tested with Firefox)- does not announce content referred to by errormessage
  • iOS 10.3.3 and VoiceOver does not announce anything