Wednesday, March 26th, 2008
Accessibility is on the minds of most of us and for some companies, it’s an absolute priority. The Filament Group is taking accessibility seriously has produced two jQuery extensions that take that into consideration.
There’s been quite a lot of effort of late to leverage HTML Canvas element for visualization of data but doing so in an accessible way hasn’t been a priority. The focus has really been on making data look pretty without much thought to how it should render to those that can’t benefit from those extended browser features.
The idea of visualizing HTML table data has been a hot topic lately. The first mention of it that we have seen was Christian Heilmann’s YUI blog entry, which provides a clean solution for the problem using the Yahoo library. The idea is a good one: having the data on the page in a table allows it to be accessible, and the chart can be shown as a visual enhancement. Our attempt at solving the problem uses jQuery and provides several types of graphs, such as Pie, Line, Area, and Bar.
Using a combination of jQuery, some custom syntax to define the look of the the canvas element and standard HTML tables, the script can generate results like this:
The library also supports the following types of charts:
By beginning with standard semantic markup and progressively enhancing it when CSS and JS are available, the FG team was able to come up with a great slide extension that degrades gracefully:
With a more complex double-slider scenario, again, the extension degrades gracefully:
The team has always worked to make the sliders ARIA-accessible and will continue to refine it to make it compliant with the specification.
Posted by Rey Bango at 6:30 am