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

[Eli Cochran]

I went ahead and reviewed these problems in JAWS with a person here at Berkeley so that I could validate them before writing them up. And, yes, they are problems. 

In the process we also found the Sign In to be pretty inaccessible because it requires a rollover to activate the UserName and Password fields, the Sign In area should also respond to a click to activate it and should probably be an actual link so that it is read by the screenreader without resorting to an ARIA role, although the navigation roles for that top bar wouldn't hurt. 

So the bugs: 
SAKIII-3093: Gritter messages are invisible to a screen reader
SAKIII-3095: After form validation, the invalid fields are not identified as being invalid in a way that is easily read by the screen reader

I've written up a few more as well that we found while tracking these down.
https://jira.sakaiproject.org/secure/IssueNavigator.jspa?mode=hide&requestId=12906

- Eli 

On May 25, 2011, at 4:19 PM, Chris Roby wrote:

> Eli,
> 
> Thanks for all the work here, this is really important. Would you mind creating JIRAs in Sprint 110 for us to address these issues specifically, or is there another step we should take before we do that?
> 
> -- 
> Chris Roby
> 
> On May 25, 2011, at 12:42 PM, Eli Cochran wrote:
> 
>> 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
>> 
>> _______________________________________________
>> sakai-ui-dev mailing list
>> sakai-ui-dev at collab.sakaiproject.org
>> http://collab.sakaiproject.org/mailman/listinfo/sakai-ui-dev
> 
> _______________________________________________
> sakai-ui-dev mailing list
> sakai-ui-dev at collab.sakaiproject.org
> http://collab.sakaiproject.org/mailman/listinfo/sakai-ui-dev

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

Eli Cochran
User Interaction Developer &
Manager of User Experience Design
Educational Technology Services, UC Berkeley

"The opportunity lost by increasing the amount of blank space is gained back with enhanced attention to what remains."
    - John Maeda



-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://collab.sakaiproject.org/pipermail/accessibility/attachments/20110526/2de4c2be/attachment.html