Example of using required, invalid and alert

I've attached an example to use role=alert to present an error message to 
the user.  The first "favorite number" field checks for the existence of a 
value and that the value is an integer.  The check is performed on the 
onblur event of the input field.  Window-Eyes will speak the alert but 
focus has moved to the next field and then the label of the next field is 
not spoken.  I tried setting focus back to the input field with error but 
didn't get that working (at least from the onblur event handler).

The second test field is for a required field of age.   This is tested 
when you press the "check age" button.  In this case there are two error 
messages. One if the field is empty and the other if it has a non-integer 
value. In the case of an error  focus is set back to the age field. 
Setting focus back to the age field works when I invoke the test function 
from a button.  Although I would really prefer to be able to do this from 
an onblur (without having to add an onfocus handler to the next item 
receiving focus).

When either field has an error I add the invalid attribute.  Window-Eyes 
will speak invalid when focus goes to the invalid field.   In the case of 
the required field, when it is invalid, required is no longer spoken. Do 
we expect that there can be more than one state - both required and 
invalid?  Should I remove the required field when I set the invalid role? 

I also tested with JAWS 8.  It works similar to Window-Eyes in that it 
will speak the alert - although often multiple times. JAWS did speak the 
invalid or required attributes. 
I had trouble navigating this page with JAWS, it seemed to have trouble 
with the label placement.  I validated the page with the W3C validator 
except for the validation errors caused by the ARIA role and state values 
and tabindex, it did pass validation.  I would be curious to hear the 
results from people who have more experience using JAWS. 

This is an XHTML file with a content-type of application/xhtml+xml so it 
can only be opened properly  in Firefox or Opera, although I did not test 
in Opera.




Becky Gibson
Web Accessibility Architect
                                                       
IBM Emerging Internet Technologies
5 Technology Park Drive
Westford, MA 01886
Voice: 978 399-6101; t/l 333-6101
Email: gibsonb@us.ibm.com