アクセシビリティに関するガイドラインは、W3C Web Accessibility Initiative(W3Cウェブ アクセシビリティ イニシアチブ)がまとめたガイドライン及び総務省の「インターネットにおけるアクセシブルなウェブコンテンツの作成方法に関する指針」、があります。
以下の評価項目は、W3C WAIガイドライン 優先度1に準拠していますが、よりコンテンツ制作に反映しやすいように、W3C WAIガイドラインの内容を分割・統合しています。また、聞きやすいページを制作するために、WAI ガイドライン優先度1にない評価項目を追加しています。評価項目の後ろに、準拠したWAIガイドラインの番号を掲載しています。
[1] イメージとアニメーション
【評価項目】
イメージやアニメーションによる視覚に訴える表示にはalt属性を付けて、テキストを補う。重要ではない、あるいは冗長なイメージやアニメーションにはalt=属性を" "(半角スペース) とする。<WAI1.1、WAI6.2準拠>
【WAM NET(ワムネット)での考え方】
音声ブラウザによっては、alt属性を""(カラの文字列)としたイメージをまったく無視して処理することがありますので、alt属性の付け方には特に注意しています。 重要でない画像リンクでも、alt属性を""(カラの文字列)とはせず、" "(半角スペース) とします。
[2] イメージマップ
【評価項目】
イメージマップのホットスポットに代替文字列を付けたクライアントサイド・イメージマップを使用する。サーバーサイド・マップを使用する場合は同等のテキストリンクを用意する。<WAI1.2、WAI9.1準拠>
【WAM NET(ワムネット)での考え方】
本サイトにおいてはサーバーサイド・マップを利用しておりません。
[3] グラフとチャート
【評価項目】
各グラフとチャートの内容を要約しalt属性を利用するか、longdesc属性を利用して説明またはデータにリンクする。<WAI1.1、WAI6.2準拠>
【WAM NET(ワムネット)での考え方】
本サイトではlongdescを用いずに、その前後にテキストで要約を付けるように努めています。
[4] マルチメディア
【評価項目】
重要なオーディオの情報にはキャプションやトランスクリプションを付ける。重要なビデオの情報にはテキストまたはオーディオによる説明を付ける。<WAI1.3、WAI1.4準拠>
【WAM NET(ワムネット)での考え方】
動画には字幕を入れるか、内容をあらわすテキスト文書を用意します。音声には内容をあらわすテキスト文書を用意します。これらは出来るだけコンテンツと同期して提供されるようにします。任意に止めたり、戻ったり、進めたりすることが、キーボードから、あるいは音声ブラウザから可能にします。
[5] スクリプト、アプレット、プラグイン
【評価項目】
可能な場合は、スクリプト、アプレット、プラグインに代替コンテンツを付けて、これら機能がサポートされないかオフにされた時に大切な情報を失わないようにする。<WAI6.3、WAI11.4準拠>
【WAM NET(ワムネット)での考え方】
検索系のページにおいてスクリプトを使用していますが、音声ブラウザで利用可能な検索ページを別に用意し、そこへのリンクをページ先頭付近に配置しています。
[6] フォーム
【評価項目】
フォームの構成要素にはラベルを付ける。
【WAM NET(ワムネット)での考え方】
フォームの各構成要素の前に、説明用のテキストを配置するかラベルを提供します。
[7] メインのコンテンツへのスキップ
【評価項目】
ページの本文にスキップできるように、ナビゲーション・リンクを付ける。
【WAM NET(ワムネット)での考え方】
ページの本文にスキップするリンク及びサイドメニューにスキップするリンクを付けて、複数ページの先頭部分に同じように配置したメニューの読み上げをスキップできるようにしています。
[8] フレーム
【評価項目】
各フレームとフレームページにタイトルをつけて、ユーザーがタイトルでフレームのつながりを追えるようにする。<WAI12.1準拠>
【WAM NET(ワムネット)での考え方】
フレームを利用できないブラウザを利用しているかたのために、フレームの構成を簡単に説明した説明文を付加しています。 また、フレームセットにタイトル属性を追加します。
[9] テーブル
【評価項目】
表データには表タイトルを付ける。あるいは要約属性も付ける。複雑な行や列のテーブルについては、各セルに見出し属性を付ける。<WAI5.1、WAI5.2準拠>
【WAM NET(ワムネット)での考え方】
それぞれのテーブルに合わせて、適切なテキストによる説明を配置することでテーブルの理解が容易になるようにしています。また、複雑なテーブルは極力使用しないようにしています。 複雑な表においては、「見出しをあらわすセルにはTH(ヘッダーセル)要素を用いる。」を実施します。
[10] 正しいマークアップ
【評価項目】
視覚的に訴えるためだけでなく文書の構造を正しく表すために構造的マークアップ(見出し、リストなど)を使用する。
【WAM NET(ワムネット)での考え方】
指針に沿うよう作成しています。
[11] カスケード式スタイルシート
【評価項目】
プレゼンテーションの要素や属性ではなくスタイルシート(CSS)でプレゼンテーションとレイアウトを管理する。ただし、読みやすさがスタイルシートに依存したウェブページは作らない。<WAI6.1準拠>
【WAM NET(ワムネット)での考え方】
指針に沿うよう作成しています。
[12] ハイパーテキスト・リンク
【評価項目】
リンクの前後を読まないと理解できないような「ここをクリック」ではなく、説明的なリンクテキストを使用する。
【WAM NET(ワムネット)での考え方】
指針に沿うよう作成しています。 また、同じリンク先を示すリンクテキストあるいはリンクイメージには同じテキストを使用します。
[13] カラー&コントラスト
【評価項目】
色付きで伝えられる情報はすべて色なしでも伝えられるようにする。また、イメージのコントラストが十分であるようにする。<WAI2.1準拠>
【WAM NET(ワムネット)での考え方】
指針に沿うよう作成しています。
[14] 点滅、移動またはフリッカーするコンテンツ
【評価項目】
コンテンツを点滅、フリッカー、移動させないようにする。<WAI7.1準拠>
【WAM NET(ワムネット)での考え方】
指針に沿うよう作成しています。
[15] アクセシビリティの検証
【評価項目】
利用できるツールを使ってアクセシビリティを試験する。
【WAM NET(ワムネット)での考え方】
本サイトでは、主要なページを中心に次の方法によってアクセシビリティの検証を行なっています。
・ 音声ブラウザを利用しての確認
・ 色弱シュミレーションソフトを利用しての確認
・ 障害をお持ちのかた自身の開発への参加
・ 専門家によるレビュー
<WAI4.1><WAI14.1>については、音声ブラウザを利用して確認しています。
[16] キーボードやマウスでの操作への配慮
【評価項目】
リンクテキストやボタンが隣接する場合、マウスでの操作や見やすさに配慮して、それぞれが独立したものであると分かりやすいようにする。 また、マウスを使わず、キーボードからだけでも操作が可能であるようにする。
【WAM NET(ワムネット)での考え方】
本サイトでは、主要なページを中心に次の方法によってアクセシビリティの検証を行なっています。
・ リンクテキストの切れ目ははっきりと分かるようにします。
悪い例 |
天気予報 今日のニュース 地図案内 |
良い例 |
天気予報 / 今日のニュース / 地図案内 |
|
・ リンク画像やボタンを近付けすぎないようにします。
・ 1ページのリンク数を無制限に増やさないようにします。
・ キーボードだけでの操作を可能にします。