[WG: Accessibility] Sakai OAE, accessible validation and Gritter

[Eli Cochran]

I'll preface this by saying that I haven't actually tested the implementation with a screen reader, I just noticed the following areas of concern by looking at the rendered DOM. 

One of my designers was asking about the accessibility of the validation she was designing, so I started looking at the validation in OAE. 

Gritter 
It would appear from a cursory look that the Gritter (Growl-like) messages are pretty inaccessible. They could be made more accessible by adding role="alert". (role=alert automatically gets the region read by the screen reader.)

Form Validation
So there are number of validation models in the OAE right now (I'm working on a JIRA for this). I took a quick look at the validation which add <labels> for remediation of the form elements. (Pretty sure that this uses the jquery validate plugin). This is great... almost there. The <label> tag associates the validation text with the form element. However, it then should also have an aria-invalid=true attribute attached to the element and a role="alert" attribute set on the label. 

Example:
<input type="text" class="profilesection_generalinfo_content required error" value="" id="profilesection_generalinfo_publications_elements_751260285_placeofpublication" name="Place of publication" title="Place of publication" aria-invalid="true" >
<label for="profilesection_generalinfo_publications_elements_751260285_placeofpublication" generated="true" class="error" style="display: block; " role="alert">This field is required.</label> 

There's a nice little blog entry on the technique here: http://www.punkchip.com/2010/12/aria-enhance-form-validation/
A little more discussion of aria-invalid and aria-required here: http://www.w3.org/TR/wai-aria-practices/#ariaform

Probably could add this programmatically via the validate plugin. 

In general these are the kinds of things that we need to validate in the accessibility review. 

Thanks,
Eli 

. . . . . . . . . . .  .  .   .    .      .         .              .                     .

Eli Cochran
manager of user experience
user interaction developer
ETS, UC Berkeley

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://collab.sakaiproject.org/pipermail/accessibility/attachments/20110525/12fc2f11/attachment.html