アクセシビリティ・ユーザビリティを考慮したWEBページ作り

ガイドライン纏めを利用するにあたっての注意点

• 「JIS X8341-3 高齢者・障害者等配慮設計指針 - 情報通信における機器、ソフトウェア及びサービス - 第3部：ウェブコンテンツ」は、「JIS」と省略して記述
• 「WCAG1.0 ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書」は、「WCAG」と省略して記述
• 音声ブラウザに対応するために特に注意する点は「音声」と記述

ガイドライン纏め(2009年5月24日更新)

1. 見出し・タイトル
   1. [音声]ウェブページのタイトルはページ内容を要約したものにすること
   2. [JIS 5.2e(必須)]ページの識別ができ、かつ内容を的確に示すタイトルをつける
   3. タイトルは全角30字以内で収めること
   4. ページの要約はよく読まれる
   5. 見出しは写真よりも注目される
   6. 見出しは左の数単語がさらりと見られる事に注意する
   7. 広告風のものではない
   8. 最初の単語を重視する
   9. 見出しには太字やフォントサイズを効果的に使う
   10. [WCAG 3.5(優先度2)]<H1><H2>などのタグを適切に設定すること
2. 文章・コンテンツ
   1. 流し読みしやすい文章を心掛ける
   2. 紙媒体の50％以内の文章量にする
   3. 2段階、もしくは3段階の見出しを使う
   4. ハイライトや強調を使って、重要語句を分かりやすくする
   5. 長い情報、コンテンツはリンクでページを分割する
   6. 一つの段落に一つのアイディアを載せる
   7. 段落(パラグラフ)は短く纏めること
   8. 結論から先に述べ、次にその根拠となる事実情報を書く
   9. [音声][JIS 5.9e(必須)]単語の途中で改行やスペースを入れないこと
   10. [音声][JIS 5.9b(推奨)]多言語の乱用は避け、誰にでも分かりやすい言葉を使うこと
   11. [音声][JIS 5.9a(必須)][WCAG 4.1(優先度1),4.3(優先度3)]ウェブページが何言語で書かれているかHTMLで適切に宣言すること
   12. [JIS 5.9c(推奨),5.9d(推奨)][WCAG 4.2(優先度2)]専門用語や略語はユーザーに分かりやすく、簡単な言葉に置き換える
   13. [音声]重要な意味を持つものには記号をもちいないこと
   14. [音声][JIS 5.1a(必須)]特定の機種に依存した文字（外字・記号）は使わないようにすること
   15. 対象読者がどんな人かを想像し、彼らにマッチした文体、テーマを設定する
3. 文字
   1. [JIS 5.8a(推奨),5.8b(必須)][WCAG 7.2(優先度2),7.3(優先度2)]点滅やスクロールなど変化する画像や文字の使用は、コントラスト・スピードに注意すること
   2. [JIS 5.6a(必須)][WCAG 3.4(優先度2)]文字サイズを変更できるようにすること
   3. 文字サイズは統一すること
   4. [JIS 5.5c(推奨),5.6c(推奨)]背景色と文字色は十分なコントラストをとること
   5. [JIS 5.5a(必須)][WCAG 2.1(優先度1)]色や文字サイズに依存しないこと
   6. [JIS 5.5c(推奨)][WCAG 2.2(優先度2)]画像を使用した文字は、文字フォント、サイズ、コントラスト等を考慮し、読みやすくすること
4. リスト
   1. 左側の数単語だけがよく読まれる事に注意して記述する
   2. 4項目以上ある場合は、通常の文章よりも箇条書きにしたほうがよい
   3. 箇条書きの前に明快で具体性のあるリード文を設ける
   4. インデント(字下げ)する
   5. 各項目の書き出しに同じ語句を繰り返し使わない
   6. 各項目の言い回しや表現法には一貫性を持たせる
   7. リストは箇条書き、手順には番号を振る
   8. [音声]リストの番号表記は音声ブラウザでは読み上げられない場合があるので注意すること
