Trying to make a RichFaces application accessible (ADA/Secti

[amayingenta]

Hi, I'm working on an application using JBoss Seam (2.0.2) and Rich Faces (3.2.2). Recently we found out that accessibility had become a priority. This hadn't been taken into account in the choice of technologies for the project, and was really only introduced as a requirement at a late stage.

Searching this forum (and related ones like the seamframework forum), there hasn't been much discussion about accessibility, and it doesn't appear to have been a significant consideration in the design of richfaces. Please don't take that as a complaint - I'm impressed with richfaces in general, and accessibility (as I'm finding) is a very complicated issue.

In one thread from a while ago someone was asked to provide concrete examples of accessibility issues. Here are some of the issues I'm facing (some of which I've already found ways to address):

Modal Panels
- Need to focus panels when opened for keyboard/screen reader users.
- Need to make it easy to close panel (e.g. using Esc key)

These two issues I've addressed by writing a JavaScript function (making use of Prototype) that opens the panel, focuses the specified field element, and observes the key press event for the generated panel:

function openPanel(panel, focus, closeFn) {
 // open panel
 $(panel).component.show();
 // focus and select the form field
 $(focus).activate();
 // trap escape keypress and close panel. The CDiv suffix is added by RichFaces
 // to the div it creates representing the main panel body
 Event.observe(panel+'CDiv', 'keypress', function(event) {
 if (Event.KEY_ESC == event.keyCode) {
 closeFn();
 event.stop();
 }
 });
}

Seems to work in at least IE7 and FF on Windows - feel free to point out something that could be a problem with this.

Another thing I did was to use a close image as shown in one of the examples for modal panels, but because this uses an onclick event on an image it is not accessible to some users. Changing this to a link makes it appear when tabbing through the panel.

Data Scroller
This is what I'm currently working on. Because the datascroller uses table cells with onclick it's not accessible for keyboard/screen reader users.

I need to be able to tab to the active controls, and when the datatable is redrawn I need to return the focus to somewhere appropriate (probably the "select" link I have for the first item in the table).

I see that I can override the contents of the table cells and even add links, e.g.

<f:facet name="next"><a href="#" onclick="return false;">Next</a></f:facet>

but I don't have any control over where the focus goes. I could call my own function from the link that fires the same event as the table cell, but I'm at the limits of my JavaScript knowledge (especially when it comes to events).

I'd appreciate any suggestions.

There are some other issues I'm looking into:
- Error handling when submitting entire page - e.g. show error section where each error is a link to the section in the page where the error occurred.
- Error handling when just submitting part of a page (e.g. I dynamically add rows to a datatable). I'm considering using ARIA active regions.

I'd be interested in knowing if anyone else is working on accessibility for a RichFaces site.

Regards,
Andrew

[nparik1]

Andrew,
Were you able to resolve this or get further information? I am struggling w/ the same problem.
Nick

[amayingenta]

Hi, if you're asking about the Data Scrollers I was able to make some progress, and get them to the point that they're usable for keyboard-only and screen-reader users.

Firstly I turned off most of the controls that are on by default, and I concentrated on making the remaining next and previous controls accessible:

fastControls="hide" boundaryControls="hide" stepControls="auto"

I overrode the next and previous facets like this:

<f:facet name="previous">
 <s:span><a href="#" onclick="return false;"><h:graphicImage value="/images/previous.gif" alt="Previous page"/></a></s:span>
 </f:facet>
<f:facet name="next">
 <s:span><a href="#" onclick="return false;"><h:graphicImage value="/images/next.gif" alt="Next page"/></a></s:span>
</f:facet>

The link makes them focusable (and in the tab order), and screen readers will generally read the alt text of images contained in links. The onclick returns false because when you override the facet you're just overriding the presentation and this is still inside a td tag with an onclick handler - so I leave it to the td handler to do the actual paging.

Finally I added an oncomplete to the datascroller tag to move the focus to a heading I added above my table that lists the contents of the table (e.g. "items 11 to 20 of 32", which has tabindex="-1" so that it can be programatically focused:

oncomplete="$('formid:divid').focus()"

Actually my implementation is a bit more complex than that because I'm trying to handle issues with IE7 and JAWS 10 which has problems reading dynamically replaced content, but this works fine in FF3 and IE8RC1.

Because I'm using this in several places I put it into a custom facelets tag file.

I decided not to make the page numbers accessible because this would make it harder to navigate to the next page because there would be more controls to tab through, and I suspect there aren't really that many cases where you know you need to skip to page 4 (at least not in our application).

Let me know if you have any questions.
Regards,
Andrew

[sunkaram]

Andrew,

I am also working on ADA Compliant issues with Richfaces.

We have a search results page where we display results using rich:tree. These results are not readable by screen readers and are not getting focussed using keyboard (TAB key).

Appreciate any help.

Thanks,

Mahesh