styleswitcher.js-スタイルシート切り替えjavascript

スタイルシート切り替えjavascript、styleswitcher.jsの紹介です。このスクリプトを導入することでアクセシビリティを考慮したWEBページ提供が可能となります。

アクセシビリティを考慮したWEBページを作成するときに役立つのがA List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsが紹介しているstyleswitcher.js。

アクセシビリティガイドラインにも「ガイドライン2.　色だけに依存しない」という項目があり、

2.1　色によって表現されている全ての情報は、その色を再現できない環境でも得られるようにしておく（たとえば、前後関係やタグ付けなどによって）。 [優先度1] (チェックポイント2.1)

2.2　前景色と背景色の組み合わせは、色の識別が困難な人やモノクロ画面を使用している人などに対しても十分なコントラストを与えるようなものにする。 [対画像：優先度2 、対テキスト：優先度3] (チェックポイント2.2)

（引用：ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書:http://www.zspc.com/documents/wcag10-tech/index.html）

ページコンテンツをハイコントラスト表示で提供する場合などにスタイルシートの切り替えを使うことや、見易いページを提供するときなどにも使われています。

456 Berea Streetは、ページ上部に"Switch to high contrast layout"リンク表示をして切り替えができるようにしています。

Going My Wayさんは、このscriptを使ってオリジナルのCSSデザインが切り替え表示できるようにしています。

styleswitcher.js

このスクリプトは、クッキーを読み込んで前回設定したスタイルシートを読み込むようにもしていますので、一度設定することでクッキーを削除しない限りは、前回設定したスタイルシートを読み込むようになります。

styleswitcher.js導入と設定

styleswitcher.jsは、A List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsのエントリーの中にあるDownload styleswitcher.jsからDLできます。ファイル名"styleswitcher.js"にて保存。

styleswitcher.js読み込み指定

ページの<head></head>の間に

<script type="text/javascript" src="styleswitcher.js"></script>

を追加。

外部スタイルシートリンク

外部スタイルシート指定は以下の通りにtitle属性で各CSSに名前を付けます。

rel="alternate stylesheet"rel属性値の設定に注意。３つの属性を読み込むようにしていますので、"alternate"は必須です。

<link rel="alternate stylesheet" type="text/css" href="任意.css" title="任意指定" />

上記のパターンでいくつかのパターンのCSSを制作しておきます。中にはハイコントラストのCSSも用意しておくといい。

スタイルシート切り替えリンク

a要素にonclickイベントを追加することでスタイルシート切り替えリンクを作成します。setActiveStyleSheet('任意のtitle')には、外部スタイルシートのtitle属性を書き込みます。

<a href="#" onclick="setActiveStyleSheet('任意のtitle'); return false;">任意のテキスト</a>

上記で簡単にスタイルシート切り替えを任意のページに組み込むことができます。