年齢、障害の有無、利用環境などに関わらず、あらゆる利用者が快適に閲覧できるホームページが必要となってきています。
本ガイドラインは、より多くの方に快適に湯沢市ホームページが利用・閲覧できるよう、ホームページ作成に際して実施していく項目をまとめたものです。
湯沢市のウェブアクセシビリティ方針
湯沢市のウェブサイトでは、アクセシビリティの確保・維持・向上を実現するため「JIS X 8341-3:2016高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」への対応に取り組んでいます。
対象範囲
本ガイドラインの対象となるホームページは、湯沢市公式ホームページ「https://www.city-yuzawa.jp」以下のコンテンツとします。
配慮の対象となる利用者
本ガイドラインは、年齢や障害の有無等に関わらず、湯沢市公式ホームページを訪れる全ての利用者を対象とします。
構造及び表示スタイルに関する配慮
文書の構造化を図ります。
- テキストを見出し、段落、リスト化する場合は、文字装飾(強調文字)や改行、スペース、「・」や「1,2,3」などの記号等を用いて行うのではなく、専用の文法(見出し指定、段落、リストタグの指定)を守って行います。
表を利用したレイアウト調整を禁止します。
- 表を利用した、画像や文章などの位置調整(レイアウト調整)は行いません。音声読み上げソフトを利用すると、コンテンツの作成者の意図せぬ順番で読み上げが行われ、内容が正しく伝わらない場合があります。
ファイル添付のみのページを作成しません。
- テキストによる説明なしに、ファイル添付のみでページを作成せず、添付ファイルの内容を要約したテキストを記載し、利用者がファイルを開かなくても内容が理解できるようにします。
ページタイトルは内容が予測しやすく、他ページと識別できるものにします。
- ページタイトルはそれぞれページ内容を把握できるタイトルをつけるように心掛けます。同じページタイトルが複数存在しないようにします。
選択されているものが視覚的にわかるようにします。
- ページ内のどの部分が、選択・入力可能な状態になっているのかを視覚的に理解できるよう工夫します。
- 障害者にも利用できるよう、マウスを使わず、キーボードのみで操作できるようになっていなければなりませんが、その場合、キーボードのフォーカス(エンターキーを押すと反応する部分)がどこに当たっているか、分かるようにします。
表を使わずに表現する手段を優先します。表を使う場合は以下の項目に配慮します。
- どのような表か明確にわかるようなタイトルを付けます。
- 数値を表示するときは、視覚的に煩雑にならない範囲で各セルに単位を記述します。
- 見出しを設定します。
- 見出しの対象範囲を設定します。
- セル数の多い大きな表はなるべく使用しません。
- セルの結合は必要最小限とし、複雑に入り組んだ表にしないようにします。
- 表は一番上の「行」から、「行」ごとに左から右方向に読み上げられます。読み上げられた際に意味が伝わりやすいよう表を作成します。
フレームは使用しません。
- フレームを使用すると、音声ソフトで正しく読み上げられなかったり、正しく印刷などが行えなかったりする場合があります。また検索サイトにより訪れた利用者の表示されたページが、フレームの一部分であった場合、その他のページに移動できなくなる可能性があります。
操作及び入力に関する配慮
デザインや位置などはウェブサイト内で統一します。
- サイトタイトルや閲覧支援機能を含むヘッダー、グローバルナビゲーション、フッターはページ内の同じ位置に配置します。「戻る」ボタンなどに使用する画像は、ウェブサイト内で統一し、画像の代替文字も必ずつけます。
全ての操作がキーボードだけで可能にします。
- 上肢に障がいのある方の中には、マウス操作が困難な方もいらっしゃいます。また視覚に障がいのある方は画面上のマウス(ポインタ)の位置がわからないため、キーボードで操作を行います。そのような人のために、キーボードだけで操作できるように配慮することを心掛けます。
入力方法・条件を明確なテキストで表示します。
- 利用者に情報の入力を要求する場合には、入力ミスやエラーが発生する可能性を考え、送信する前に確認・修正できるようにします。また、修正をする場合には利用者に負担をかけないよう入力済みのデータが残るようにします。
ページのリンクは原則として同一ウィンドウで開くように設定します。
- 新しいウィンドウでリンクを開く場合は、リンクを設定している文字・画像の前か後に、「別ウィンドウで開きます」と表示させるなどして、利用者が気づかないうちに新しいウィンドウのページへ移動しないように注意します。
「戻る」ボタンを適切に利用できるようにします。
- ブラウザの「戻る」ボタンまたはページ内のリンクによって前のページに戻れるかどうかを確認します。
リンクテキストだけで、リンク先の内容が予測できるようにします。
- 音声読み上げソフトの中には、リンクだけを読み上げる機能を有しているものもあります。したがってリンクには「こちら」などといったものではなく、リンク先の内容を予測できるものを設定する必要があります。またリンクを貼った部分が長いと逆に利用者がリンク先の内容を理解するのに時間がかかってしまうので、リンク先の内容を予測しやすい適切な部分にリンクを設定します。
コンテンツのスキップ、メニューの読み飛ばしができるようにします。
- ページ内におけるコンテンツのまとまり(メニューや、新着情報など)ごとに、音声読み上げソフト使用時に、これをスキップ(読み飛ばす)できるように、まとまりの始めの位置に、終わりの位置へのリンクを設定します。
他のページに遷移するボタンである「ナビゲーション」のデザイン、位置を統一します。
- 全ページに共通するグローバルナビゲーション、当該ページのサイト内における位置を示すパンくずナビゲーション、サイトの中の一部コーナーで共有するローカルナビゲーションがあり、これらは統一されたデザイン、位置に存在するようにします。
パンくずナビゲーションを全ページに表示します。
- 現在位置を示す情報として「パンくずナビゲーション」を全ページに表示します。
- パンくずナビゲーションは、原則として「トップページ」をスタート位置として表示させます。
非テキスト情報に関する配慮
代替テキストは、画像が見えなくても画像の内容が正しく伝わるように設定します。
- 音声読み上げソフトを利用した際に、画像の代わりに読み上げられるテキストとなります。また、画像が正しく表示されない場合にも表示されることになるため、正しく伝わるように設定します。
音声情報をテキストで提供します。
- 音声を提供する場合、内容を書き起こした代替テキストを合わせて掲載するなど、どんな利用者にも情報が正しく伝わるように、複数の手段を用意します。
動画の代替テキストを提供します。
- 動画や音声を配信する場合には、どんな利用者にも内容が正しく伝わるようにテキストを併用するなど、どんな利用者にも情報が正しく伝わるように、複数の手段を用意します。
色及び形に関する配慮
色だけで情報を区別しません。
- 情報の識別や指示は、色だけでなく文字等で分かるようにします。
- 色だけを使用せずに、文字やパターン(模様)などを併用することなどを心掛けます。
形や位置だけでなく、文字でも識別できるように配慮します。
- 情報の表示や識別について、形や位置だけで表現することは避け、テキストを併用し、画面上の表示に関係なく内容を把握できるように配慮します。
文字色・背景色は原則指定しません。
- サイト全体の統一感を意識するとともに、色覚に障がいのある利用者が、正しく内容を理解できるように配慮します。
文字に関する配慮
文字サイズや書体指定をしません。
- 文字の大きさや種類(明朝やゴシックなどの書体)は指定しません。
機種依存文字は使用しません。
- 機種依存文字とは、特定のPC・ソフトでしか正しく表示されない文字のことです。PC・ソフトによっては正しく表示されない場合があるので、使用しないように注意します。
統一書式で表記します。
- 音声読み上げの際に正しく読み上げられるように、日付、時刻、電話番号、数値は統一書式で表記します。
ローマ字、英単語の表記の読み上げに対応します。
- ローマ字で表記するときや、英単語(省略語以外)を使用するときは、頭文字以外を小文字で表記します。(※全て大文字の場合、アルファベットの名前を読み上げることがあるため)
- ロゴやタイトルなど、意図的に大文字表記とする場合は、かっこ書きで読みや日本語名を併記するなどの配慮をします。
画像化された文字の使用を制限します。
- 文字を画像化して使用する場合は、装飾のために画像化した方が適切な場合や、文字の形が重要な商標の表示やパソコンで表示できない文字等、形を守る必要のある場合に限定します。
音に関する配慮
音声の再生を3秒以内に自動的に停止します。
- 自動的に音を再生しないようにします。再生する場合、利用者が一時停止できる仕組み、または、音量を調整できる仕組みをページの先頭付近で提供し、音声読み上げソフトの利用者がコンテンツで再生される音によって邪魔されないようにします。
速度に関する配慮
変化・移動する画像や文字の使用を禁止します。
- 変化する画像、テキスト等は使いません。
- 画面に表示される内容は点滅させません。
- GIFアニメや、点滅・移動するテキストは使用しません。
言語に関する配慮
基本言語と文字コードを指定します。
- html要素にlang属性またはxml:lang属性を指定することで、ウェブサイトの基本となる言語を明確にします。
- HTMLの場合はhtml要素のlang属性を使用し、その言語コードを記述します。
固有名詞や専門用語に注意します。
- 読みの難しい言葉、省略語、専門用語はページ内で初めて使用するときに、「読み」や「意味・解説」を明示します。
- 専門用語や難しい用語については多用を避け、使用する場合には注釈をつけます。
略語に注意します。
- ページの中で略語が最初に現れたときに、その略語の元の語(省略する前の語)または意味が分かるように配慮します。
差別用語等に注意します。
- 差別用語など、行政が用いることにふさわしくない表現の使用を避けます。
利用者にわかりやすい表記を心掛けます。
- 次に起こることが予測できるよう表現を使用します。
- 利用者との共通認識がある表現を使用します。
- 行政用語の使用を避けます。また、利用者が誤解をする可能性がある表現は使用しません。
- 一般的すぎず、具体性を持たせた表現を心掛けます。
- 文体は、「です。ます。」調で統一し、言葉遣いは、日常一般に使われている理解しやすい表現を使用します。