Trying to make a RichFaces application accessible (ADA/Secti
amayingenta Feb 12, 2009 9:55 AMHi, 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