5. リンク
   1. 基本はリンクテキストに色をつけて下線を引く
   2. リンクテキスト以外に下線を引かない、同じ色を使わない
   3. リンク（訪問済み、未訪問）は明確でわかりやすいこと
   4. [WCAG 13.1(優先度2)]リンクテキストを見るだけでリンク先の内容がわかるように簡潔に記述すること
   5. リンクテキストは長くなりすぎず意味が分かりやすい言葉をもちいること
   6. [JIS 5.3e(必須)][WCAG 10.1(優先度2)]リンクで新しいウィンドウを開かないこと
   7. [JIS 5.3g(推奨)]ハイパーリンク画像はリンクであることを分かりやすくすること
   8. [音声][JIS 5.4a(必須),5.4b(必須)]ハイパーリンク画像は必ずALT属性を付けること
   9. [WCAG 10.5(優先度3)]リンクとリンクの間は適切な間を設けること
   10. [WCAG 10.5(優先度3)]リンクの幅を狭くしないこと
   11. [音声][WCAG 1.2(優先度1)]サーバーサイドのイメージマップを使用する場合には、各領域に対するものと同じテキストによるリンクも付けるようにする
6. レイアウト
   1. ブラウザのサイズを勝手に変更しないこと
   2. ウェブページの横幅は可変にするか950pxを超えないこと
   3. 横方向のスクロールを発生させないこと
   4. 1ページは適切な長さにし、長くなる時は適切なナビゲーション(ページ内リンクやページの先頭へ戻るリンク)をつけること
   5. サイト内の重要なコンテンツはスクロール無しで見れるようにすること
   6. サイト内の重要なコンテンツにメインページから直行できること
   7. レイアウトを複雑にしないこと
   8. サイトの階層を深くしすぎないこと
   9. [音声][JIS 5.2b(推奨)][WCAG 3.3(優先度2)]レイアウトや表現方法などを制御するにはHTMLを使用せずスタイルシートを使うこと
   10. [音声][JIS 5.2b(推奨)][WCAG 6.1(優先度1)]スタイルシートなしでもページを読めるように作ること
   11. [音声][JIS 5.2d(推奨)]テーブルを使う場合、音声ブラウザが読む順番を考えること
   12. [音声][JIS 5.2c(必須)][WCAG 5.1(優先度1)]データをあらわすためのテーブルでは、テーブルのヘッダを明確に示すこと
   13. [音声][JIS 5.2d(推奨)][WCAG 5.3(優先度2)]テーブルをレイアウトのために使用しない
   14. [音声][JIS 5.2f(推奨)]フレームは出来るだけ使用しないこと
   15. [JIS 5.2f(推奨)]フレームを使う場合はNOFRAMEオプションと、意味の通じるタイトルが用意されていること
   16. [WCAG 12.1(優先度1)]フレームの特定や操作を容易にするために、各フレームにはタイトルをつける
7. ナビゲーション
   1. [音声][JIS 5.3h(推奨)][WCAG 13.6(優先度3)]ナビゲーション部分を読み飛ばせるようにすること
   2. ロゴは分かりやすい位置に置き、ロゴをクリックするとトップページに飛ぶようにすること
   3. [WCAG 13.4(優先度2)]ナビゲーションの仕組は一貫したものを提供すること
   4. [JIS 5.2g(推奨)][WCAG 13.3(優先度2)]大規模サイトにおいてはサイトマップを設置すること
   5. [JIS 5.2g(推奨)]パンくずリンクなどで現在のページ位置を明確にすること
8. 画像
   1. [音声][JIS 5.4a(必須)]ハイパーリンクではない画像は必要に応じてALT属性を付けること
   2. 画像のファイルサイズはできるだけ小さくすること
   3. [音声][JIS 5.5b(必須),5.5c(推奨)]できる限り画像の中にテキストを埋め込まないこと
   4. [JIS 5.5c(推奨)]画面を白黒反転させて表示させたときに読み難くなるため、画像の背景（文字や絵の周囲）に透過色を設定しない
   5. 画像のみで重要な情報を説明している場合は、補足情報として概説をテキストで付記する（画像の補足情報）
9. 音声・映像
   1. [音声][JIS 5.4c(必須)]音声を使用する場合は、テキストなどによる同等の情報を提供する
   2. [音声][JIS 5.4d(推奨)]動画を使用する場合は、音声またはテキストなどによる同等の情報を提供する
   3. [音声][JIS 5.7a(推奨)]自動的に音(BGMなど)を再生しない
   4. [音声][JIS 5.7b(推奨)]動画や音声で情報を提供する場合、利用者側で音量調節や再生／停止ができるコントロール機能を設ける
