姫路市ウェブアクセシビリティガイドライン（抜粋版）

「姫路市ウェブアクセシビリティガイドライン」(以下、本ガイドラインという)は、日本工業規格（JIS X 8341-3：2016）を踏まえ、姫路市が運営するウェブサイトにおいて高齢者・障害者をはじめ全ての人々の利便性に配慮した情報提供を行うため、ウェブページの作成を行う際に注意すべき点について、詳しく解説したものです。

姫路市が運営するウェブサイトを通じて情報提供のさらなる充実を図ることを、本ガイドラインの目的として位置づけます。

本ガイドラインは、姫路市公式ウェブサイトをはじめ、姫路市が作成し運営する全てのウェブコンテンツを対象とします。

「ウェブページを利用するすべての人が、心身の機能や利用する環境に関係なく、ウェブページで提供されている情報やサービスを利用できること」をウェブアクセシビリティといいます。

平成16年6月にウェブアクセシビリティに関する国内の標準規格であるJIS X 8341-3:2004「高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェアおよびサービス－第3部：ウェブコンテンツ」（以下、JIS X 8341-3:2004）が制定されました。その後、国内外のウェブ制作技術の変化等を踏まえ、国際標準であるウェブアクセシビリティ指針Web Content Accessibility Guidelines 2.0（WCAG2.0）に合わせた全面改正が行われ、平成22年8月20日にJIS X 8341-3：2010として公示されました。
その後、WCAG2.0は平成24年10月に「ISO/IEC 40500:2012」として勧告されました。JIS X 8341-3:2016は、「ISO/IEC 40500:2012（WCAG 2.0）」と完全一致する形へ改正され、平成28年3月に公示されました。
総務省ではJIS X 8341-3:2016の改正公示、および障害者差別解消法の施行を踏まえ、国および地方公共団体等の公的機関のウェブアクセシビリティ対応を支援するための「みんなの公共サイト運用ガイドライン（2016年版）」を平成28年4月に公表しました。公的機関は運用ガイドラインにより、JIS X 8341-3:2016の適合レベルAAに準拠することが求められています。

本ガイドラインは、姫路市公式ウェブサイトを訪れるすべての利用者を配慮の対象とします。
その中で、特に現時点で利用する際に問題が生じることの多い以下の利用者について、できる限りの配慮を行います。

• 全盲（目が見えない。音声読み上げソフトの利用者など）
• 弱視（極めて見えにくい）
• 色覚障害（色の違いが分かりづらい）

• 耳が聞こえない、聞こえにくい

• 手の動作が不自由でマウスやキーボードを操作することが難しい

• 難しい漢字や複雑な文章を理解することが難しい
• ウェブページの利用に慣れていない
• 古いウェブブラウザを使用している
• 低速な通信環境で利用している

本ガイドラインでは、総務省「みんなの公共サイト運用ガイドライン（2016年版）」が求めるJIS X 8341-3：2016の適合レベルAAを実現することを目標に、ウェブページの作成を行う際注意すべき点を示しています。

利用者の閲覧環境の変化やウェブページの制作技術の変化などに対応するために、本ガイドラインを年に1回見直しの検討を行うものとします。

年に1回以上職員等を対象にしたウェブアクセシビリティ研修を実施し、ウェブアクセシビリティの必要性や対応方法等について周知するとともに、日々のウェブページ作成・更新において必要な対応を促します。

• ページの内容を予測できるページタイトルをつける。
• 他のページのページタイトルと重複しないようにする。
• ページの内容を表すタイトルの先頭に「姫路市｜」と記載する。
• ページタイトルは可能な限り28文字以内とし、簡潔に表現する。

• 各ページのヘッダー・フッターを統一する。
• 各ページに姫路市公式ウェブサイトの主要なメニューを共通で配置する。
• トップページへ移動するリンクや、ページの上端へ移動するリンクなど、同じ機能を有するリンクの名称と見映えをウェブサイト内で統一する。

• 各ページに、現在位置と上位階層への移動手段を示すナビゲーション（階層ナビゲーション＝パンくずリスト）を配置する。また、このナビゲーションの先頭のリンクは「ホーム」という表記で統一する。
• 階層ナビゲーションのうち現在表示しているページの名称には、リンクを指定しない。

各ページの先頭に、共通のメニューを読み飛ばし、ページ内で提供している情報の先頭にジャンプするために「本文へ」というリンクを視覚的に見える形式で設置する。

