ウェブアクセシビリティガイドライン
姫路市社会福祉事業団ウェブアクセシビリティガイドライン
「姫路市社会福祉事業団ウェブアクセシビリティガイドライン」（以下、本ガイドラインという）は、日本工業規格（JISX8341-3：2016）を踏まえ、姫路市社会福祉事業団が運営するウェブサイトにおいて高齢者・障害者をはじめ全ての人々の利便性に配慮した情報提供を行うため、ウェブページの作成を行う際に注意すべき点について、詳しく解説したものです。
1.ガイドラインの目的と対象
1.1.本ガイドラインの目的
姫路市社会福祉事業団が運営するウェブサイトを通じて情報提供のさらなる充実を図ることを、本ガイドラインの目的として位置づけます。
1.2.本ガイドラインの適用範囲
本ガイドラインは、姫路市社会福祉事業団公式ウェブサイトをはじめ、姫路市社会福祉事業団が作成し運営する全てのウェブコンテンツを対象とします。
1.3.ウェブアクセシビリティについて
「ウェブページを利用するすべての人が、心身の機能や利用する環境に関係なく、ウェブページで提供されている情報やサービスを利用できること」をウェブアクセシビリティといいます。
1.4.根拠となる法・規格など
平成16年6月にウェブアクセシビリティに関する国内の標準規格であるJIS X8341-3：2004「高齢者・障害者等配慮設計指針‐情報通信における機器、ソフトウェア及びサービス‐第3部：ウェブコンテンツ」（以下、JIS X8341-3：2004）が制定されました。その後、国内外のウェブ制作技術の変化等を踏まえ、国際標準であるウェブアクセシビリティ指針Web content Accessibility Guidelines 2.0(WCAG2.0)に合わせた全面改定が行われ、平成22年8月20日にJIS X8341-3：2010として公示されました。
その後、WCAG2.0は平成24年10月に「ISO/IEC40500：2010」として勧告されました。JIS X8341-3：2016は、「ISO/IEC40500：2012(WCAG2.0)」と完全一致する形へ改正され、平成28年3月に公示されました。
総務省では、JIS X8341-3：2016の改正公示、および障害者差別解消法の施行を踏まえ、国および地方公共団体等の公的機関のウェブアクセシビリティ対応を支援するための「みんなの公共サイト運用ガイドライン（2016年版）」を平成28年4月に公表しました。公的機関は運用ガイドラインにより、JIS X8341-3：2016の適合レベルAAに準拠することが求められています。
1.5.配慮の対象となる利用者
本ガイドラインでは、姫路市社会福祉事業団公式ウェブサイトを訪れるすべての利用者を配慮の対象とします。
その中で、特に現時点で利用する際に問題が生じることの多い以下の利用者について、できる限りの配慮を行います。
視覚障害者
- 全盲（目が見えない。音声読み上げソフトの利用者など）
- 弱視（極めて見えにくい）
- 色覚障害（色の違いがわかりづらい）
聴覚障害者（耳が聞こえない、聞こえにくい）
肢体不自由者（手の動作が不自由でマウスやキーボードを操作することが難しい）
その他配慮すべき利用者
- 難しい漢字や複雑な文章を理解することが難しい
- ウェブページの利用に慣れていない
- 古いウェブブラウザを使用している
- 低速な通信環境で利用している
1.6.目標とするウェブアクセシビリティ等級
本ガイドラインでは、総務省「みんなの公共サイト運用ガイドライン（2016年版）」が求めるJISX8341-3：2016の適合レベルAAを実現することを目標に、ウェブページの作成を行う際注意すべき点を示しています。
1.7.ガイドラインの見直し
利用者の閲覧環境の変化やウェブページの制作技術の変化などに対応するために、本ガイドラインを年に1回見直しの検討を行うものとします。
1.8.職員等への周知
ウェブアクセシビリティの必要性や対応方法等について、日々のウェブページ作成・更新において必要な対応を促します。
2.情報を探しやすくするための配慮
2.1.適切なページタイトルをつける
- ページの内容を予測できるページタイトルをつける。
- 他のページタイトルと重複しないようにする。
- ページタイトルは可能な限り簡潔に表現する。
2.2.共通のナビゲーションの仕組みを用いる
- 各ページのヘッター・フッターを統一する。
- 各ページに姫路市社会福祉事業団公式ウェブサイトの主要なメニューを共通で配置する。
- トップページへ移動するリンクや、ページの上端へ移動するリンクなど、同じ機能を有するリンクの名称と見映えをウェブサイト内で統一する。
2.3.現在位置を把握するための仕組みを用意する
- 各ページに、現在位置と上位階層への移動手段を示すナビゲーション（階層ナビゲーション＝パンくずリスト）を配置する。また、このナビゲーションの先頭のリンクは「トップページ」という表現で統一する。
- 階層ナビゲーションのうち現在表示しているページの名称には、リンクを指定しない。
2.4.複数の検索手段を用意する
- ウェブサイト内の情報検索手段としてキーワード検索機能を各ページで提供する。
- ウェブサイト内の情報検索手段としてサイトマップを用意し、各ページにリンクを提供する。
- そのほか、関連するページへのリンクなどを必要に応じて提供する。
2.5.文書の見出しを適切に分ける
- ウェブページの作成にあたっては、文書の論理的な構造を意識し、ページ内に配置する情報それぞれに対して、見出しを適切に指定する。
- 見出しは見映えを変えるのではなく、CMSで見出しを設定する。
- 見映えを変えるために、文書の構造に関係なく見出しを設定しない。
2.6.箇条書きはHTMLで表現する
- 順番に意味のある箇条書きは、CMSで「番号付き箇条書き」を指定する。
- 順番に意味のない箇条書きは、CMSで「記号付き箇条書き」を指定する。
- テキストで「○」「」「・」などを行頭へ配置することによって箇条書きを表現しない。
3.ウェブサイト内を快適に移動できるようにするための配慮
3.1.リンク箇所は、選択と識別のしやすさに配慮する
- リンクテキストは下線を引き、リンクしていないテキストと識別しやすくする。
- リンク画像は小さくしすぎないように設定し、クリックできる画像であることを認識しやすい見映えにする。
- リンクテキスト及びリンク画像は、適切な間隔を空けて配置する。
- リンクテキスト及びリンク画像は、リンク部分にマウスカーソルを乗せた時や、キーボード操作によってリンクにフォーカス（選択可能領域）を合わせた時に、色が変わるなどの変化をつけることにより、リンク可能な箇所であることを明示する。
3.2.リンクの表現は、リンク先を予測できる内容にする
- 原則として、リンク先のページタイトルを利用することとし、長すぎる場合には要約を記載する。「こちら」などの表現は使用しない。
- リンクテキストは、リンク先のページタイトルと大きく異ならないようにする。
3.3.PDFなどウェブページ以外のファイルにリンクを設定する場合は、わかりやすさに配慮する
- PDFファイル等へのリンクは、ファイル形式と容量を記入し、リンクテキストに含める。
3.4.姫路市社会福祉事業団公式ウェブサイト内のリンクと、外部へのリンクを区別する
- 外部のホームページへリンクを張る際には、外部のウェブページへ移動することを予測できるようにする。
3.5.リンクは原則として別ウィンドウを開く設定にしない
- リンクは同一のウィンドウ内で遷移するように設定する。新しいウィンドウを開かせることはしない。ただし、外部サイトへのリンクについては、新しいウィンドウで開くものとする。
- 利用者の意図しないポップアップウィンドウは使用しない。
- 新しいウィンドウを開く仕組みを用いる場合は、利用者自身がリンクを選択した時のみ開くようにする。自動的に新しいウィンドウが開く仕組みは用いない。
4.情報を見やすくするための配慮
4.1.文字色と背景色の組合せ、コントラストに配慮する
- ページ内のテキストや画像などにおいては、文字の色と背景の色の組合せやコントラストに十分配慮する。
- 文字の入った画像などを作成したり、外部業者へウェブページの制作を依頼する際は、文字の色と背景の色の組合せやコントラスト（明暗の差）に十分配慮する。
- 色の組合せやコントラストに問題がないか、チェックツールを用いて確認する。
4.2.スタイルシートを適切に使用する
- レイアウトや文字の大きさ、色などは、原則としてスタイルシートで設定する。
- スタイルシートに対応していないウェブブラウザで表示した場合でも情報が伝わるようにする。
- テキストを画像化する場合、スタイルシートで同程度の装飾表現が実現できないか検討し、可能な場合はスタイルシートによって表現する。
4.3.文字サイズは利用者が変更できるようにする
- 主要なブラウザの機能で文字サイズが変更できることを確認する。
- 文字サイズを変更できるようにするとともに、文字サイズを変更した場合に、情報が読み取れないほど表示が崩れることがないように作成する。
4.4.読みやすい文字サイズ、フォント、行間を指定する
5.情報の内容を理解できるようにするための配慮
5.1.読みの難しい言葉に読み方を併記する
- 固有名詞や読みの難しい言葉には、読み方を括弧書きで併記する。
5.2.専門用語、省略語、流行語は多用しない
5.3.外国語・外来語は多用しない
5.4.分かりやすい説明、表現を心がける
5.5.データを表すための表組みを分かりやすく作る
5.6.レイアウトは読み上げ順に配慮して構成する
- スタイルシートや、表組みの仕組みを使ってレイアウトする場合は、音声読み上げソフトで読んだ場合に意味が通じるように構成する。
5.7.フレームは原則として使用しない
5.8.ページの自動更新や自動的な移動は行わない
- ウェブページの内容の自動更新が行われる場合、利用者がそれを停止あるいは非表示できる仕組み、または更新頻度を調整できる仕組みを用意する。
- ウェブページの内容の自動更新や入力内容の自動送信が行われる場合、そのことが事前に利用者に分かるよう、説明を記載する。
6.情報を支障なく読み取れるようにするための配慮
6.1.規格及び仕様に準拠する
- 新たにウェブサイトを構築する際には、HTMLやスタイルシートといった使用する技術について、どのバージョンやDTD（文書型定義）で作成するかを、事前に検討し決定する。
- 各ウェブサイトにおいて、決定した規格に従って作成、更新を行う。
6.2.言語コードを指定する
- html要素のlang属性またはxml：lang属性に、使用している言語を記述する。
- ページ内に別の言語を表記する場合に、lang属性を用いて言語を記述する。
6.3.文字コードを指定する
- 文字コードutf‐8で作成する。head要素のmeta要素内に、utf‐8と記述する。
6.4.機種依存文字は使用しない
- 丸数字やローマ数字は、原則として使用しない。
- 旧字体は、原則として使用しない。
6.5.問い合わせ先を表示する
- 各ウェブページの最後に、問い合わせ先を表示する。
6.6.単語の間にスペースや改行を挿入しない
- 体裁を整えるため、単語内の文字と文字との途中にスペースや改行を入れない。
- 原稿の中に空白を含む単語があっても、ページを作成する際には削除する。
6.7.画像に適切な代替テキストを用意する
- 短い文字情報を含む画像（リンクバナー等）は、画像内に記載されている文字の内容をそのまま代替テキストに入れる。
- 写真やイラスト等の画像を使用する際は、代替テキストに画像で表現している内容を簡潔に表す言葉を入れる。
- 業務の説明図やグラフ、地図など複雑な内容を示している画像の場合は、簡潔な代替テキストを入れた上で、画像近くの本文内に、画像の内容を説明する文章や表を掲載する。
- 装飾や見た目の整形を目的とした、情報として意味のない画像は、音声で読まれないように代替テキストを空（alt=””）にする。
- リンクが張らの張られている画像には、リンク先の内容を予測できるような代替テキストを指定する。
6.8.音声で情報を提供する場合は、音声で伝える情報の内容をテキストで用意する
- 音声で情報を提供する場合は、音声で伝える情報の内容をテキストで掲載する。
- テキストの準備が難しい場合は、提供内容に関する問い合わせ先を明記する。
- 音声を自動的に再生しない。
6.9.動画で情報を提供する場合は、動画で伝える情報の内容をテキストで用意する
- 動画で情報を提供する場合は、以下のいずれかの対応を行う。動画の音声の内容を字幕で提供する。また、動画の映像で表現されている情報について、動画内で音声による説明（音声ガイド）を提供する。動画で伝える情報の内容をテキストで掲載する。
- 上記の対応が難しい場合は、提供内容に関する問い合わせ先を明記する。
- 外部の動画配信サービスを利用する場合も同様の対応をする。
6.10.PDFを使用する場合は作成方法、提供方法に配慮する
- 情報提供はページ本文で行うことを基本とし、PDF形式で提供しなければならない情報かどうか確認する。
- 紙の文書をスキャナーなどで画像として取り込み、PDFに変換したものを提供しない。
- 業者に依頼した印刷物をPDFで掲載する場合は、文字が埋め込まれていることを確認する。
- PDFを利用できない場合でも内容を把握できるよう、PDFで提供している情報の内容をテキストで掲載する。対応が難しい場合は、提供している内容に関する問い合わせ先を明記する。
- HTML以外のPDFなどを提供するウェブページでは、無償の閲覧用ソフトのダウンロード案内及びリンクを表示する。
6.11.色のみに依存した情報提供はしない
- 情報の意味や位置づけの違いは、色の違いで表現するだけでなく、文字内容などでも違いが分かるようにする。
6.12.形または位置のみに依存した情報提供はしない
- 画像には適切な代替テキストを用意し、画像の形や大きさなどを認識できない場合でも、内容を適切に理解できるようにする。
- 記号だけで情報の内容を伝えることは避ける。どうしても必要な場合は、画像化して配置し適切な代替テキストを用意する。
- 位置の違いで情報の違いを表したり、操作を指示したりしない。
7.入力や操作を支障なく行えるようにするための配慮
7.1.キーボードだけですべての操作が行えるようにする
- すべての操作をキーボードで行えるようにする。
- 新規にホームページを作成する場合は、キーボードのTABキーとEnterキーを使って、ホームページ内のリンクを利用できること、入力フォームなどを利用できることを確認する。
- キーボードのTABキーを使ってホームページ内のリンクやフォームの選択候補（フォーカス）を移動する場合に、情報の意味のつながりや関係性に即した順序で移動するように、リンクやフォームを配置する。
- キーボード・フォーカスがあたっていることが視覚的に確認できるようにする。
7.2.入力フォームはわかりやすく作成する
- 入力フォームを用いたページを作成する際には、以下の内容に配慮する。
7.3.フォームの入力内容を確認し、取り消しや修正が可能な仕組みを用意する
- フォームを作成するときは、利用者が一度入力した内容を確認し、必要に応じて修正してから送信したり、送信を取りやめたりすることができる仕組みを用意する。
- 入力必須箇所や特定の形式での入力が求められている箇所で入力エラーとなった場合に、エラー箇所を一目で分かるように表示する。
- 入力内容の修正を求める場合には、修正が必要な箇所とその修正方法を一目で分かるように表示する。
- 入力したすべての項目を入力しなおすことなく、修正が必要な項目だけを編集できる仕組みを用意する。
7.4.閲覧や操作、入力に制限時間を設定しない
8.危害や苦痛を与えないための配慮
8.1.画面の激しい点滅は行わない
- 画面全体または画面の一部を１秒間に3回より多く点滅させない。
8.2.表示内容の移動や変化について注意する
- 原則として表示されているテキスト、あるいはテキストを含む画像を移動させない。
- 複数の画像が一定時間ごとに切り替わり続ける仕組み（スライドショー）を設ける場合は、利用者が一時停止、再生を行えるようにする。
- 表示内容が変化する画像（バナーなど）を作成する必要がある場合は、5秒経過したら静止させる。
