Further ARIA Enhancements

 

 

 

  1. aria-required and aria-describedby added to text box.
  2. Additional instructions assigned tooltip role.
  3. aria-hidden toggled and [aria-hidden=true] {display:none;} in CSS used to toggle visual display.

 

Example Code

<div id="invalidzip" aria-hidden="true">I'm sorry, that is not a properly formatted ZIP code. ZIP must be 5 or 9 digits. Please try again.</div>
<label for="zip">Enter your ZIP code:</label>
<input id="zip" onfocus="resetAlert();" onblur="checkzip(this.value);"
aria-required="true"
aria-describedby="ziptip">
<span id="ziptip" role="tooltip" aria-hidden="true">Required. ZIP must be 5 or 9 digits.</span>