• ウェブサイト内の情報探索手段としてキーワード検索機能を各ページで提供する。
• ウェブサイト内の情報探索手段としてサイトマップを用意し、各ページにリンクを提供する。
• そのほか、関連するページへのリンクなどを必要に応じて提供する。

• ウェブページの作成にあたっては、文書の論理的な構造を意識し、ページ内に配置する情報それぞれに対して、見出しを適切に指定する。
• 見出しは見映えを変えるのではなく、CMSで見出しを設定する。
• 見映えを変えるために、文書の構造に関係なく見出しを設定しない。

• 順番に意味のある箇条書きは、CMSで「番号付き箇条書き」を指定する。
• 順番に意味のない箇条書きは、CMSで「記号付き箇条書き」を指定する。
• テキストで「○」「」「・」などを行頭へ配置することによって箇条書きを表現しない。

• リンクテキストは下線を引き、リンクしていないテキストと識別しやすくする。
• リンク画像は小さくしすぎないように設定し、クリックできる画像であることを認識しやすい見映えにする。
• リンクテキストおよびリンク画像は、適切な間隔を空けて配置する。
• リンクテキストおよびリンク画像は、リンク部分にマウスカーソルを乗せた時や、キーボード操作によってリンクにフォーカス（選択可能領域）を合わせた時に、色が変わるなどの変化をつけることにより、リンク可能な箇所であることを明示する。

• 原則として、リンク先のページタイトルを利用することとし、長すぎる場合には要約を記載する。「こちら」などの表現は使用しない。
• リンクテキストは、リンク先のページタイトルと大きく異ならないようにする。

• PDFファイル等へのリンクは、ファイル形式と容量を記入し、リンクテキストに含める。

• 外部のホームページへリンクを張る際には、リンクテキストに外部のウェブサイトであることを記入し、外部のウェブページへ移動することを予測できるようにする。

• リンクは同一のウィンドウ内で遷移するように設定する。新しいウィンドウを開かせることはしない。ただし、外部サイトへのリンクについては、新しいウィンドウで開くものとする。
• 利用者の意図しないポップアップウィンドウは使用しない。
• 新しいウィンドウを開く仕組みを用いる場合は、利用者自身がリンクを選択した時のみ開くようにする。自動的に新しいウィンドウが開く仕組みは用いない。

• ページ内のテキストや画像などにおいては、文字の色と背景の色の組合せやコントラストに十分配慮する。
• 文字の入った画像などを作成したり、外部業者へウェブページの制作を依頼する際は、文字の色と背景の色の組合せやコントラスト（明暗の差）に十分配慮する。
• 色の組合せやコントラストに問題がないか、チェックツールを用いて確認する。

• レイアウトや文字の大きさ、色などは、原則としてスタイルシートで設定する。
• スタイルシートに対応していないウェブブラウザで表示した場合でも情報が伝わるようにする。
• テキストを画像化する場合、スタイルシートで同程度の装飾表現が実現できないか検討し、可能な場合はスタイルシートによって表現する。

• 文字のサイズはemや%などの相対的な単位で指定する。pt(ポイント)やpx(ピクセル)などの絶対的な単位は使用しない。
• 主要なブラウザの機能で文字サイズが変更できることを確認する。
• 文字サイズを200%まで拡大できるようにするとともに、文字サイズを変更した場合に、情報が読み取れないほど表示が崩れることがないように作成する。

• 固有名詞や読みの難しい言葉には、読み方を括弧書きで併記する。

• スタイルシートや、表組みの仕組みを使ってレイアウトする場合は、音声読み上げソフトで読んだ場合に意味が通じるように構成する。

• ウェブページの内容の自動更新が行われる場合、利用者がそれを停止あるいは非表示できる仕組み、または更新頻度を調整できる仕組みを用意する。
• ウェブページの内容の自動更新や入力内容の自動送信が行われる場合、そのことが事前に利用者にわかるよう、説明を記載する。

• 新たにウェブサイトを構築する際には、HTMLやスタイルシートといった使用する技術について、どのバージョンやDTD（文書型定義）で作成するかを、事前に検討し決定する。
• 各ウェブサイトにおいて、決定した規格に従って作成、更新を行う。

• html要素のlang属性またはxml:lang属性に、使用している言語を記述する。
• ページ内に別の言語を表記する場合に、lang属性を用いて言語を記述する。

