ホーム > アクセシビリティ > アクセシビリティガイドライン
アクセシビリティガイドライン
NPO法人しゃらく アクセシビリティガイドライン
高齢者・障害者向けアクセシビリティ指針としては、「JIS X 8341-3 高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ」が公開されているが、JIS X 8341-3では言及されていない身体障害以外のLD(学習障害者)に対する配慮、およびNPO法人しゃらくサイトの特性として、高齢者、パソコン初心者に対する配慮を加えた、「より多くの人に優しいサイト制作」のためのガイドラインとして策定する。
1.使用する技術
- マークアップは、W3Cの技術仕様に準拠して行い、個別のブラウザ独自仕様(例:Internet Explorerのmarqueeタグなど)を使用しない。
- 構造と見栄えを分離し、構造はW3Cの技術仕様に基づいてマークアップし、見栄え(レイアウト、文字色、文字サイズなど)は、できるだけスタイルシートを使用することで、支援技術への対応を容易にする。また、スタイルシートに対応していないブラウザでも、コンテンツの閲覧、操作が可能なように配慮する。
- スクリプトには、スクリプトを使用できない支援技術に対する代替手段を設ける。
- プラグインを使用する場合、プラグインに対応していない支援技術に対する代替手段を設ける。また、プラグインを新たにインストールするユーザーのために、プラグインの意味説明、入手先、ダウンロード、インストール方法などについての詳細な説明を付ける。
2.マークアップについて
- 画像に対してはalt属性で、画像の内容を把握できる代替テキストを付加する。
- 特に、画像リンク、画像ボタンなど、操作に重要な画像に対しては、操作の意味が把握できる簡潔な代替テキストを必ず付ける。
- 説明が不要な修飾画像の場合はalt属性を空にする。
- イメージマップを使用する場合は、クライアントサイド・イメージマップを使用し、map要素のすべてのarea要素にリンク先を把握できるalt属性を付加する。
- title要素で、そのページの内容を簡潔に把握できるタイトルを付ける。
- 見出しはh1からh6要素で、論理構造に従ってマークアップする。
- 論理的に強調したい個所は、b要素でなく、音声読み上げソフトでも強調して読み上げられる場合が多いstrong要素や em要素を使用する。
- データテーブルにはcaption要素とsummary属性でテーブルの概要を付加し、th要素とtd要素で見出しとデータの区別を付ける。複雑な構造のデータテーブルの使用は極力避ける。
- レイアウトテーブルに対しては、逆に音声読み上げ時にユーザーをデータテーブルと混乱させるcaption要素、summary属性、th要素を使わない。また、音声読み上げ時に見た目のレイアウト通りに内容が読み上げられるように配慮する。
- 入力フォームに対しては、label要素で項目名とテキストエリアを関連付ける。また、音声読み上げソフトで、見た目の配列と読み上げ時の配列が一致するように配慮する。
- frame要素(フレーム)は使用しない。
3.ナビゲーションについて
- どのページからでもトップページに戻れるリンクで設ける。(サイトの画像ロゴクリックで戻れるだけでなく、テキスト、メニューなどでも明確に示す。)
- ユーザーが現在位置を把握できる手段を用意する。
- パンくずリスト、メニュー強調、title要素での階層構造説明など、複数手段の併用により、ユーザーに多くの手かがりを与える。
- ナビゲーションメニューは、原則として同じ位置とかたちに揃える。
- ナビゲーション箇所は、スキップできるようにする。
4.リンクについて
- リンク箇所は、リンク先が明確にわかる言葉で説明する。(「ここをクリック」など、あいまいな言葉の使用を避ける。)
- テキストリンクには原則として下線を付け、また未訪問、訪問済みで色を変えてユーザーに認識しやすくする。(配色は、色覚障害などのユーザーにも認識可能な組み合わせにする)
- リンク先を別ウィンドウに表示することは原則として避ける。
- 他サイトへのリンクは、クリック前に他サイトへ移動することを明示する。
5.配色について
- 文字色と背景色のコントラストは十分にとる。
- 色のみで情報を伝えず、テキストなどでも同等の情報を取得できるようにする。
- テキストの文字色は、ユーザーが変更可能なようにスタイルシートで設定する。
6.テキストについて
- 文字サイズはユーザーが変更可能なスタイルシートの可変サイズで指定する。
- 文字サイズのブラウザでの変更方法についての説明ページを設け、ユーザーが文字サイズの変更方法を理解できるようにする。
- 明朝体、Times New Romanのような装飾要素の多い書体の使用は極力避け、より視認性の高いゴシック体、Arialなど装飾要素の少ない書体を使用する。
- 本文の文字数は標準で半角60~70(全角30~35)文字程度にする。
- テキストスクロールを避ける。
- 機種依存文字を使用しない。
- 単語間にスペースを入れない、途中で改行しない。
- 日付、時間、通貨単位は漢字で表記する。
7.マルチメディアについて
- 動画や音声情報には代替手段を付ける。また、一部の支援技術に対応しているマルチメディア技術を使用する場合は、支援技術での使用可能な配慮を行う。
- 動画や音声情報は、開始、停止、ボリュームなどをユーザーが制御できるようにする。
- 早い周期や画面の広範囲な部分の明滅は避ける。
8.操作について
- マウスのような特定のデバイスでのみ操作可能な機能を避ける。キーボードのみでも操作可能にする。
- 入力時間に制限を設けないか、時間の延長、解除ができるようにする。
9.コンテンツについて
- 平易な言葉を用い、専門用語を使用する場合は解説を、略語には正式表記を付ける。
- 読み方の難しい単語には、ルビをふる。
- 外国語、カタカナ用語は必要な場合以外、多用しない。
- 標準の文字サイズは、高齢者ユーザーが多いサイトの場合、最低12pt以上が好ましい。
- テキスト情報の理解を助けると想定される場合は、画像やイラストなどを補足として配置する。
- テキストの記号文字(×○)などだけで意味説明しない。画像の記号文字を使用する場合はalt属性で代替テキストを付ける。
- 用語・用字をサイト内で統一する。
10.その他
- ディスプレイでの閲覧だけでなく、印刷して閲覧されることも配慮したレイアウト、スタイルシート設定を行う。
- 自動的にページを更新したり、別のページに移動しない。
このアクセシビリティ化は、平成19年度のNPOアクセシビリティ支援プログラムの助成を受けて実施されました。
