ウェブアクセシビリティ指針

本指針の目的

この指針は、「日本ケアメイク協会公式ウェブサイト管理・運用指針」の別記として、当協会のサーバ上で公開されているウェブページ全体について、ウェブアクセシビリティの向上を図ることを目的とします。

可読性への配慮

画像には、ALT属性（代替テキスト）で簡単な説明を付けてください。画面を見て文字を読むことが困難なため、画面の文字情報（テキスト）を合成音声で読み上げるソフトウェア（以下「音声ブラウザ」といいます。）を使い、サイトを閲覧している利用者がいます。音声ブラウザは、画像の代替としてALT属性に付けられた説明を読み上げます。

音声ブラウザの利用者も画像の内容が把握できるように、画像には、ALT属性による簡単な説明を付けてください。例） alt =”講習会の写真”

リンクボタンとして機能している画像には、リンク先の内容が分かるように「…へのリンク」といったALT属性による説明を付けてください。例） alt =”ニュース＆トピックスへのリンク”

ただし、見栄えを良くするためだけの意味をもたない装飾的な画像に対しては、紛らわしさを無くすためにALT属性の説明を付けないようにしてください。例） alt=””

文字サイズは、利用者側で変更できるようにしてください。
OSやブラウザの設定で、読みやすい文字サイズに設定している利用者がいます。ポイント数やピクセル数で文字サイズが指定されていると、それがうまく機能しません。

スタイルシートを利用する場合、相対値で文字サイズを指定してください。例） font-size:150%

前景色と背景色のコントラストを高くしてください。判別しやすい色の組み合わせを用いてください。
前景色と背景色のコントラストが不十分な場合、内容の把握が難しくなる利用者がいます。また、背景が模様や写真である場合、文字が読みにくくなる場合があります。

文字と背景色のコントラストを十分とり、可読性に配慮してください。
赤と緑、赤と茶色、青と黒、青とピンク、白と黄色のような色の組み合わせでは、識別が難しい利用者がいます。文字と背景色は、識別しやすい色の組み合わせを用いるようにしましょう。

色による情報を、色に頼らない方法でも表現してください。
色の違いを識別することが難しい利用者がいます。文字や図表やグラフに色分けを用いる場合は、色の違いが識別できなくても、内容が理解できる表現を心がけてください。

色によって強調したり、区分する場合、（例えば、文字による説明を付け加えたり、文字の無い区分は、斜線・網掛けなどで表現するなど）補助的な情報を付け加えましょう。色分け文字や色による区分を用いる場合は、白黒印刷した場合にも、同じ内容の情報が伝わるよう配慮してください。

取り消し線や太字などの文字の装飾も認識できない利用者がいます。文字の装飾がなくても、内容が理解できる表現を心がけてください。

丸数字等の機種依存文字の使用を避けてください。
機種依存文字（丸の中に数字が書かれたもの、半角カタカナ、全角のギリシャ数字、特殊記号など）は、利用者が使用しているOSによっては、正しく表示されないことがあります。機種依存文字の使用は避けてください。

音声、動画に対して、その代替となる文章による説明の追加、あるいは字幕挿入を行ってください。
主に聴覚に障害のある人への配慮ですが、日本語を母国語としない人やサウンド機能を持たないコンピュータでアクセスする人に対しても役立ちます。音声や動画に対しては、その代替となる文章による説明、または字幕を用意しましょう。

PDF文書やJava、Flash等、他のプログラム（技術）によるオブジェクトがある場合、その代替となるHTMLページを用意してください。
PDF文書や Java、Flash等を利用したページは、音声ブラウザで閲覧している利用者や、キーボードでアクセスする人には利用できない場合が多くあります。これらの技術を利用できなくても、同じ情報を得られるように代替手段や代替情報を用意するようにしてください。

分かりやすさへの配慮

各ページに適切なタイトルを付けてください。
音声ブラウザは、ページ内の情報を上から順番に読み上げていきます。各ページに適切なタイトルをつけることによって、サイトの構造の理解を助け、情報が探しやすくなります。

内容が連想される分かりやすいページ固有のタイトルを<HEAD>の<TITLE>部に付けてください。
同じサイト内のページであっても、各ページに固有のタイトルを付けましょう。

