Wednesday, March 26th, 2008

Filament Group’s Accessible Extensions

Category: Accessibility, jQuery

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.

Accessible Charts

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:

  • line
  • filledLine
  • additiveLine
  • additiveFilledLine
  • pie
  • bar
  • additiveBar

Accessible Slider

A 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.

Posted by Rey Bango at 6:30 am

4.5 rating from 36 votes


Comments feed TrackBack URI

Filament Group does nice work. I love the slider and can’t wait for them to show the rest of their work to the public.

Comment by iMarc — March 26, 2008

Our Chronoscope charting library also does this (, and also supports adding push-pin markers ala google maps via semantic microformat markup. The new version supports arbitrary date formats, and an even more accessible/screen-reader friendly microformat.

A future version will also allow tables to be minimized to sparklines and expanded into charts via a click.

Comment by cromwellian — March 26, 2008

@cromwellian: Interesting example, nice work!

Comment by ScottJehl — March 26, 2008

Please join if you can help out with jQuery accessibility!

Comment by davidbolter — March 27, 2008

Leave a comment

You must be logged in to post a comment.