Filament Group’s Accessible Extensions
Date : 2008 03 26 Category : Tech & Development
AjaxianAccessibility 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.
Accessible ChartsThere’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:
line filledLine additiveLine additiveFilledLine pie bar additiveBar Accessible SliderA bigger challenge for the team at Filament Group was developing a slider control which could be accessible. Building a slider requires the use of JavaScript, DOM manipulation and CSS all of which need to be added progressively if such a dynamic control will be viable in a non-JS environment.
Many of the advanced widgets and controls we develop today don’t exist in the current HTML specification — there is no “slider” or “accordion” or “menu” element, so we must create one from scratch using markup that isn’t semantically correct (divs, spans, unordered lists and the like), and layer on the appearance and behavior using CSS and Javascript. This works well when your audience is using a standards-compliant browser, but what about those using older browsers or mobile devices that only partially support the styles and scripts necessary for it to work? And how do you make the fully functional version — a block of non-specific divs and spans — accessible to assistive technology, like screen readers?
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:
JS/CSS Available:
JS/CSS Unavailable:
With a more complex double-slider scenario, again, the extension degrades gracefully:
JS/CSS Available:
JS/CSS Unavailable:
The team has always worked to make the sliders ARIA-accessible and will continue to refine it to make it compliant with the specification.