リンク先の内容が明確に分かるようなリンクタイトルを付けてください。そのリンクボタンをクリックしたら、どのようなページが表示されるのか、ユーザーが想定できるような分かりやすいリンクタイトルを付けてください。リンク先が外部サイトの場合は、その旨を記載しましょう。リンク先がPDFなどのファイルの場合は、ファイル形式・ファイルサイズを記載しましょう。

サイト内の位置関係を把握しやすいよう、適切なナビゲーションを付けてください。
サイト内のどのページを見ているのか把握しやすいように、サイト内のページの移動がしやすいように、適切なナビゲーションを付けるよう心がけてください。ページ毎に、パンくずリスト（階層の上位ページへのリンクを並べたもの）やメニューを設けるなど、位置関係の把握や、他のページへの移動がしやすいように配慮しましょう。

テーブル（表）を使用するときは、音声ブラウザの読み上げ順序（左から右、上から下）に配慮してください。音声ブラウザは、テーブルの情報を左から右、上から下に、順番に読み上げていきます。

テーブルを使用する場合は、音声ブラウザの利用者にも、内容が把握しやすいような構成を心がけましょう。レイアウトのために複雑なテーブル構造を組み立てることは控えましょう。

操作性への配慮

ナビゲーションやメニューは、スキップして本文に飛べるよう配慮してください。
ナビゲーションやメニューが、ページの本文より先（上や左）に配置されている場合、音声ブラウザの利用者にとっては、ページ先頭から本文までが遠くなります。ナビゲーションやメニューの情報量が多い場合は、「ページ左上に、本文へのリンクボタンを設ける」「本文を先（左）に配置する。」など、ナビゲーションやメニューを飛ばして、本文が読めるように配慮しましょう。

フレームの乱用を避け、各項目を順序良く配置してください。
音声ブラウザは、フレームを別々のページとして読み上げます。そのため、音声ブラウザを利用している人には、フレームがかえって使いにくい場合があります。また、項目がばらばらに配置されていると、選択の枠があちらこちらにとび、例えば（マウスを使わず）キーボードによってアクセスする人が、どの項目が選択されているのか見失ってしまう可能性があります。フレームの使用は、最小限にとどめ、フレームを使用する場合は、各項目を順序良く配置して下さい。

キーボードのみでリンク、ボタン、メニュー等の項目を全て選択できるようにしてください。
運動機能や視覚に障害があるため、マウス操作が難しい人がいます。選択できる項目がキーボードのみでアクセスできるような配慮が必要です。

項目間の移動、選択は、「TAB」キー、「ENTER」キーによって行えますので、確認してください。
メニュー、リストなども矢印キーを併用して全項目が選択できるかを確認してください。
アクセスが不可能な場合は、それらを用いない別の情報提供の方法を考えましょう。

マウスで選びやすいようにボタン等の選択項目のサイズを大きくし、また互いの項目の間隔を適度に開けてください。上記とは逆に、キーボードが使えず、マウスによってのみコンピュータを操作する利用者もいます。震えや緊張などによって正確な操作が難しい場合もあります。

選択項目のサイズを大きくしたり、テキスト部分にもリンクを設定するなど、クリックしやすさに配慮してください。誤ってクリックしてしまわないよう、選択項目の間隔を十分開けるよう配慮してください。

利用者の選択によらない動作をしないようにしてください。利用者の意思に反した動作が起きるサイトでは、サイト利用に不自由が生じる場合があります。

利用者の選択なしに、自動で音声が再生されないようにしてください。
利用者の選択なしに、自動で他のページに移動しないようにしてください。
短い周期（１秒間に２回以上）で、画面が点滅することがないようにしてください。

アクセシビリティのチェック

古いPCやスマートフォンブラウザで表示を確認し、多くの人に意見を聞いてください。
画面の小さなPCやスマートフォン、最新の機能を持たない古いブラウザを利用してアクセスする人もいます。そういった古い環境でも問題なく表示されるかを確認しましょう。また、障害のある人に実際に利用してもらい意見を聞くことも大変参考になります。

作成したページに対して、アクセシビリティチェックを行ってください。
チェックツールを利用して確認する、白黒印刷で内容確認する、テキスト表示に切り替えて音声ブラウザへの対応状況を確認してみるなど、適宜アクセシビリティチェックを行ってください。

附則

本指針は2017年8月25日から施行します