Alert Role=”Alert” and ARIA-Invalid


The ARIA role alert (role="alert") is a great way to make error messages accessible. Or for that matter any type of user message. When the role is used correctlly, the JAWS screen reader will automatically read the alert text that is dymanically created.

ARIA-Invalid (aria-invalid) is also used to indicate the field is either correct or incorrect.

Values for aria-invalid include:

  • aria-invalid=”grammer” – a grammitical error has occured.
  • aria-invalid=”true” – The value is invalid
  • aria-invalid=”false” – The value is valid. No error was detected.
  • aria-invalid=”spelling” – A spelling error has occured.

Works With

Role=”alert” Works with
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes
aria-invalid Works with
Browser Screen Reader Results
IE 9 JAWS 12 No
FF 4 JAWS 12 No

Example 1:

Instructions: This will validate a form field and present an error message.
Use the “Check My Data” button to hear the alert, and use the Clear Field button to reset the message.



Code


function ARIA_Role_Alert_On() {
  document.getElementById('name_alert').innerHTML = 'Here is an error message!';
  document.getElementById("name_text").setAttribute("aria-invalid","true");
}
function ARIA_Role_Alert_Off() {
  document.getElementById('name_alert').innerHTML = '';
  document.getElementById("name_text").setAttribute("aria-invalid","false");
}
<p class="input">
<label 
  id="name_label" 
  for="name_text">
    Enter your name:
</label>
<input type="text" 
  id="name_text" size="15" 
  aria-labelledby="name_label" aria-invalid="false"/>
</p>
<p id="name_alert" role="alert"></p>
<p class="input">    
<input 
  id="data_check" 
  type="button" 
  value="Check My Data"  
  onClick="ARIA_Role_Alert_On();"  />
<input 
  id="data_clear" 
  type="button" 
  value="Clear Field"  
  onClick="ARIA_Role_Alert_Off();"  />
</p>

Standards:

Comments are closed.