JSF Icefaces Accessibility

We have a JSF based application, and this is our experience in making the website more accessible.

Accessibility guidelines from the web.

• http://www.section508.gov/
• http://www.w3.org/standards/webdesign/accessibility
• http://www-03.ibm.com/able/guidelines/web/accessweb.html
• http://www.w3.org/WAI/
• http://www.w3.org/TR/WCAG/

Tools to check for accessibility 

• Online website accessibility tool http://wave.webaim.org/
• Alternatively you could also use the wave tool bar http://wave.webaim.org/toolbar
• Mozilla color contrast checker.  https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/?src=search 
• List of tools for checking for accessibility http://academics.georgiasouthern.edu/accessibility/docs/tools.html

Making your website font scale and resizeable. Typically websites show three (3) A alphabets and prompt the user to resize.
AAACreate the above as links and pass in a value to resize the body font.
document.body.style.fontSize = newSize + "em";

Key issues/challenges that were faced :-

• JSF popups with dialog boxes were not picked up by JAWS reader. Had to provide a separate entry point for those pages to be shown as a separate popup window and not within the application itself.
• Wherever we had a drop down based change listener we had to implement an action listener with a "go" button.
• Flash based fusion charts font sizes were not re-sizeable http://forum.fusioncharts.com/topic/10527-how-to-auto-resize-text/page__p__41271__hl__resize__fromsearch__1#entry41271
• To resize flash movies via a script in your website please see  http://swffit.millermedeiros.com/
• Basically flash can be set as a percentage of the parent container div to resize. 
• Providing alt text for images. 
• Providing table headers for tables where the th were not rendered due to improper use, the accessibility reader tools need the th to read the column headers. 
• No multi row headers. 
• Images pixelating if you increase the zoom of the page, but you can provide alt text for those pages.  
• Auto complete drop downs need to have a different layout. 

Update:

For example if you have section headings in a page (not the html title of the page). What JAWS would allow you to do is to pick a list of headings on a page and navigate directly to that section that contains the heading. So it is essential for your pages to contain headings.

Update:
To make tables more accessible,
this is an awesome post on how to make it more accessible.

http://www.usability.com.au/resources/tables.cfm

Will update more on this blog.