• 文字コードutf-8で作成する。head要素のmeta要素内に、utf-8と記述する。

• 丸数字やローマ数字は、原則として使用しない。
• 旧字体は、原則として使用しない。

• 各ウェブページの最後に、問い合わせ・作成部署を表示する。

• 体裁を整えるため、単語内の文字と文字との途中にスペースや改行を入れない。
• 原稿の中に空白を含む単語があっても、ページを作成する際には削除する。

• 短い文字情報を含む画像（リンクバナー等）は、画像内に記載されている文字の内容をそのまま代替テキストに入れる。
• 写真やイラスト等の画像を使用する際は、代替テキストに画像で表現している内容を簡潔に表す言葉を入れる。
• 業務の説明図やグラフ、地図など複雑な内容を示している画像の場合は、簡潔な代替テキストを入れた上で、画像近くの本文内に、画像の内容を説明する文章や表を掲載する。
• 装飾や見た目の整形を目的とした、情報として意味のない画像は、音声で読まれないように代替テキストを空（alt=""）にする。
• リンクの張られている画像には、リンク先の内容を予測できるような代替テキストを指定する。

• 音声で情報を提供する場合は、音声で伝える情報の内容をテキストで掲載する。
• テキストの準備が難しい場合は、提供内容に関する問い合わせ先を明記する。
• 音声を自動的に再生しない。

• 動画で情報を提供する場合は、以下のいずれかの対応を行なう。
  動画の音声の内容を字幕で提供する。また、動画の映像で表現されている情報について、動画内で音声による説明（音声ガイド）を提供する。
  動画で伝える情報の内容をテキストで掲載する。
• 上記の対応が難しい場合は、提供内容に関する問い合わせ先を明記する。
• 外部の動画配信サービスを利用する場合も同様の対応をする。

• 情報提供はページ本文で行うことを基本とし、PDF形式で提供しなければならない情報かどうか確認する。
• 紙の文書をスキャナーなどで画像として取り込み、PDFに変換したものを提供しない。
• 業者に依頼した印刷物をPDFで掲載する場合は、文字が埋め込まれていることを確認する。
• PDFを利用できない場合でも内容を把握できるよう、PDFで提供している情報の内容をテキストで掲載する。対応が難しい場合は、提供している内容に関する問い合わせ先を明記する。
• HTML以外のPDFなどを提供するウェブページでは、無償の閲覧用ソフトのダウンロード案内およびリンクを表示する。

• 情報の意味や位置づけの違いは、色の違いで表現するだけでなく、文字内容などでも違いがわかるようにする。

• 画像には適切な代替テキストを用意し、画像の形や大きさなどを認識できない場合でも、内容を適切に理解できるようにする。
• 記号だけで情報の内容を伝えることは避ける。どうしても必要な場合は、画像化して配置し適切な代替テキストを用意する。
• 位置の違いで情報の違いを表したり、操作を指示したりしない。

• すべての操作をキーボードで行えるようにする。
• 新規にホームページを作成する場合は、キーボードのTABキーとEnterキーを使って、ホームページ内のリンクを利用できること、入力フォームなどを利用できることを確認する。
• キーボードのTABキーを使ってホームページ内のリンクやフォームの選択候補（フォーカス）を移動する場合に、情報の意味のつながりや関係性に即した順序で移動するように、リンクやフォームを配置する。
• キーボード・フォーカスがあたっていることが視覚的に確認できるようにする。

• 入力フォームを用いたページを作成する際には、以下の内容に配慮する。

• フォームを作成する時は、利用者が一度入力した内容を確認し、必要に応じて修正してから送信したり、送信を取りやめたりすることができる仕組みを用意する。
• 入力必須箇所や特定の形式での入力が求められている箇所で入力エラーとなった場合に、エラー箇所を一目でわかるように表示する。
• 入力内容の修正を求める場合には、修正が必要な箇所とその修正方法をひと目でわかるように表示する。
• 入力したすべての項目を入力しなおすことなく、修正が必要な項目だけを編集できる仕組みを用意する。

• 画面全体または画面の一部を1秒間に3回より多く点滅させない。

• 原則として表示されているテキスト、あるいはテキストを含む画像を移動させない。
• 複数の画像が一定時間ごとに切り替わり続ける仕組み（スライドショーなど）を設ける場合は、利用者が一時停止、再生を行えるようにする。
• 表示内容が変化する画像（バナーなど）を作成する必要がある場合は、5秒経過したら静止させる。