[ PR ]

[ PR ]

アクセシビリティを考慮した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属性値の設定に注意。3つの属性を読み込むようにしていますので、"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>

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

関連サイトURL

A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets
http://alistapart.com/stories/alternate/
ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書:
http://www.zspc.com/documents/wcag10-tech/

[ PR ]

[ PR ]

[ PR ]

トラックバック(4)

http://weblibrary.s224.xrea.com/weblog/w... 続きを読む

コチラとは異なり、大中小から文字サイズを選ぶやり方です。 スクリプトダウンロード... 続きを読む

 昨晩、IRCチャットにおきまして、「WordPress交流会」なるチャットが開催されておりました。  この場において、「styleswitcher.js... 続きを読む

A List Apart: Articles: Alternative Style: Working With Alternate Style Sheet... 続きを読む