(平成29年11月14日 理事(財務・総務担当)決裁)
可読性への配慮
1.画像には、ALT属性(代替テキスト)で簡単な説明を付ける。
- 音声ブラウザの利用者も、画像の内容が把握できるよう、画像には、ALT属性による簡単な説明を付けてください。
(例) alt =”大講義室の写真”
- リンクボタンとして機能している画像には、リンク先の内容が分かるように「…へのリンク」といったALT属性による説明を付けてください。
(例) alt =”広島大学へのリンク”
- ただし、見栄えを良くするためだけの、意味をもたない装飾的な画像に対しては、紛らわしさを無くすためにALT属性の説明を付けないようにしてください。
(例) alt=””
※ 画面の文字情報(テキスト)を合成音声で読み上げるソフトウェア(以下、音声ブラウザ)を使って、Webコンテンツを閲覧している利用者がいます。音声ブラウザは、画像の代替としてALT属性に付けられた説明を読み上げます。
2.音声、動画に対して、その代替となる文章による説明の追加、あるいは字幕付与を行う。
- 音声や動画に対しては、その内容(音声、映像)を説明する代替テキスト、または字幕を用意してください。
※ 音声や映像へのアクセスが困難な利用者(聴覚に障害がある人、視覚に障害がある人、音声や映像に含まれる言語が母国語ではない人等)がいます。
3.テーブル(表)を使用するときは、音声ブラウザの読み上げ順序(左から右、上から下)に配慮する。
- table要素は、子孫要素であるtr要素、th要素(見出しセル)、td要素を一緒に用いて論理関係(テーブルの構造やセル間の関係等)を明確にしてください。
- 表を用いる場合は、左から右、上から下の順に読み上げた場合、表の構造や内容が理解できるよう配慮してください。
- レイアウトのために複雑なテーブル構造を組み立てることは控えてください。
※音声ブラウザは、テーブルの情報を左から右、上から下に、順番に読み上げていきます。
4.色による情報を、色に頼らない方法でも表現する。
- 色分け文字や色による区分を用いる場合は、白黒印刷した場合にも、同じ内容の情報が伝わるよう配慮してください。
(例)円グラフの区分表現に、色とパターン(模様)を併用する。
(例)円グラフの区分表現に、色とテキスト(文字)を併用する。
※色の違いを識別することが難しい利用者がいます。文字や図表やグラフ等に色分けを用いる場合は、色の違いが識別できなくても、内容が理解できる表現を心がけてください。
5.文字色と背景色のコントラストを高くする。
- 文字の色と背景色のコントラストを十分とり(コントラスト比4.5:1以上)、文字の可読性に配慮してください。
※文字色と背景色のコントラストが不十分な場合、内容の把握が難しくなる利用者がいます。また、背景が模様や写真である場合、文字が読みにくくなる場合があります。
6.文字サイズは、利用者側で変更できるようにする。
- スタイルシートを利用する場合、文字サイズやテキストコンテナのサイズを相対値で指定してください。
(例)font-size:150%
(例)font-size:1.5em
(例)width:30em; height:20em
※相対値でサイズ指定をしている場合、OSやブラウザの設定で、利用者が読みやすい文字サイズに変更することができます。
7.丸数字等の機種依存文字の使用を避ける。
- 機種依存文字(丸の中に数字が書かれたもの、半角カタカナ、全角のギリシャ数字、特殊記号など)の使用は避けてください。
※利用者が使用しているOSによっては、機種依存文字は正しく表示されないことがあります。
操作可能性の配慮
8.キーボードのみでリンク、ボタン、メニュー等の項目を全て選択できるようにする。
- 項目間の移動、選択は、「TAB」キー、「ENTER」キーによって行えますので、確認してください。
- メニュー、リストなども矢印キーを併用して全項目が選択できるかを確認してください。
- アクセスが不可能な場合は、それらを用いない別の情報提供の方法を検討してください。
※マウス操作が難しい人(視覚に障害がある人、運動機能に障害がある人等)がいます。Webコンテンツのすべての機能に、キーボードのみでアクセスできるような配慮が必要です。
9.利用者がコンテンツを利用するために十分な時間を提供する。
- コンテンツに制限時間を設定する場合は、コンテンツ利用に時間を要する利用者に配慮して設定を行ってください。
(例)時間切れになる前(20秒以上前)に警告を表示し、利用者が制限時間を調整(延長)することができるようにする。
10.激しい画面の点滅を含むコンテンツを使用しない。
- 1秒間に3回を超える閃光を放つコンテンツは使用しないで下さい。
※利用者が激しい光の点滅を目にすることによって、てんかん発作を誘発する可能性があります。
11.各ページに適切なタイトルを付ける。
- Webコンテンツの内容を連想しやすい、各ページ固有のタイトルを付けてください。
※音声ブラウザは、ページ内の情報を上から順番に読み上げていきます。各ページに適切なタイトルをつけることによって、サイトの構造の理解を助け、情報が探しやすくなります。
12.複数のページで繰り返し表示されるコンテンツは、スキップして本文に飛べるよう配慮する。
- 本文より前に、複数のページで繰り返し表示されるコンテンツ(ナビゲーション等)がある場合は、本文へスキップできる内部リンクを設けてください。
※複数のページで繰り返し表示されるナビゲーション等のコンテンツが、本文より先(上や左)に配置されている場合、音声ブラウザは、毎回これらのコンテンツを読み上げてから本文を読み上げることになります。
13.リンクの目的を特定できるリンクテキストを付ける。
- リンク目的(リンク先)が特定できるリンクテキストを付けてください。
(例) <a href="...">広島大学WEBアクセシビリティ指針</a>
- リンク先が外部サイトの場合は、その旨を記載してください。
- リンク先がPDF等の電子ファイルの場合は、ファイル形式・ファイルサイズを記載してください。
14.サイト内の位置関係を把握しやすいよう、適切なナビゲーションを付ける。
- サイト内の現在位置を把握しやすいように、またサイト内のページの移動がしやすいように、ページ毎に適切なナビゲーション(パンくずリスト、ホームへのリンク等)を付けるよう心がけてください。
15.フレームの乱用を避け、各項目を順序良く配置する。
- フレームの使用は、最小限にとどめ、フレームを使用する場合は、各項目を順序良く配置して下さい。
※音声ブラウザは、フレームを別々のページとして読み上げます。そのため、音声ブラウザを利用している人には、フレームがかえって使いにくい場合があります。また、項目がばらばらに配置されていると、選択の枠があちらこちらにとび、例えば(マウスを使わず)キーボードによってアクセスする人が、どの項目が選択されているのか見失ってしまう可能性があります。
予測可能性への配慮
16.各WEBページで使用されている自然言語を明示する。
- 音声ブラウザが言語を判別できるように、各Webページで主に使用されている言語を明示してください。
(例) <html lang=” ja”>
- 必要に応じて、音声ブラウザが各Webページで部分的に使用されている言語を判別できるように、部分的に使用されている言語を明示してください。
(例) <html lang=” ja”>
・・・
<span lang=”en”>Accessibility</span>
17.利用者の選択に依らない動作をしないようにする。
- 利用者の選択なしに、自動で音声が再生されないようにしてください。
- 利用者の選択なしに、自動で他のページに移動しないようにしてください。
※利用者の意思に反した動作が起きないように配慮します。
アクセシビリティのチェック
18. 作成したWEBコンテンツに対して、アクセシビリティチェックを行う。
- 作成したWEBコンテンツが多様な利用者にとってアクセス可能であるかどうか、チェックを行ってください。
(例)チェックツールを利用して、アクセシビリティを評価する。
◆ miChecker (エムアイチェッカー)Ver.2.0
◆ カラー・コントラスト・アナライザー2013J
(例)Web Content Accessibility Guidelines (WCAG) 2.0の達成基準への適合状況を確認する。
(例) テキスト表示に切り替えても、内容が伝わることを確認する。
(例) 白黒印刷にしても内容が伝わることを確認する。
(例) キーボード操作のみで、すべての機能を利用できることを確認する。
(例) 障害のある利用者を含む多様な利用者の意見を聞く