[JS]アクセシブルな円・棒・折れ線グラフとスライダーのスクリプト

ajaxianのエントリー「Filament Group’s Accessible Extensions」から、filament groupの円・棒・折れ線グラフとスライダーのスクリプトを2つ紹介します。

アクセシブルな円・棒・折れ線グラフのスクリプト

Creating accessible charts using canvas and jQuery
デモページ

表組みのデータをグラフィカルに表示するスクリプトです。表組みのデータは、ブラウザで変更が可能で、円グラフにも反映されます。
スクリプトオフ時には、表組みのデータが表示されます。

表組みのデータは、円グラフのほかに折れ線グラフ・棒グラフなどで表示することもできます。

デモページ

アクセシブルなスライダーのスクリプト

Developing an accessible slider
デモページ

セレクトボックスのデータを、視覚的に分かりやすいスライダーにするスクリプトです。セレクトボックスとスライダーは、互いに連動します。
スクリプトオフ時には、セレクトボックスが表示されます。

スクリプトは、2つともjQueryのプラグインのため、設置にはjquery.jsが必要です。