10. 特定の技術やプラグイン
    1. [音声][JIS 5.4e(必須)][WCAG 6.3(優先度1)]スクリプトやアプレット、その他のプログラムが動作しないように設定されていたりサポートされていない場合でも、そのページが利用できるようにする。もし、それができないのであれば、アクセシブルな別のページを作成して同等の役割を果たす情報を提供する
    2. [音声][JIS 5.1b(必須),5.4c(必須),5.4d(推奨),5.4e(必須)][WCAG 6.2(優先度1),11.4(優先度1)]ページをアクセシブルにできない場合は、同等の情報を持つテキストページを用意すること。更新は、通常ページと同じタイミングで行うこと
    3. PDFへのリンクは原則として新しいウィンドウで表示すること
11. フォーム
    1. [JIS 5.3b(必須)]項目名と入力欄の対応関係を分かりやすく配置すること
    2. [JIS 5.3b(必須)]上から下に入力できるようにすること
    3. パスワードを忘れた際の対処法などトラブルの答えをすぐ近くに用意すること
    4. フォームの送信の際には、確認画面が用意されていること
    5. リセットやキャンセルボタンを設置しないこと
    6. [JIS 5.3c(推奨)]入力に制限時間を設けないようにすること
12. エラーの回避と修正
    1. 様々なユーザーの行動に対応していること
    2. ユーザーのアクション（例えばフォームの記入例等）について、簡潔な説明が用意されていること
    3. 全てをやり直させるのではなく、元々の入力した成果に手を加えて修正できること
    4. エラーメッセージが視覚的に明確であること
    5. エラーメッセージが解りやすい文章であること
    6. エラーメッセージは問題の解決に役立つものであること
    7. エラーメッセージには明確な出口が用意されていること
    8. エラーメッセージには問題解決のための連絡先が用意されていること
    9. カスタマイズした404ページを設置すること
13. 広告
    1. 広告は右上におくとよい
    2. 人気コンテンツ近くの広告はよく見られる
    3. 画像広告よりもテキスト広告がよい
    4. 広告やポップアップは控えめにすること
    5. クリックした時、何が起きるのかを明確に表示すること
    6. それが広告であると、明確に表示すること
14. その他
    1. [JIS 5.8a(推奨),5.8b(必須)][WCAG 7.1(優先度1)]画面の点滅(フリッカ)を避けること
    2. [音声][JIS 5.5b(必須)]ウェブコンテンツの内容を理解・操作するのに必要な情報は、形や位置のみを使用せずに、テキストで他の情報を付記する
    3. [音声][JIS 5.1a(必須)]DOCUMENT宣言をする
    4. [音声][WCAG 11.2(優先度2)]W3C勧告で推奨されていないタグや属性の使用は避けること
    5. 必要に応じて使いやすい検索機能を置くこと
    6. 最後にアップデートされた日時を、各ページに明記すること
    7. サイトの役割や意味を表すキャッチフレーズをトップページの分かりやすい場所に書くこと
    8. ページのロード時間を早くすること
    9. 大きなサイズの画像・ファイルをリンクするときは内容・ファイルサイズを記述すること
    10. HTMLの構文を文字列として表示する場合特殊文字をもちいること
    11. メッセージをステータスバーに表示しないこと
    12. スプラッシュページを作らないこと
    13. ユーザーはどのような操作でも途中でキャンセルできること
    14. 右クリックなど、OSやブラウザ標準機能を禁止しないこと
    15. 問い合わせ先を明記すること

参考資料

このガイドライン纏めは以下のガイドライン&サイトを参考に作成しています。

• JIS X 8341-3 高齢者・障害者等配慮設計指針−情報通信における機器，ソフトウェア及びサービス− 第３部：ウェブコンテンツ
• リハビリテーション法508条(アメリカ)
• WCAG1.0 ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 技術書 (2000年11月6日　W3C技術ノート)
• ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0 (1999年5月5日　W3C勧告)
• 富士通ウェブ・アクセシビリティ指針
• 三井住友銀行 アクセシビリティガイドライン
• U-Site - ヤコブ・ニールセン氏
• ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン::NPO法人しゃらく
• 入力フォームのユーザビリティ&アクセシビリティ