Comments
Description
Transcript
長崎県ウェブサイト アクセシビリティガイドライン
長崎県ウェブサイト アクセシビリティガイドライン 改訂第４版 長崎県 2016 年 8 月 25 日 １．ガイドラインの目的 ウェブサイトは文字や画像、音声、映像を組み合わせて、いろいろな情報をいろいろな 形で表現することができます。また、インターネットの普及、携帯コンテンツの進歩によ り、勤務先のほか、学校や自宅、屋外など、あらゆる場所でウェブサイトにアクセスする ことができます。 そのため、ウェブサイトやウェブシステムの作成にあたっては、どのような利用者がい るのか、どのような環境で利用しているのか、改めて考えてみる必要があります。 ウェブサイトの作成については、さまざまな方が利用できるようにアクセシビリティに 配慮した日本工業規格（JIS 規格） 「JIS X 8341-3」が定められており、2016 年には World Wide Web Consortium（W3C）が定めた世界的共通の規格（ウェブ・コンテンツ・アク セシビリティ・ガイドライン（WCAG）2.0）に準じた改正が行われました。 この規格に準じて、総務省において「みんなの公共サイト運用ガイドライン」の策定・ 改定が行われ、さまざまな方が利用する公共機関のウェブサイトについては、JIS 規格に 基づいたサイト作成が求められています。 このような背景から、長崎県では、多くの人にウェブサイトを利用していただき、ウェ ブサイトを電子県庁として、各課と利用者を直接結びつける媒体として利用できるよう、 「長崎県ウェブサイトアクセシビリティガイドライン」を作成し、取り組むことにより、 利用者と情報発信者が利用しやすいウェブサイトを構築していきます。 ２．ガイドラインの考え方 ガイドラインは次に示す利用者の環境を想定して作成しています。 （１）ウェブサイト利用者 年齢や性別、身体の障害の有無などに関らず、ウェブサイトを利用するすべての利 用者 （２）ウェブサイトを利用する環境 ウェブサイトを利用するさまざまな利用環境を想定しています。 ・デスクトップ型パソコンやノート型パソコン、モバイル端末などハードウェアの違い ・ブロードバンドやナローバンドなどの通信環境の違い ・Windows や Macintosh などの OS（基本ソフト）の違い ・Internet Explorer や Firefox などブラウザソフトの違い ・キーボードやマウスがない環境など操作機器の違い ・カラーやモノクロのディスプレイの表示機器の違い ・身体障害の状況に応じた入出力機器などの違い （３）適用範囲 長崎県公式ウェブサイトのほか、長崎県が制作・運営するウェブサイト、ウェブサ イトを通じて提供するサービスサイト。 1 （４）参考とする規格等 ・JIS（日本工業規格） 「JIS X 8341-3 : 2016『高齢者・障害者等配慮設計指針－情報通信における機器、 ソフトウェア及びサービス－ 第 3 部：ウェブコンテンツ』」 ・総務省 公共分野におけるウェブアクセシビリティの確保の取り組みの充実に関する調査研 究報告書 「みんなの公共サイト運営ガイドライン（2016 年度改定版）」 ・W3C 「ウェブ・コンテンツ・アクセシビリティ・ガイドライン（WCAG）2.0」 （参考） 障害者基本法（情報の利用におけるバリアフリー化等） 第 22 条 2（平成 23 年改正） 「国及び地方公共団体は、災害その他非常の事態の場合に障害者に対しその安全を確保する ため必要な情報が迅速かつ的確に伝えられるよう必要な施策を講ずるものとするほか、行政 の情報化及び公共分野における情報通信技術の活用の推進に当たつては、障害者の利用の便 宜が図られるよう特に配慮しなければならない。」 障害者基本計画（第 3 次計画 平成 25 年度～平成 29 年度） III 6-（4）-1 「各府省において，障害者を含む全ての人の利用しやすさに配慮した行政情報の電子的提供 の充実に取り組むとともに，地方公共団体等の公的機関におけるウェブアクセシビリティの 向上等に向けた取組を促進する。」 障害を理由とする差別の解消の推進に関する法律（平成 28 年 4 月 1 日施行） （行政機関等における障害を理由とする差別の禁止） 第七条２ 「行政機関等は、その事務又は事業を行うに当たり、障害者から現に社会的障壁の除去を必 要としている旨の意思の表明があった場合において、その実施に伴う負担が過重でないとき は、障害者の権利利益を侵害することとならないよう、当該障害者の性別、年齢及び障害の 状態に応じて、社会的障壁の除去の実施について必要かつ合理的な配慮をしなければならな い。」 工業標準化法（日本工業規格の尊重） 第 67 条 「国及び地方公共団体は、鉱工業に関する技術上の基準を定めるとき、その買い入れる鉱工 業品に関する仕様を定めるときその他その事務を処理するに当たつて第二条各号に掲げる 2 事項に関し一定の基準を定めるときは、日本工業規格を尊重してこれをしなければならな い。」 （そのほかの基準・指針） ・障害者の権利に関する条約（Convention on the Rights of Persons with Disabilities） ・Web サイト等による行政情報の提供・利用促進に関する基本的指針 ・電子自治体の取組を加速するための 10 の指針 ・政府情報システムの整備及び管理に関する標準ガイドライン ３．ウェブアクセシビリティ取組方針 ウェブアクセシビリティ確保のために、職員をはじめ、委託事業者とも連携して取り組 んでいきます。 （１）取組体制について 長崎県が提供するウェブサイトのアクセシビリティ確保に向け、制度の管理運営を 行う庁内インターネット活用推進会議（仮称）を設置し、コンテンツを作成する各所 属への周知を行うとともに、コンテンツ制作委託事業者や検証を依頼する外部モニタ ーなど協力を得ながら運営を行う。 （２）職員の意識向上について 実務的なウェブアクセシビリティ配慮のためのガイドラインを整備し、周知してい くとともに、ウェブアクセシビリティの理解を深める研修や、ホームページ作成に関 する研修を継続的に実施し、コンテンツ作成に携わる職員のウェブアクセシビリティ 確保に取り組みます。 職員はコンテンツを作成・更新するときには、チェックシートなどによりウェブア クセシビリティが確保されているか確認し、適切な配慮を行った後に公開していくよ うに努めます。 また、ウェブサイト管理者は、作成時に確認できるチェックツールなどを導入し、 コンテンツ作成時の確認を支援します。 （３）委託業者への取組 業務委託を行う場合には、仕様書に別添個別遵守事項のうち、必要なものを添付し、 委託業者へ遵守させるとともに、検収時の確認作業をとおして、アクセシビリティに 配慮したサイト制作を進めます。 （４）検証について ウェブアクセシビリティ対応状況については、手順書やチェックツール等を使用し て、作成・更新時はもとより、既存のコンテンツについても検証していきます。 また、ホームページやウェブコンテンツについて、必要に応じ、ユーザーテストや 意見募集を行い、問題点について検証し、改善に努めていきます。 ４．前提となる注意点 3 （１）ウェブコンテンツに関する規格や技術仕様の遵守。 ウェブコンテンツは、各種ブラウザや OS・支援技術（音声読み上げや拡大機能な ど）などとの連携によって利用者に提供されます。どのような方でも利用できるよう にするためには、共通のルールに準拠して制作する必要があります。 【実例】 ・HTML や CSS などは、W3C が発表している WEB 標準に則って記述する。 ・Flash や PDF など、特定企業が推進している技術は、それぞれの企業が公式に 発表している規格や仕様を守る。 ・HTML コーティングにおいて、不要な記述は避ける。 ※不必要な記述があると、ブラウザによってはきれいに表示されない場合があり ます。 （２）情報デザイン（情報の整理やページ構成など）への配慮。 ウェブサイトで提供するすべての情報は、その情報の整理を行い、サイトの構成・ ページレイアウト・コンテンツの表現方法などについて、利用者の立場に立って検討 しましょう。 （３）アクセシビリティとユーザビリティへの配慮。 アクセシビリティは「使えるかどうか」 、ユーザビリティは、 「使いやすさ（学習し やすさ、操作の効率性など） 」の問題を中心として扱います。両者を明確に区分でき ない場合も多く、アクセシビリティに取り組むことは、ユーザビリティの向上にもつ ながります。 そのため、どちらか一方だけを考えるのではなく、両方について考慮することが効 果的です。 （４）セキュリティ、プライバシーへの配慮。 セキュリティには、システムに対するものと情報に対するものがあります。 システムを構築するプログラムが攻撃を受けると、ほかのプログラムにも影響する など、多大な被害を受けます。プログラムを開発する際には、セキュリティを意識し た制作を行うとともに、運営を行う際のパスワードなどの管理も重要です。 情報は、ウェブサイトで公開している間は生きた情報となります。期限が過ぎてい る情報を掲載することは、利用者にとって不快感や不利益を与えることになり、場合 によっては、損害賠償請求や著作権侵害などの損害賠償を求められるなど、県にとっ て不利な状況になる可能性があります。 また、個人情報の取り扱いについては、特に注意する必要がありますので、関係法 令を遵守するとともに、プライバシーポリシーを制定して、運営時には厳格に守るな ど、企画・制作・運営時において、それぞれの取組を行ってください。 ５．企画・制作上の注意点 （１）企画するときからアクセシビリティに配慮する ウェブサイトを制作する場合は、ターゲットとなる利用者やアクセシビリティへの 4 配慮について定めてください。情報更新頻度の高いサイトの場合、更新時に品質を保 てない場合があるため、コンテンツ管理システム（CMS）を導入することも選択肢 の１つになります。 （２）業務委託を行う場合 業務委託を行う場合、仕様書に使用するガイドラインについて記述し、業者に周知し てください。 また、納品されたページやシステムに対して、必ずページ検証を行ってから公開して ください。 （３）公開前にチェックするブラウザのバージョン 【パソコン版】 Microsoft Internet Explorer 7 以上（必須） Google Chrome 最新版（任意） Opera 最新版（任意） Firefox 最新版（任意） Safari 最新版（任意） 【スマートフォン版】 iPhone、iPad 系 Safari Android 系 Chrome 【携帯版】 各携帯キャリアによる ６．個別遵守事項に関する注意点 個別遵守事項については、基本的事項からコンテンツ・オブジェクト・フォーム・動画 など、さまざまな項目が用意されています。 制作時に利用する項目について活用してください。 また、すべての項目をいきなり満たすことは難しいため、優先度を設けています。 優先度１は（必須）、２は（強く推奨）、３は（推奨）です。優先度１については必ず達 成するようにしてください。 5 長崎県ウェブサイトアクセシビリティガイドライン 個別遵守事項 目次 1.コンテンツ制作の基本事項 1-1 使用する規格を明確にする。 1-1-1. ウェブページを作成する際には、XHTML1.0 Transitional、CSS2.0 を用い、文字 コードは UTF-8 を使用する。 1-1-2. ウェブページのソースコードは、使用する技術や仕様に従って記述する。 1-1-3. 基本言語を指定する。 1-1-4. 部分的に異なる言語を用いる場合、その言語に適した言語コードを記述する。 1-2 ページ制作サイズは、表示サイズ等に配慮する。 1-2-1. 横スクロールが発生しないよう、ページ幅を配慮する。 1-2-2. ページの長さは、3 画面分程度に収める。 1-2-3. 印刷時に、A4 用紙に収まるよう、適切な設定をする。 1-3. レイアウトとコンテンツを分離する 1-3-1. レイアウトや装飾など視覚表現の制御には、スタイルシートを用いる。 1-4. 適切なフォルダ名、ファイル名をつける 1-4-1. フォルダ名、ファイル名は半角英数字を用い、簡潔に表現する。 1-5. ファイルサイズを小さくする 1-5-1. ファイルサイズの少ないページを作成するよう心がける。 2.コンテンツの構成や仕組みについて配慮する事項 2-1. コンテンツの制作に関する事項（レイアウト） 2-1-1. 位置や表示スタイルなどに一貫性のある基本操作部分を提供する。 2-1-2. フレームは使用しない。 2-1-3. 印刷時は、メニューなどの不必要な情報を除いて印刷できるようにする。 2-2. コンテンツの制作に関する事項（コンテンツ） 2-2-1. 適切なページタイトルを設定する。 2-2-2. 適切な HTML 要素を用いて文書の構造を記述する。 -1- 2-2-3. 現在位置を示す情報を付与する。 2-2-4. 文字の色はウェブセーフカラーを用いる。 2-2-5. 文字の色と背景の色には、十分なコントラストを確保する。 2-2-6. 文字の大きさは、pt、px で指定しない。 2-3. 情報提供に関する事項 2-3-1. 分かりやすい文章で表現する。 2-3-2. カタカナ文字・外国語・専門用語を多用しない。 2-3-3. 略語を使用する場合は、最初に説明を行う。 2-3-4. 読みの難しい言葉は、読み方を明示する。 2-3-5. 単語の途中にスペースや改行を入れない。 2-3-6. 機種依存文字は使用しない。 2-3-7. 色だけで情報の識別や指示をしない。 2-3-8. 形や位置だけで情報の識別や指示をしない。 2-3-9. 日付、時刻、通貨単位は、漢字表記を基本とする 2-3-10. サイト内で使う言葉は、全ページで統一した言葉を用いる。 2-3-11. 利用者からの問い合わせ方法を記述する。 2-4. イメージ（画像等）に関する事項 2-4-1. 画像、リンク画像には適切な代替テキストをつける。 2-4-2. 画像化された文字はできる限り使わない。 2-5. 表に関する事項 2-5-1. レイアウトのために表（table 要素）を使用しない。 2-5-2. 表を使用する場合は単純な構造にし、読み上げ順に配慮する。 2-6. リンクに関する事項 2-6-1. リンクは相互の間隔を十分に取り、大きな面積を確保する。 2-6-2. リンクを設定する場合は、リンク先が想像できる文言で表す。 2-6-3. リンクを開く際は、新しいウィンドウを開かない。 2-6-4. 自動的にページを更新したり、別のページに移動したりしない。 2-7. 管理に関する事項 2-7-1. 複数の経路でページに到達できるようにする。 2-7-2. 新着情報は、適切に管理する。 2-7-3. 掲載期間の過ぎた情報は掲載しない。 -2- 3.操作性に関する事項 3-1. さまざまな使用方法に対応できるようにする 3-1-1. マウスだけでなく、キーボードですべての操作ができるようにする。 3-1-2. すべてのページに共通する部分を読み飛ばすことができるしくみを提供する。 3-2. フォーカスに関する事項 3-2-1. キーボードによるフォーカス移動は、視覚的な順序と一致させる 3-2-2. フォーカスされていることが視覚的に認知できるようにする。 3-2-3. フォーカスが当たった時に、状況を変化させない。 4.オブジェクトに関する事項 4-1. 特定の技術やプラグインに対応していないブラウザの配慮を行なう。 4-1-1. プラグインを使用しなくても、同等の情報が得られるよう配慮する。 4-1-2. プラグインの入手先を明示し、操作方法の解説をする。 4-1-3. JavaScript によるページの移動を行なわない。 5.ダウンロードデータに関する事項 5-1. ダウンロードデータの提供は、その必要性について考慮する。 5-1-1. ダウンロードデータのみによる情報提供は行なわない。 5-1-2. ダウンロードデータは、ファイルの種類とファイルサイズを明示する。 5-2. PDF ファイルに関する事項 5-2-1. アクセシビリティに配慮した PDF を提供する。 5-2-2. ファイルサイズの大きな PDF ファイルは、分割して掲載する。 6.時間変化に関する事項 6-1. 時間変化を伴う表現は、使用方法に注意する。 6-1-1. 変化する画像、移動及び点滅するテキストは極力使用しない。 7.入力フォームに関する事項 -3- 7-1. 入力フォームに関する事項 7-1-1. ラベルは分かりやすい位置に配置し、フォームの構成部品に関連づける。 7-1-2. フォームの入力や選択の操作で、状況を変化させない。 7-1-3. 入力すべき内容と入力方法を説明する。 7-1-4. 入力エラー箇所を知らせ、修正を知らせる配慮をする。 7-1-5. 入力した内容を確認できるようにする。 7-1-6. 入力した内容を継承できるようにする。 7-1-7. 入力項目は少なくする。 7-1-8. 制限時間は設けない。 8.音声や映像に関する事項 8-1. 音声や映像で情報を提供する場合、代替情報も併せて提供する。 8-1-1. 音声情報を提供する場合は、内容を書き起こしたテキストや手話などの代替情報 を提供する。 8-1-2. 映像で情報を提供する場合には、音声またはテキストで代替する。 8-2. 音声や映像で情報を提供する場合、コントロールできるようにする。 8-2-1. 音や映像は自動的に再生しない。 8-2-2. 音や映像の再生は、利用者がコントロールできるようにする。 -4- 構成 【記述区分】 （優先度） ガイドラインの中でも、取組の優先度を表しています。 優先度１ ・・ （ａ）JIS 規格の適合レベル A 及び AA に該当し、目標達成 のために取り組まなければならないもの。 （ｂ）JIS 規格には項目がないが、配慮することで、利用者の利便性 を著しく増加させるもの。 優先度２ ・・ （ａ）配慮することで、利用者が快適に利用できるもの。 （ｂ）JIS 規格の適合レベル AAA に該当し、利用者の利便性に 大きく寄与するもの。 優先度３ JIS 規格の適合レベル ・・ AAA に該当するもの。 （達成基準・適合レベル） JIS X 8341-3:2016 達成基準 適合レベル ・・ に規定される達成基準とその適合レベルを表しています。 ・・ ページの作成において対応すべき個別的な要件を規定したもの。 アクセシビリティ対応の程度を示したもの。 （区分） U（ユニバーサルデザイン・利用しやすさ）と A（アクセシビリティ・誰でも利用できる） のどちらに配慮した仕様かを表しています。 【解説】 取組の内容を掲載しています。 【理由】 配慮しなければならない理由を掲載しています。 【対応方法】 作業内容を掲載しています。 【確認事項】 制作したファイルの確認方法を掲載しています。 -5- 1.コンテンツ制作の基本事項 1-1 使用する規格を明確にする。 1-1-1. ウェブページを作成する際には、XHTML1.0 Transitional、CSS2.0 を用い、文字コ ードは UTF-8 を使用する。 優先度 ：1 適合レベル：- 達成基準 ：なし 区分 ：A 解説 ウェブページを作成する際には、XHTML1.0 Transitional、CSS2.0 を用い、文字コードは UTF-8 を使用する。ただし、プロモーションなどの目的で作成されるウェブサイト、想定 するターゲットが限定される場合などで、最新の規格を用いることにより得られる利便性、 汎用性がより高い効果を発揮できる場合には、HTML5、CSS3.0 などを用いることができ る。 理由 記述言語は、日々進化を遂げ、現状、複数のバージョンが混在している状況にある。バー ジョンにより記述方法が異なるため、同じサイト内で複数の異なる規格のページがあると、 動作確認や品質チェックの過程において作業手順が煩雑となりやすい。また、ウェブサイ トのリニューアルを行う際にも、複数規格の混在によって、移行作業等が円滑に行われな い可能性が高くなってしまう。 対応方法 編集ソフトの基本設定を「XHTML1.0 Transitional」「UTF-8」に定める。 図 1-1-1A 編集ソフトの設定例。初期設定ドキュメントタイプとして「XHTML 1.0 Transitional」が設定されている。 確認事項 W3C の提供する検証サービスを利用する （W3C Markup Validation Service http://validator.w3.org/） -6- 1-1-2. ウェブページのソースコードは、使用する技術や仕様に従って記述する。 優先度：1 達成基準 ：4.1.1 適合レベル：A 区分 ：A 達成基準 ：4.1.2 適合レベル：A 区分 ：A 解説 W3C が勧告する Web 標準に従って記述する。 理由 ウェブブラウザ及びウェブサイトを閲覧するための機器やソフトウェアは、W3C の定める 規格に則って設計・制作されている。そのため、特定のウェブブラウザのみが備える機能・ 仕様など、規格の定めにない記述を行ってしまうと、意図した機能が動作しなかったり、 情報が表示されなかったり、誤った情報が表示されたりする可能性がある。 対応方法 W3C が非推奨としている HTML 要素や、視覚的な効果を施すための HTML 要素は使用し ない。 特に、以下の HTML 要素を用いることで得られる効果は、CSS で代替可能であることに注 意する。 ・ font 要素 ・ center 要素 ・ u 要素 ・ s 要素 ・ strike 要素 ・ b 要素 ・ i 要素 ・ big 要素 ・ small 要素 ・ tt 要素 また、非推奨属性についても使用しないよう努める。 確認事項 W3C の提供する検証サービスを利用する （W3C Markup Validation Service http://validator.w3.org/） -7- 1-1-3. 基本言語を指定する。 優先度 ：1 適合レベル：A 達成基準 ：3.1.1 区分 ：A 解説 日本語を主体とするページには、基本言語として日本語を指定する。 理由 ウェブページで記載されている言語にあった言語コードが指定されていないと、不適切な 文字が表示されてしまう可能性がある。また、そのページを音声読み上げソフトで読み上 げた場合に、正しい読み上げが行われない可能性がある。 対応方法 日本語を主体とするページには、HTML の場合は <html lang="ja"> と記述する。 XHTML の場合は、図 1-1-3A のように xml:lang="ja"を併記する。 外国語を主体とするページの場合には、その言語ごとに適切なソースコードを記述する。 図 1-1-3A 主たる言語が日本語であるページの言語コード記載例。 確認事項 ウェブページのソースコードを表示し、<html lang="ja">と記述されていることを確認する。 -8- 1-1-4. 部分的に異なる言語を用いる場合、その言語に適した言語コードを記述する。 優先度 ：1 適合レベル：AA 達成基準 ：3.1.2 区分 ：A 解説 ページの主体となる言語と異なる言語を部分的に用いる場合には、言語が切り替わった箇 所を lang 属性を用いて明示する。 理由 ウェブページで記載されている言語にあった言語コードが指定されていないと、不適切な 文字が表示されてしまう可能性がある。また、そのページを音声読み上げソフトで読み上 げた場合に、正しい読み上げが行われない可能性がある。 対応方法 1-1-3 で定めるとおり、ページの主体となる言語の言語コードを記述することに加え、部分 的に異なる言語を用いる場合にも、 言語が切り替わった箇所を lang 属性を用いて明示する。 図 1-1-4A 英語が用いられている箇所に、lang 属性を記述している。 確認事項 ウェブページのソースコードを表示し、部分的に異なる言語を用いている箇所について適 切な言語コードが記述されていることを確認する。 -9- 1-2 ページ制作サイズは、表示サイズ等に配慮する。 1-2-1. 横スクロールが発生しないよう、ページ幅を配慮する。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 ページを表示した際、小さな画面で表示しても横スクロールが発生しないよう、表示エリ アに合わせてページ幅が変わるなどの配慮を施すようにする。 理由 ウェブページを閲覧する場合、横スクロールが発生すると、一行読むたびに左右のスクロ ールが必要となり、スムースな閲覧ができなくなってしまう。PC だけでなく、スマートフ ォン、携帯電話など画面の小さな機器での閲覧を考慮する必要がある。 図 1-2-1A 横スクロールが発生すると、スムースな閲覧ができない。 対応方法 下記に示す方法のうち、ウェブサイトの目的や想定するターゲットを元に選択的に制作す る。 ・機器の表示エリアに合わせて、ページ幅が変化するように制作する。 ・閲覧する機器に合わせた複数のページを生成する。 ・ウィンドウ幅を 1024 ピクセルにした場合に横スクロールが発生しないサイズで作成する。 確認事項 ウェブブラウザのウィンドウ幅を、1024 ピクセル程度にした状態で、横スクロールが発生 しないこと及び、表示されない部分がないことを確認する。 - 10 - 1-2-2. ページの長さは、3 画面分程度に収める。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 ページの長さは、650 ピクセルを 1 画面とし、3 画面以内に収める。 理由 ページの長さが著しく長くなると、スクロール作業が煩雑になったり、情報量が多くなる ことで目的の情報が探しにくくなったりしてしまう。 図 1-2-2A ページの長さの上限（イメージ） 対応方法 ページの長さは、650 ピクセルを 1 画面とし、3 画面以内に 収め、それを超える場合には、別ページを作成することを 原則とする。ただし、ページを分けることが誤解につなが るおそれがあるなどの場合には、コンテンツの状況に応じ て、以下の方法をとる。 ・ 適宜見出しをつける ・ ページの先頭に概要を掲載する ・ 簡潔な表現に変えられないか検討する - 11 - 1-2-3. 印刷時に、A4 用紙に収まるよう、適切な設定をする。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 利用者がウェブページを印刷した際、A4 用紙（縦位置）に収まるよう適切な設定をする。 理由 ウェブページの幅が A4 用紙の幅以上に設定されていると、利用者がウェブページを印刷し た際に、一部の情報が印刷対象にならないなど、情報が不足してしまう可能性が高い。 対応方法 ページの横幅を、A4 に収まるサイズに固定して作成してもいいが、その場合、画面表示時 に余白が多くなり閲覧時の効率が良くない。そのため、ページの横幅を出力先に応じて変 化させることができるようにしておく。 また、その際、2-1-3 で示すように、メニューや余分な装飾を取り払った印刷用のスタイル を用意しておくことで、さらに使い勝手がよくなる。 確認事項 ウェブページを印刷し、すべての情報が印刷結果に現れるか確認する。 - 12 - 1-3. レイアウトとコンテンツを分離する 1-3-1. レイアウトや装飾など視覚表現の制御には、スタイルシートを用いる。 優先度 ：1 適合レベル：A 達成基準 ：1.3.1 区分 ：U・A 解説 レイアウトや装飾など視覚表現の制御には、CSS を用い、HTML には、文書構造を適切に 記述する。 理由 HTML には、装飾を行うための要素も定められているが、多くは非推奨であったり、CSS による代替が強く求められたりしているなど、本来は文書の構造を記述するための言語で ある。レイアウトや装飾といった視覚的な表現に関わる部分は、スタイルシートによって 記述することで、利用機器に合わせた出力が容易になったり、ファイルサイズの軽減につ ながったりといったメリットが生じる。 図 1-3-1A ウェブページの構成イメージ 対応方法 スタイルシートを利用する。 確認事項 スタイルシートを無効にしてウェブページを閲覧した際、情報の不足がないことを確認す る。 - 13 - 1-4. 適切なフォルダ名、ファイル名をつける 1-4-1. フォルダ名、ファイル名は半角英数字を用い、簡潔に表現する。 優先度 ：1 適合レベル：- 達成基準 ：なし 区分 ：U 解説 フォルダ名やファイル名は、半角英数字を用いる。また、その際、数字の羅列や意味のな い文字列ではなく、内容を想起しやすい名前にすることが望ましい。 理由 ひらがな、カタカナ、漢字、全角の英数字は、正しく処理できなかったり、アドレスとし て扱われる際別の形式に置き換わったりするため、使用しないようにする。半角英数字を 用いた場合にも、単なる数字の羅列や意味のない文字列を使用してしまうと、内容を理解 する助けにならなかったり、直接入力をする際に、ミスにつながったりしやすい。 図 1-4-1A 漢字を用いた場合、別の文字に置き換わることがある 対応方法 ファイル名には、半角英数字を用いる。その際に、短くても意味がわかるよう、また「-」 「_」などを用いて単語や意味の区切りなどを示すと、よりわかりやすくなる場合がある。 以下についても命名指針として定める。 ・ 各フォルダ（ディレクトリ）及び、コンテンツ群（複数ページの内容的なまとまり）の 最初のページのファイル名は「index.html」とする。 ・ HTML の拡張子は「.html」に統一する。（「.htm」は用いない。） 図 1-4-1B 数字などの羅列では内容がわからないが、言葉を使うと内容がイメージできる 確認事項 ・ ファイルやフォルダ名に、全角文字を用いていないことを確認する。 ・ ファイルやフォルダ名に、半角カナを用いていないことを確認する。 ・ ファイルやフォルダ名は、適度な長さを保っていることを確認する。 - 14 - 1-5. ファイルサイズを小さくする 1-5-1. ファイルサイズの少ないページを作成するよう心がける。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 ウェブページはファイルサイズを増加させてしまうような不要な装飾を避け、写真はサム ネイルを置き、大きな写真は別ページで表示させるようにするなど、ファイルサイズが少 なくなるよう心がける。 理由 利用者の中には、アナログ回線、携帯電話など、通信速度が十分ではない環境で利用して いる方もいる。また、災害など通信の輻輳によって十分な速度で閲覧ができないことも起 こりうる。ファイルサイズが大きいと、閲覧時の読み込みに時間がかかり、利用者のスト レスになるとともに、必要な情報を取得できない恐れがある。 対応方法 HTML コメントなど表示に関係のない文字は極力記述しない。画像を使用する際は、トリ ミングやリサイズなどファイルサイズが小さくなるような処理を施す。大きな写真を掲載 する必要がある場合には、はじめに小さな写真を表示させ、利用者の求めに応じて別ペー ジに大きな写真を掲載するなどの方法を取る。 図 1-5-1A ファイルサイズを測るツールを使うと簡単にファイルサイズが計測できる。 画面は、「Web Developer Extension」のもの。 確認事項 HTML、CSS、画像など、ページを表示するのに必要なファイルのファイルサイズ合計が、 100KB 以内になっているか確認する。 - 15 - 2.コンテンツの構成や仕組みについて配慮する事項 2-1. コンテンツの制作に関する事項（レイアウト） 2-1-1. 位置や表示スタイルなどに一貫性のある基本操作部分を提供する。 優先度 ：1 適合レベル：AA 達成基準 ：3.2.3 区分 ：U 解説 ウェブサイト全体に、位置、表示スタイルや表記など一貫性を持たせた基本操作部分を提 供し、メニューやナビゲーションに統一感を持たせる。 理由 ページごとに操作方法や、ボタンの名称、位置などが異なっていると、ページごとに使い 方を新たに学習しなければならず、情報が探しにくくなってしまう。メニューやナビゲー ションに統一感があることで、同じサイトであるという安心感が生まれるとともに、操作 を覚えなおす必要がないので、迷いが生じにくくなる。 対応方法 ほかのページと同じレイアウトが提供されているか確認する。 - 16 - 2-1-2. フレームは使用しない。 優先度 ：1 適合レベル：- 達成基準 ：なし 区分 ：U・A 解説 複数の領域にそれぞれ別のページを読み込み、1 つのページのように見せる「フレーム」 （frame 要素・frameset 要素）を使用しない。 理由 フレームは一部のウェブブラウザでは利用できない上、複数のページが同時に表示される ため音声読み上げソフトでは切り替え操作が必要になり、情報の取得が難しい。 また、ページを遷移してもウェブブラウザに表示される URL（アドレス）が変わらなかっ たり、フレーム内の 1 ページのみが単独で表示された場合にナビゲーションが失われてし まうなど、使い勝手が悪くなってしまう。 図 2-1-2A B から C にページを遷移しても、 見かけ上のアドレス（frame.html）が変わらない 対応方法 フレームは、メニューと本文を分割する方法として採用されることがあったが、前述のよ うな使いにくさがある。複数のページに共通するメニューを設置したい場合には、各ペー ジにメニューを自動的に生成するしくみを用いるなど、フレームを用いず一つのページと して作成する。 確認事項 フレームを使っていないか確認する。 - 17 - 2-1-3. 印刷時は、メニューなどの不必要な情報を除いて印刷できるようにする。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 印刷を行う際には、必要な情報が見やすいように、共通するメニューを取り除いた状態で 印刷できるようにする。 理由 ウェブページを印刷するのは、デザインやナビゲーションではなく、ページに表示される 情報そのものを必要としている場合がほとんどである。ナビゲーション部分が印刷される ことで本文の印刷面積が少なくなってしまったり、必要以上に多くの用紙を必要としてし まったりする。 対応方法 印刷に適したスタイルを定義したスタイルシートを用意する。 確認事項 印刷もしくは印刷プレビュー機能を用いて、余計な情報が印刷されないか確認する。 - 18 - 2-2. コンテンツの制作に関する事項（コンテンツ） 2-2-1. 適切なページタイトルを設定する。 優先度 ：1 適合レベル：A 達成基準 ：2.4.2 区分 ：U・A 解説 そのページの内容を表すページタイトル（title 要素）を設定する。 理由 ページタイトル（title 要素）は、そのウェブページのタイトルとして、 「お気に入り」に登 録した場合のタイトルになったり、検索結果の表示画面でもリンク文字列として表示され たりする。また、ソーシャルメディアなどで情報が流通する際にも最も目に触れるものと なる。そのため、ページの内容が表現されていないと、内容を理解できなかったり、その ページの魅力が伝わりにくくなってしまう。 図 2-2-1 A タイトルは、ウェブブラウザのタイトルバーに表示されるだけでなく、 「お気に入り」（ブックマーク）登録時の名前としても使用される。 対応方法 ページタイトルを設定する際には、以下の条件を守る ・ページの内容を表すものにする ・他のページとの重複を避ける ・「長崎県」であることを含める ・25 文字程度に抑える（少なくとも、そこまでで他と区別できるようにする） 確認事項 ページタイトルを見て、ページの内容が想像できるかを確認する。 - 19 - 2-2-2. 適切な HTML 要素を用いて文書の構造を記述する。 優先度：1 達成基準 ：1.3.1 適合レベル：A 区分 ：A 達成基準 ：2.4.6 適合レベル：A 区分 ：A 解説 見出し、段落、リストなどを示す HTML 要素を用いて、文書の構造を適切に記述する。 理由 HTML は、文書の構造を記述するための言語である。見出し（h1、h2、h3、h4、h5、h6） 要素、リスト（箇条書き：ul、ol、li、dl、dt、dd）要素、段落（p）要素、引用（blockquote） 要素などを用いて、適切に文書構造を記すことで、検索エンジンでは構造に応じた重みづ けが、音声読み上げソフトでは構造に応じた音声の変化がおき、情報の正確な理解に寄与 する。 対応方法 見出しや段落、リストなどを適切に用いる。 文字の大きさを変えることで見出しのような表現をしたり、「■」「◎」などの記号を用い て箇条書きのように見せたりすることは避ける。 見出しは、文書の内容が分かる表現とする。 図 2-2-2A 箇条書きの正しい記述と、 記号と改行を用いて箇条書きのような表現を行った例。 確認事項 適切な HTML 要素を用いて文書の構造を記述しているか確認する。 文字の大きさなど見た目だけで構造の表現をしていないか確認する。 - 20 - 2-2-3. 現在位置を示す情報を付与する。 優先度 ：2 達成基準 ：2.4.8 適合レベル：AAA 区分 ：U 解説 パンくずリスト（トピックパスとも呼ばれる）を各ページにつける。 理由 長崎県ウェブサイトは膨大なページ数があるため、全体の構成や、現在地を把握できない と、迷子になってしまう可能性がある。サイト内での位置と上位階層へのリンクを備えた パンくずリストをつけることで、現在地やサイト全体の構成の把握がしやすくなる。 対応方法 各ページには、パンくずリストを設置する。トップページから現在のページまでの、途中 の階層・カテゴリをサイト構成に合わせてシンプルなリンクとして表現する。 図 2-2-3A パンくずリスト設置例 確認事項 パンくずリストが設置されていることを確認する。 - 21 - 2-2-4. 文字の色はウェブセーフカラーを用いる。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：A 解説 文字色はウェブセーフカラーの中から選択し、それ以外の色は極力使用しない。 理由 ウェブセーフカラー以外の色を用いると、閲覧環境の違いによって色が変わってしまう可 能性がある。 対応方法 閲覧環境に関わらず、正しく表示できるウェブセーフカラーのみを使用する。 確認事項 複数の閲覧環境で、表示色に大きなずれがないかを確認する。 - 22 - 2-2-5. 文字の色と背景の色には、十分なコントラストを確保する。 優先度：1 達成基準 ：1.4.3 適合レベル：AA 区分 ：A 達成基準 ：1.4.6 適合レベル：AAA 区分 ：A 解説 文字の色と背景との色には、十分なコントラストを確保し、読みやすい色の組み合わせを 用いる。 理由 文字の色と背景の色に十分なコントラストが確保されていないと、文字の識別が困難にな ったり、情報が見つからなくなったりする。 対応方法 ・シンプルな配色を心がける。 ・色のコントラスト比は、4.5：1 を確保する。 図 2-2-5A 文字色：黒（#000000）の場合の背景組み合わせ例 枠下に示す数字は、コントラスト比。 確認事項 チェックツールを用いてコントラストを確認する。 「カラー・コントラスト・アナライザー2013J」 http://weba11y.jp/tools/cca/ - 23 - 2-2-6. 文字の大きさは、pt、px で指定しない。 優先度 ：1 適合レベル：AA 達成基準 ：1.4.4 区分 ：A 解説 文字サイズの指定は、相対的な単位を使用し、pt、px などの単位を使用しない。また、書 体の指定もしない。 理由 pt、px の単位を用いると、ウェブブラウザによっては、文字サイズの設定を変更しても表 示される文字の大きさを変えることができないため、小さな文字が読みづらいと思ってい ても解決できない。 対応方法 文字のサイズは「％」もしくは「em」で指定する。 また、原則として書体は指定しない。 確認事項 ブラウザの文字サイズを変更した際、文字の大きさが変更されるか確認する。 （現状のブラウザの多くは、文字サイズの設定に用いている単位に関係なく、文字および 画面全体の拡大・縮小が可能となっている。「文字だけを拡大」などのメニューにより、文 字サイズのみを変更することができる。 - 24 - 2-3．情報提供に関する事項 2-3-1. 分かりやすい文章で表現する。 優先度 ：3 達成基準 ：3.1.5 適合レベル：AAA 区分 ：U 解説 分かりやすい文章で表現する。必要に応じて、対象者の理解力・読解力に合わせた別のコ ンテンツを用意する。 理由 文章が分かりにくかったり、主語・述語の関係が明確でなかったりすると、誤解が生じた り、理解が不十分になってしまったりする場合がある。 対応方法 ・ 中学校教育レベルの読解力で分かる文章で表現する ・ 総務文書課作成の「分かりやすく親しみやすい文書づくりのために」を参照する。 ・ 別のコンテンツ（子ども向けページなど）を用意する。 ・ 文章だけではなく、図やイラストなどを用いる。 ・ １つの文章は４０文字以内を目安とする。 ・ 主語、述語の関係を明確に示し、簡潔な文章構造にする。 確認事項 分かりやすい表現・文章になっているか確認する。 必要に応じて、想定する対象者に文章を読んでもらう。 総務文書課作成の「分かりやすく親しみやすい文書づくりのために」で確認する。 - 25 - 2-3-2. カタカナ文字・外国語・専門用語を多用しない。 優先度 ：3 達成基準 ：3.1.3 適合レベル：AAA 区分 ：U 解説 カタカナ文字・外国語・専門用語を多用しない。 理由 用語や表記が一般的ではないことによって、誤解が生じたり、理解が不十分になってしま ったりする場合がある。 対応方法 カタカナ文字・外国語・専門用語の代わりに、一般的な用語、わかりやすい表現に置き換 えられるかを検討する。 用いようとするカタカナ文字・外国語・専門用語に一般性があり、その表現が有益である と認められる場合には、置き換えをしない。 例） ・ パブリックコメント 置き換え例：意見公募手続、意見募集 ・ ガイドライン 置き換え例：指針 確認事項 用いようとするカタカナ文字・外国語・専門用語に一般性があるか判断する。 - 26 - 2-3-3. 略語を使用する場合は、最初に説明を行う。 優先度 ：3 達成基準 ：3.1.4 適合レベル：AAA 区分 ：U 解説 略語を使用する場合には、初めてその言葉を用いる際に、正式表記を添える。もしくは、 正式表記の書かれた箇所へのリンクを設定する。 理由 用語や表記が一般的ではないことによって、誤解が生じたり、理解が不十分になってしま ったりする場合がある。 対応方法 略語が出現した際には、単語の後ろにカッコ書きで正式表記を明示する。もしくは、脚注 や用語集のページなどの正式表記の書かれた箇所に対してリンクを設定する。 ただし、略語表記が一般的であり、正式表記を添えなくとも言葉の理解度に差異がない場 合にはこの限りではない。 例） ・ 国体（国民体育大会） ・ NPO（非営利団体／特定非営利活動法人） 確認事項 一般的ではない略語に、正式表記が明示されているか確認する。 - 27 - 2-3-4. 読みの難しい言葉は、読み方を明示する。 優先度 ：3 達成基準 ：3.1.6 適合レベル：AAA 区分 ：U 解説 人名や地名などで、漢字の読み方が難しい場合、一般的な読みと異なる場合、複数の読み 方ができる場合などには、読み方を明示する。 理由 外国の方（日本語を母国語としない方）や子どもなど、漢字の読み方や意味を理解しにく い利用者にとって、読み方がわからないことによって、誤解が生じたり、理解が不十分に なってしまったりする場合がある。 対応方法 読みの難しい単語が出現した際には、単語の後ろにカッコ書きで読み方を併記する。 確認事項 読みが難しいと思われる言葉に、読み方が明示されているか確認する。 - 28 - 2-3-5. 単語の途中にスペースや改行を入れない。 優先度 ：1 適合レベル：A 達成基準 ：1.3.2 区分 ：A 解説 体裁を整えるために、単語の途中にスペースや改行を入れない。 理由 図 2-3-5A の「日 時」 「定 員」ように、体裁を整える目的で、単語の途中にスペースや 改行が入っていると「日時」「定員」と認識されず、音声読み上げソフトで誤った読み上げ 結果になったり、自動翻訳で誤った翻訳結果になったりする。 図 2-3-5A 対応方法 体裁を整えるために、単語の途中にスペースや改行を入れない。文字の間隔や文字の表示 範囲（幅）を調整したい場合には、スタイルシートを用いる。 確認事項 単語の途中にスペースや改行が入っていないか目視する。 音声読み上げソフトは、表記に問題がない場合でも誤読が避けられない。正しい読み上げ をさせるために、漢字をひらがなに改めることなどは過剰な対応となり、適切ではない。 - 29 - 2-3-6. 機種依存文字は使用しない。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：A 解説 丸付き文字や省略記号などのいわゆる機種依存文字及び半角カタカナは使用しない。 理由 丸付き文字や省略記号などのいわゆる機種依存文字や半角カタカナをページ上に用いると、 閲覧環境の OS や文字コードの違いによって、意図する文字と違う文字が表示されたり、全 く表示されなかったりしてしまう。 対応方法 丸付き文字や省略記号など図 2-3-6A に示す文字は使用しない。 確認事項 丸付き文字や省略記号など図 2-3-6A に示す文字を使用していないか確認する。 図 2-3-6A - 30 - 2-3-7．色だけで情報の識別や指示をしない。 優先度 ：1 適合レベル：A 達成基準 ：7.1.4.1 区分 ：A 解説 情報の識別や指示は、色だけに依存した表現を用いず、テキストなどの情報を合わせて提 供する。 理由 色の識別が難しい利用者や、モノクロディスプレイのような色を表示できない環境では、 色だけに依存した表現を用いると、情報の違いを識別できない可能性がある。また、音声 読み上げソフトでは、色による区別を音声で表現しないため、同様に、情報の識別ができ ない。 対応方法 図 2-3-7A では、 「休館日」であることを「赤字」という色のみで伝えている。図 2-3-7B で は、赤字であることに加え、太字であること、さらには「2012 年 9 月の休館日は…」とい うテキストでの説明を付加している。そのため、色が表示できない場合でも、休館日に関 する情報を正しく伝えることができる。 図 2-3-7A 図 2-3-7B - 31 - 図 2-3-7C 図 2-3-7D 図 2-3-7C では、入力欄の背景色の色を変化させることのみで、入力必須項目・任意項目の 別を表現している。図 2-3-7D では、「（必須）」というテキスト情報を合わせて提供してい る。 このように、文字色や背景色、図中の色分けなど、色に依存した情報提供を行う場合には、 色だけで情報の識別や指示をするのではなく、色がなくても意味が伝わるようテキストな どの情報を合わせて提供する。 確認事項 色だけに依存した表現が用いられていないか、モノクロでの表示（もしくは印刷）結果を 確認する。 - 32 - 2-3-8．形や位置だけで情報の識別や指示をしない。 優先度 ：1 適合レベル：A 達成基準 ：1.3.3 区分 ：A 解説 情報の識別や指示は、形や位置だけに依存した表現を用いず、テキストなどの情報を合わ せて提供する。 理由 表組みなどで用いられる「○」 「△」 「×」といった記号文字は、音声読み上げソフトでは、 意図したとおりに読み上げられない場合がある。 また、「左のボタン」「右のボタン」など、位置だけで指し示した表現を用いると、音声読 み上げソフト利用者は画面上の位置が把握できず、操作することができない。 対応方法 図 2-3-8A では、「○」「×」を記号文字で表記している。図 2-3-8B は、音声読上げソフト 利用者にも情報を伝えられるよう、説明を付加している例。図 2-3-8C では、記号を画像に し、その代替テキストに説明を加えている例である。 図 2-3-8A 図 2-3-8B - 33 - 図 2-3-8C 図 2-3-8D は位置だけで指し示した表現となっているため、図 2-3-8E のように、位置が把 握できなくても操作できるような表現に変更している。 図 2-3-8D 図 2-3-8E 確認事項 形や位置だけに依存した表現が用いられていないか確認する。 - 34 - 2-3-9. 日付、時刻、通貨単位は、漢字表記を基本とする。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：A 解説 日付や時刻を表す場合には「：」「/」「-」などではなく「月」「日」「時」などを用いる。 理由 日付や時刻を表すのに、記号を用いると、音声読み上げソフトで正しく読み上げなかった り、文化・習慣の違いにより解釈が異なったりしてしまう。 対応方法 日付：2012 年 9 月 10 日 時刻：午前 10 時 25 分 通貨：1,580 円 と表記する。 確認事項 日付、時刻、通貨単位に漢字を用いているか確認する。 - 35 - 2-3-10. サイト内で使う言葉は、全ページで統一した言葉を用いる。 優先度 ：1 適合レベル：AA 達成基準 ：3.2.4 区分 ：U 解説 主要なナビゲーションの名称や送りがななど、言葉の表記を統一する。 理由 同じ内容を複数の言葉で表したり、同じ言葉の表記が統一されていなかったりすると、示 している内容が明確でなくなり、利用者が混乱する。 対応方法 複数ページを見て、表記が統一されているか確認する。 - 36 - 2-3-11. 利用者からの問い合わせ方法を記述する。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 ページには、情報発信者の連絡先を掲載する。 理由 利用者がページの内容について、不明な点があった際、問い合わせ先が明示されていない と、どこに問い合わせていいのかわからず不満を覚える。また、担当ではない部署に問い 合わせが行くことによって、回答に時間がかかったり、本来の業務に支障をきたしたりす ることになる。 対応方法 各ページには、以下の情報をもれなく記載する ・情報発信日（更新日） ・情報発信部署（課） ・情報発信部署の所在地 ・情報発信部署の電話番号・FAX 番号 ・情報発信部署のメールアドレス（もしくは問い合わせフォーム） 電話だけでは聴覚障害者の問い合わせに支障があるなど、障害や身体特性、経験等によっ て問い合わせをしやすい手段は利用者ごとに異なるので、必ず複数の手段を示しておく。 確認事項 上記がもれなく記されているか確認する。 - 37 - 2-4. イメージ（画像等）に関する事項 2-4-1. 画像、リンク画像には適切な代替テキストをつける。 優先度：1 達成基準 ：1.1.1 適合レベル：A 区分：A 達成基準 ：2.4.4 適合レベル：A 区分：A 解説 画像及びリンク画像には、文脈においてどのような意味・役割を持っているかを表現する 適切な代替テキストをつける。 理由 ページ上に画像が掲載されている場合、画像だけでは何を伝えているかわからないので、 代替テキストを記述することでその意味を補うことが必要となる。 対応方法 ・画像（img 要素）に対して alt 属性を設定する。 ・何が書かれている画像なのかではなく、文脈上どのような意味を持つかが重要。 ・意味を持たない画像の場合には、alt 属性値を空（alt=""）とする。 ・画像に文字が含まれている場合は、その文字を alt 属性に含める。 ・複雑な内容の画像には、簡潔な alt 属性を設定した上で、本文に詳しい説明を記載する。 ・リンク画像には、リンク先が想像できる文言で alt 属性を設定する。 図 2-4-1A 適切な alt 属性と、不適切な alt 属性の例。 使用している画像は「雪だるま」だが、雪だるまは文脈において「雪」という意味を持っ ているため「alt=”雪”」とするのが妥当。 確認事項 画像が表示されなかった場合に、代替テキストを読むことで意味が通じるかを確認する。 - 38 - 2-4-2. 画像化された文字はできる限り使わない。 優先度 ：1 適合レベル：AA 達成基準 ：1.4.5 区分 ：A 解説 文字情報は必要不可欠な場合を除いては画像化せず、テキストを用いて情報を提供する。 理由 画像を見ることができる人であっても、拡大や色の反転、行間の変更などを行うことで、 読みやすさが向上する場合がある。文字が画像化されていると、それらが正しく機能しな かったり、十分な効果が見込めない可能性が高い。 対応方法 文字はテキスト形式のままで掲載する。 ただし、スタイルシートでは意図する視覚表現ができない、正しい字形を伝える必要があ るなどの場合には画像化することができる。 図 2-4-2A 「長崎県」と書かれている画像。 書体や装飾に特徴がないのであれば、テキストで表現する。 確認事項 画像化されている文字が、テキストで表現できるものでないか確認する。 - 39 - 2-5. 表に関する事項 2-5-1. レイアウトのために表（table 要素）を使用しない。 優先度：1 達成基準 ：1.3.1 適合レベル：A 区分：A 達成基準 ：1.3.2 適合レベル：A 区分：A 解説 レイアウトを整える目的で、table 要素を使用しない。 理由 table 要素は、表組の要素であり、本来はレイアウトを整える目的で用意されたものではな い。セルの大きさを変えたり、分割や結合を行なったりすることで、レイアウトを整える ことができるが、音声読み上げソフトの読み上げ順に乱れが生じ、情報が正しく伝わらな い可能性がある。 対応方法 table 要素は、表を作成するときにのみ使用し、レイアウトを整える目的で使用しない。や むを得ず、table 要素をレイアウト目的で使用する場合には、読み上げ順序に問題が出ない よう、表の組み方を工夫する。 レイアウトを整えるのには、スタイルシートを用いる。 確認事項 表以外の部分に table 要素を使用していないか確認する。 - 40 - 2-5-2. 表を使用する場合は単純な構造にし、読み上げ順に配慮する。 優先度：1 達成基準 ：1.3.1 適合レベル：A 区分：A 達成基準 ：1.3.2 適合レベル：A 区分：A 解説 表を使用する場合は、単純な構造にし、読み上げ順に配慮する。 また、表には分かりやすい表題をつける。 理由 表は、図 2-5-2A のように、一行目を左から右、次の行に移り左から右といった順に処理さ れる。音声読み上げソフトでも、同じ順序で読み上げられるため、それを意識しないと、 意図した順序で読み上げが行われないため、情報が伝わらなくなってしまう。 図 2-5-2A 表の読み上げ順序を表現した図。①から⑨の順に読み上げられる。 対応方法 ・表以外の表現方法がないか検討する ・表は単純な構造を保つ ・セルの結合や分割はできるだけしない ・読み上げ順を考慮し、横方向（行）のデータを意識する ・内容を簡潔に表す表題をつける 確認事項 表は単純な構造になっているか確認する - 41 - 2-6. リンクに関する事項 2-6-1. リンクは相互の間隔を十分に取り、大きな面積を確保する。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 リンクとリンクは十分な間隔を確保し、一つのリンクエリアは十分な面積を確保する。 理由 リンク同士が接近していると、複数のリンクが一つに見えてしまったり、意図しない方の リンクが反応してしまったりと、誤認・誤操作の原因となる。 対応方法 リンクとリンクの間には、十分な間隔を設けるか、リンクではない文字（記号を含む）を 間に置くなどして、誤動作を防ぐようにする。また、リンクエリアは、スマートフォンな ど小さな画面を指先で操作するなどの場合も考慮して、十分な面積を確保する。 図 2-6-1A リンクの相互の間隔の例。リンクではない文字（ここでは「｜」）を用いてリ ンクとリンクの間隔を一定程度確保している。 また、カーソルがリンクエリアに入ると色が変わるなど、操作対象となるリンクを視覚的 な変化で表現するなどの方法も合わせて採用する。 確認事項 リンクの相互の間隔が十分であることを確認する。 - 42 - 2-6-2. リンクを設定する場合は、リンク先が想像できる文言で表す。 優先度 ：1 適合レベル：A 達成基準 ：2.4.4 区分 ：U・A 解説 リンクテキストを読むだけで、リンク先の内容が想像できるよう、リンクを設定する。 理由 「こちらへ」「詳細」「クリック」のような、リンク先を具体的に表現していないリンク では、利用者はどこにリンクするかが事前にわからず、不安を覚える。 対応方法 リンクテキストが、リンク先の内容を具体的に示すよう配慮する。 また、長崎県ウェブサイト以外へのリンクを設定する場合には、外部へのリンクであるこ とを明示する。 図 2-6-2A リンクテキストを「こちら」ではなく、リンク先の内容で具体的に置き換えた 例。この場合、リンク先が PDF なので、「5-1-2. ダウンロードデータは、ファイルの種 類とファイルサイズを明示する。」に従って、PDF であることと、そのファイルサイズを 合わせて記載している。 確認事項 リンクテキストだけでリンク先の内容がわかるか確認する。 - 43 - 2-6-3. リンクを開く際は、新しいウィンドウを開かない。 優先度 ：2 達成基準 ：3.2.5 適合レベル：AAA 区分 ：U・A 解説 リンクを開く際は、同じウィンドウ内で遷移させる。 理由 新しいウィンドウが開かれることで、それに気づかず「戻る」が利かないと思ってしまっ たり、閲覧後にウィンドウを閉じる操作が煩雑になったり、複数のウィンドウの管理が難 しかったりするなど、利用者の混乱を招いてしまうことがある。 対応方法 リンクは、同じウィンドウ内での遷移を原則とし、新しいウィンドウは開かないようにす る。外部サイトである場合や、一連の手続きの途中で説明等のリンクを設ける場合など、 新しいウィンドウを開くことに利点がある場合には、リンクテキストに「新しいウィンド ウで開きます。」という文言を含めるようにする。 確認事項 予告なく新しいウィンドウでリンクを開いていないか確認する。 - 44 - 2-6-4. 自動的にページを更新したり、別のページに移動したりしない。 優先度： 1 達成基準 ：2.2.1 適合レベル：A 区分：A 達成基準 ：2.2.4 適合レベル：AAA 区分：A 達成基準 ：3.2.5 適合レベル：AAA 区分：A 解説 利用者の許可を得ることなく、ページを自動的に書き換えたり、別のページに移動したり しない。 理由 ページを自動的に書き換えたり、別のページに自動的に移動したりすると、更新前の情報 を見ることができなくなったり、読み終わらないうちに別の情報に移らなければいけなく なってしまったりするため、利用者がページの情報を理解する妨げとなる。 対応方法 ページの自動的な更新、自動的な移動は避ける。 現在起きていることを伝えるページなど、自動更新をすることが有効な場合もあるが、そ の場合でも、自動的に更新するか、利用者の任意のタイミングで手動で更新するかの選択 を利用者ができるようにしておく。 図 2-6-4A サイトの移転に伴う告知の例。数秒後に自動的に別のページに移動するのでは なく、移転先を明示し、利用者の判断・動作に委ねる。 ページの有効期限が切れた場合などにおいても、自動的にトップページに移動するという 処理はせず、利用者がどのような行動をとるべきか、引き続き情報を探すのにどのような 選択肢があるかを示すにとどめる。 確認事項 ページを開き、内容が自動的に更新、もしくは、自動的に別ページに移動しないことを確 認する。 - 45 - 2-7. 管理に関する事項 2-7-1. 複数の経路でページに到達できるようにする。 優先度 ：1 適合レベル：AA 達成基準 ：2.4.5 区分 ：U 解説 各ページでサイト内検索とサイトマップへのリンクを提供する。また、カテゴリや、生活 の場面、担当課など、一つの情報掲載ページに対して複数の経路を設ける。 理由 利用者によって、その情報への到達経路のイメージが異なるため、経路が一つしかないと、 その経路をイメージできない利用者は情報にたどり着くことができない。 対応方法 特定の情報に対して、どのようなジャンル、属性の情報であるかは人それぞれ異なってい るため、どのような観点からでも情報にたどり着く経路が失われないように、複数の経路 を設けておく。 図 2-7-1A 利用者が望む分類、イメージしやすい経路でたどりつけるよう、複数の経路を 用意する。 確認事項 サイト内検索とサイトマップへのリンクが提供されていることを確認する。 複数の経路で到達できることを確認する。 - 46 - 2-7-2.新着情報は、適切に管理する。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 新着情報は、掲載時期、掲載期間、掲載件数等を適切に管理する。 理由 新着情報などの時系列の情報は、掲載件数が多いと見つけにくく、掲載情報が古いと情報 やサイトに対する信頼が損なわれてしまう。また、掲載期間が短すぎると、利用者の目に 触れにくくなってしまう。 対応方法 新着情報の掲載ルールを以下のように定める ・掲載件数：原則 10 件以下 ・掲載期間：一ヶ月未満 また、新規掲載と更新の別を示す、緊急性の有無によって表現を変える、文章表現を統一 するなどの工夫をする。 確認事項 古い情報がないかを確認する。 - 47 - 2-7-3. 掲載期間の過ぎた情報は掲載しない。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 掲載期間の過ぎた情報ページ及び、ページに付随する図表等は、ファイルそのものをサー バから削除する。 理由 掲載期間の過ぎた情報が掲載されていると、その情報を閲覧した人が現在有効な情報と誤 認してしまい、誤った情報取得につながる恐れがある。 対応方法 公開期限を無期限とはせず、一定時期に期限を設ける。 掲載開始時期と同様、掲載終了時期についてもチェックをする。 毎年同時期に掲載される情報は、新旧を混同しやすいので特に注意する。 確認事項 掲載期間が終了した情報が掲載されていないか確認する。 - 48 - 3．操作性に関する事項 3-1. さまざまな使用方法に対応できるようにする 3-1-1. マウスだけでなく、キーボードですべての操作ができるようにする。 優先度：1 達成基準 ：2.1.1 適合レベル：A 区分：A 達成基準 ：2.1.2 適合レベル：A 区分：A 解説 マウスがなくても、キーボードだけですべての機能が使え、すべての情報が得られるよう にする。 理由 視覚に障害がある方の場合には、マウスカーソルの位置情報が得られないため、マウスの 使用が困難であり、上肢に障害がある場合にも、マウス等を移動させての操作が困難であ る。また、身体的機能に制約がなくても、外出時や上級者など、マウスが接続されていな い状態で PC を扱う場面は少なくない。 対応方法 キーボードのみによる操作、主に、Tab キーでの項目移動や画面のスクロール、Enter キー による実行が動作するようにするとともに、ドラッグ＆ドロップなどマウス特有の操作を 必要としないことも求められる。 確認事項 マウスを使わずとも、キーボードだけですべての機能が使え、情報が得られるかを確認す る。 - 49 - 3-1-2. すべてのページに共通する部分を読み飛ばすことができるしくみを提供する。 優先度 ：1 適合レベル：A 達成基準 ：2.4.1 区分 ：A 解説 共通操作部分など、すべてのページに存在し、ページを開くごとに読む必要がない内容を、 読み飛ばすしくみを提供する。 理由 共通操作部分は、すべてのページに設置されていて、音声読み上げソフトでは、ページを 開くたびに同じ内容を読まなくてはならず、効率的な閲覧の妨げになってしまう。 対応方法 共通操作部分を読み上げなくても済むよう、そこを読み飛ばし、本文の先頭などへジャン プできる機能を提供する。 2-2-2 で定める、見出し等の適切な記述によって、見出しだけを拾い読みするなど効率的な 閲覧をすることができるようになるため、双方の手段を確立することが望ましい。 図 3-1-2A 読み飛ばすしくみを備えた例。「本文へ」が表示されているため、音声読み上 げソフト利用者だけでなく、キーボードのみで操作される方にも有用な機能となっている。 確認事項 共通部分を読み飛ばすしくみがあること、また、そのしくみが正しく動作することを確認 する。 - 50 - 3-2．フォーカスに関する事項 3-2-1. キーボードによるフォーカス移動は、視覚的な順序と一致させる 優先度 ：1 適合レベル：A 達成基準 ：2.4.3 区分 ：A 解説 キーボードによってフォーカス（リンクの選択やフォームのフィールドが入力可能な状態 になること）を移動させる場合、その移動順序は、視覚的な順序と一致するように設定す る。 理由 アンケートフォームなどで、項目をキーボードにより移動するとき、名前、回答内容、郵 便番号、フリガナ、住所、年齢など、項目の移動順序に規則性がないと、次にフォーカス される内容が想像できず利用者が混乱してしまう。 対応方法 配置とキーボードによるフォーカス移動順序が一致するよう適切な属性を記述する。 図 3-2-1A 視覚的に「お名前」→「ご住所」→「電話番号」の順で並んでいるのであれば、 キーボードでも同様の順序で項目移動ができるようにする。 確認事項 キーボードでフォーカスを移動させ、それが視覚的な順序と一致するかを確認する。 - 51 - 3-2-2. フォーカスされていることが視覚的に認知できるようにする。 優先度 ：1 適合レベル：AA 達成基準 ：2.4.7 区分 ：A 解説 フォーカスが当たっている部分は、色が反転する、枠で囲われるなど、その状態が視覚的 に認知できるようにする。 理由 フォーカスが当たっている場合に、視覚的な変化が得られないと、操作対象箇所がどこな のか判別できないため、操作に支障がある。 対応方法 フォーカスが当たっている部分は、以下のような方法で、視覚的に区別できるようにする。 ・色が反転する ・枠で囲われる ・カーソル等が表示・点滅する 図 3-2-2A フォーカスを視覚的に明示した例。 確認事項 キーボードによる操作を行い、フォーカスが当たった部分に視覚的な変化があるか確認す る。 - 52 - 3-2-3.フォーカスが当たった時に、状況を変化させない。 優先度 ：1 適合レベル：A 達成基準 ：3.2.1 区分 ：A 解説 フォーカスが当たった時に、配置の変化や、ページの移動のような状況の変化を引き起こ さないようにする。 理由 フォーカスを受け取った時に、状況が変化すると、何が起きたのか理解できず、変化に対 応できなくなってしまう。 対応方法 フォーカスを受け取った後、Enter キーなど別のボタンを押下することで初めて状況の変化 を引き起こすようにする。 確認事項 フォーカスを移動させ、状況の変化を引き起こさないことを確認する。 - 53 - 4.オブジェクトに関する事項 4-1.特定の技術やプラグインに対応していないブラウザの配慮を行なう。 4-1-1.プラグインを使用しなくても、同等の情報が得られるよう配慮する。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：A 解説 Flash や Java、Silverlight など、コンテンツの利用に特定のプラグインが必要となる情報 を掲載する際には、そのソフトを利用することができなくても、同等の機能・情報を得ら れるようにする。 理由 特定のプラグインによる情報は、そのプラグインを導入していないと情報を得ることがで きない。また、特定の閲覧環境に対応していないケースもあり、その場合にも、閲覧がで きなくなってしまう。 対応方法 特定のプラグインが必要となる情報は、同等の情報を HTML でも提供する。 確認事項 プラグインをオフまたは、未導入の環境で、情報が得られるか確認する。 - 54 - 4-1-2. プラグインの入手先を明示し、操作方法の解説をする。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U・A 解説 プラグインの入手に必要な情報を明示する。 理由 特定のプラグインによる情報は、そのプラグインを入手できなければ閲覧することができ ない。 対応方法 プラグインの入手先を明示する。また、導入方法の説明ページを設ける。 図 4-1-2A PDF 閲覧用ソフトのダウンロードを促す記述例。 確認事項 サイトの案内を頼りにプラグインの最新版を入手できるか確認する。 - 55 - 4-1-3. JavaScript によるページの移動を行なわない。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：A 解説 利用者が直前に開いていたページへ「戻る」ためのリンクを、JavaScript を用いて設置し ない。 理由 利用者が直前に開いていたページに「戻る」ためのリンクは、JavaScript が用いられるた め、JavaScript が無効な環境では機能しない。また「戻る」先が利用者ごと、閲覧機会ご とに変わり、一定の動作をするものではないので、混乱が生じてしまう。 対応方法 JavaScript を利用した「戻る」ボタンは設置しない。 確認事項 JavaScript によるリンクが設置されていないか確認する。 - 56 - 5.ダウンロードデータに関する事項 5-1.ダウンロードデータの提供は、その必要性について考慮する。 5-1-1. ダウンロードデータのみによる情報提供は行なわない。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U・A 解説 情報提供方法の基本は、HTML ページの閲覧によって行い、ダウンロードデータは、詳細 なデータ提供、補足説明、様式、印刷用などのサービス提供用とし、ダウンロードデータ のみでの情報提供は行なわない。 理由 特定のプラグインによる情報は、そのプラグインを入手できなければ閲覧することができ ない。 対応方法 HTML による通常のページを作成し、その上で、添付ファイルによる情報提供を行なう。 確認事項 ダウンロードデータ以外にも、HTML で情報が提供されているか確認する。 - 57 - 5-1-2. ダウンロードデータは、ファイルの種類とファイルサイズを明示する。 優先度：2 達成基準 ：2.4.4 適合レベル：A 区分：A 達成基準 ：2.4.9 適合レベル：AAA 区分：U 解説 ダウンロードデータを提供する際には、ファイル形式とファイルサイズを明示する。 理由 利用者の環境で利用可能なデータであるか判断でき、また、ダウンロードに要する時間を 事前に推測できることで、閲覧するかどうかを決めることができる。 対応方法 ダウンロードデータへのリンク部分に、ファイル形式とファイルサイズを明示する。 図 5-1-2A 2-6-2 に示されるように「こちら」を具体的な言葉に置き換えた上で、ファイル 形式とファイルサイズを明記している例。 確認事項 ダウンロードデータへのリンク部分に、ファイル形式とファイルサイズが記されているか 確認する。 - 58 - 5-2.PDF ファイルに関する事項 5-2-1. PDF で情報提供する場合は、HTML でも提供する 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U・A 解説 PDF ファイルで情報提供する場合は、読み上げ可能なテキストが含まれ、読み上げ順序に 問題のないアクセシブルな PDF ファイルを提供する。 理由 アクセシビリティに配慮された PDF ファイルでない場合、音声読み上げソフトで情報の取 得ができない。 対応方法 紙の文書をスキャナーなどで画像として読み込み PDF に変換して提供しない。 アドビシステムズが推奨する方法で、アクセシブルな PDF を生成する。 確認事項 生成された PDF がアクセシブルなものか確認する。 注意事項 アクセシブルである PDF 文書の条件 １．文書の読み上げ順序が適切である。 ２．画像などの視覚情報に対して、テキストによる代替情報が提供されている。 １．については、タグ付き PDF を作成する必要があるが、作成手順が煩雑で、作業も大変。 ２．については、Microsoft Office や Adobe Acrobat を用いて、画像等に代替テキストを付 与する必要があるが、日本語の代替情報が文字化けする場合があるなどの不具合がある。 現状では、PDF 文書をアクセシブルにするには限界がある。アクセシビリティの観点から 言うと、HTML による情報提供がベストであり、PDF はセカンドベストになる。このため、 PDF 文書で情報提供を行う場合には、「これは HTML では提供できないか」ということを 事前に十分検討する必要がある。 - 59 - 5-2-2.ファイルサイズの大きな PDF ファイルは、分割して掲載する。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U・A 解説 ファイルサイズの大きな PDF ファイルは、複数に分割して掲載する。 理由 大きいファイルをダウンロードするのは、回線に負荷がかかり、ダウンロードに要する時 間も長くかかってしまう。また、資料の一部が欲しい場合にも全てをダウンロードしなけ ればならず、効率的でない。 対応方法 3MB 程度を目安にファイルを分割する。 図 5-2-2A 一定のファイルサイズ以下となるよう、 ページごとに別の PDF ファイルとして準備されている。 確認事項 3MB 以上の PDF ファイルを掲載していないか確認する。 - 60 - 6.時間変化に関する事項 6-1.時間変化を伴う表現は、使用方法に注意する。 6-1-1.変化する画像、移動及び点滅するテキストは極力使用しない。 優先度：1 達成基準 ：2.2.2 適合レベル：A 区分：A 達成基準 ：2.3.1 適合レベル：A 区分：A 解説 映像素材以外は、写真を変化させたり、移動点滅するテキストを極力使用しない。 点滅を必要とする場合は、1 秒間に 3 回以下とする。また、点滅を停止させる機能を設ける。 理由 点滅・移動する情報は、利用者によっては認識できないことがある。 点滅・移動の多用は、利用者のコンテンツへの集中力を奪うことになり、早い点滅は、発 作の原因にもなる。 対応方法 点滅や移動する情報は使わない。 点滅を利用する場合は、1 秒間に 3 回以下とする。一定時間が経過したら停止させる。 移動を利用する場合は、速度を緩やかにし、一定時間が経過したら停止させる。 確認事項 文字の点滅やスクロールは使用していないか確認する。 点滅は 1 秒間に 3 回を超えて行われていないか確認する。 点滅や移動は、一定時間経過後、停止しているか確認する。 - 61 - 7．入力フォームに関する事項 7-1．入力フォームに関する事項 7-1-1．ラベルは分かりやすい位置に配置し、フォームの構成部品に関連づける。 優先度：1 達成基準 ：1.1.1 適合レベル：A 区分：A 達成基準 ：1.3.1 適合レベル：A 区分：A 達成基準 ：3.3.2 適合レベル：A 区分：A 達成基準 ：4.1.2 適合レベル：A 区分：A 解説 入力フォーム（入力欄など）のラベル（項目名）は、その直前など、分かりやすい位置に 配置し、ラベルとフォームをプログラム的にも関連づける。 理由 入力内容を明確にすることで、利用者が理解しやすくなる。また、ラベルとフォームを関 連づけなければ、マウス操作が困難な方や音声読み上げソフトなどを利用する方が操作で きない。 図 7-1-1A 「ご住所」に対して入力欄が 2 つあると何を入力すべきかわからない。 「郵便番 号」「ご住所」とそれぞれに名前がついていれば理解できるようになる。 対応方法 フォームの前に分かりやすいラベルをつける。 ラベルとフォームは label 要素で明確にする。 確認事項 フォームの前に分かりやすいラベルがついているか確認する。 ラベルとフォームが関連付けられているか確認する。 - 62 - 7-1-2. フォームの入力や選択の操作で、状況を変化させない。 優先度 ：1 適合レベル：A 達成基準 ：3.2.2 区分 ：A 解説 項目の選択とページの移動にはそれぞれ別のボタンを設けるなど、利用者の操作によって 及ぼす影響や結果が予測できるように配慮する。 理由 操作を間違えて選択しただけでページが遷移してしまうと、利用者が意図していない状態 で変化が起こることとなり、困惑してしまう。 対応方法 「選択メニュー」と「決定・送信」ボタンなどのプログラムは、操作を分けるようにする。 確認事項 項目を選択しただけで、状況の変化を引き起こしていないか確認する。 - 63 - 7-1-3. 入力すべき内容と入力方法を説明する。 優先度 ：1 適合レベル：A 達成基準 ：3.3.2 区分 ：A 解説 入力欄には、分かりやすい項目名や入力条件、記入例を記載するなどして、入力しやすい ように配慮する。 理由 情報の入力は、利用者の個人情報である場合もあり、入力に慎重になるため、入力方法を 分かりやすく説明するなどして、入力しやすい状態を保つ。 入力項目名は簡潔で分かりやすく、入力条件も記載することで、音声読み上げソフトの利 用者なども、利用しやすくなる。 対応方法 分かりやすい入力項目名をつける。 半角数字など入力条件がある場合は記載する。 記入例を記載する。 入力方法の説明や記入例は、入力場所より前にして、見やすくする。 確認事項 分かりやすい入力項目名と入力条件が記載されているか確認する。 記入例は設けられているか確認する。 - 64 - 7-1-4. 入力エラー箇所を知らせ、修正を知らせる配慮をする。 優先度：1 達成基準 ：3.3.1 適合レベル：A 区分 ：U 達成基準 ：3.3.3 適合レベル：AA 区分 ：U 解説 利用者の入力にエラーがあった場合には、その場所を特定して、修正方法を周知する仕組 みを導入する。 理由 入力ミス、操作ミスは誰にでもあることであり、入力エラーを知らせず、そのまま送信し てしまうと、送り手は再度はじめから入力をしなければならなかったり、間違いに気づか ず入力内容を送信してしまう可能性があり、不十分なデータを送ってしまうことになる。 また、受け手も、入力途中の不十分なデータを受け取ることになり、有効なコミュニケー ションにならない。 図 7-1-4A 入力が不十分な内容をテキストで知らせるとともに、入力欄に視覚的な変化を つけることで不十分な箇所をわかりやすく示している。 対応方法 入力エラーの項目の特定と、その修正方法について周知する仕組みを導入する。 （セキュリティ上問題がある場合は除く） 確認事項 入力エラーを知らせてくれるか確認する。 修正方法は周知されているか確認する。 - 65 - 7-1-5. 入力した内容を確認できるようにする。 優先度 ：1 適合レベル：AA 達成基準 ：3.3.4 区分 ：U 解説 入力した内容を送信（登録）する前に、入力内容を確認するためのページを設ける。 理由 利用者によっては、間違って登録してしまう場合がある。 対応方法 入力内容確認画面を準備する。 図 7-1-5A 入力フォームの画面遷移例。正しい内容が送信されるよう、また、誤操作から の復帰が可能なように、エラーの修正・入力内容の確認画面を設けるのが一般的。 確認事項 入力内容を確認する画面が表示されるか確認する。 - 66 - 7-1-6. 入力した内容を継承できるようにする。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 ブラウザやページ上に設定された「戻る」ボタンを押し、前のページに戻る場合、利用者 が入力した内容については、上書き修正ができるようにする。 理由 入力数が多くなると、利用しにくくなる。 対応方法 戻るボタンを利用した場合、入力したデータを継続して表示できるようにする。 確認事項 ブラウザの戻るボタンで戻った場合、入力した内容はクリアになっていないか確認する。 - 67 - 7-1-7. 入力項目は少なくする。 優先度 ：2 適合レベル：- 達成基準 ：なし 区分 ：U 解説 求める入力項目は、必要最小限にする。 理由 入力項目が多いと、利用しづらくなる。 また、個人情報を扱うため、厳しい管理が必要となる。 対応方法 求める入力項目は、必要なもののみとする。 入力項目の中でも必要最低限の項目については、（必須）など表示し、利用者に知らせる。 ・参考：個人情報の保護について（http://www.pref.nagasaki.jp/privacy/） 確認事項 不必要な情報を収集していないか確認する。 - 68 - 7-1-8. 制限時間は設けない。 優先度：1 達成基準 ：2.2.1 適合レベル：A 区分：U 達成基準 ：2.2.5 適合レベル：AAA 区分 ：U 解説 セキュリティ上必要な場合を除き、入力に制限時間を設けない。 理由 利用者の環境によっては、入力に時間がかかる場合がある。 対応方法 入力フォームには制限時間を設けない。 会員専用など、セキュリティ上制限時間を設けている場合は、再ログインの際、前回の入 力内容が継承されるように配慮する。 確認事項 入力フォームに制限時間を設けていないか確認する。 - 69 - 8.音声や映像に関する事項 8-1. 8-1-1. 音声や映像で情報を提供する場合、代替情報も併せて提供する。 音声情報を提供する場合は、内容を書き起こしたテキストや手話などの代替情報を 提供する。 優先度：1 達成基準 ：1.2.1 適合レベル：A 区分 ：A 達成基準 ：1.2.2 適合レベル：A 区分 ：A 達成基準 ：1.2.4 適合レベル：AA 区分 ：A 達成基準 ：1.2.6 適合レベル：AAA 区分 ：A 達成基準 ：1.2.8 適合レベル：AAA 区分 ：A 達成基準 ：1.2.9 適合レベル：AAA 区分 ：A 解説 音声（映像と同期した音声を含む）で情報を提供する場合には、その内容をテキストや 手話版などで提供する。 理由 耳が不自由な方は、音声だけで情報を提供されても理解することができない。 対応方法 音声で提供する情報は、テキストでも提供する。 音声で提供する情報は、手話版でも提供するなど、利用者に配慮する。 例）手話・字幕版の映像制作、記者会見のテキスト版など 確認事項 音声に関する情報は、テキストでも提供されているか確認する。 - 70 - 8-1-2. 映像で情報を提供する場合には、音声またはテキストで代替する。 優先度：1 達成基準 ：1.2.1 適合レベル：A 区分 ：A 達成基準 ：1.2.3 適合レベル：A 区分 ：A 達成基準 ：1.2.5 適合レベル：AA 区分 ：A 達成基準 ：1.2.7 適合レベル：AAA 区分 ：A 達成基準 ：1.2.8 適合レベル：AAA 区分 ：A 解説 動画やアニメーションを提供する場合、内容を説明する音声やテキスト情報も提供する。 理由 目の不自由な人など、動画では情報を得ることができない場合がある。 対応方法 状況を説明する音声テキストやテキストなどの代替情報を提供する。 映像による紹介と同じ内容の情報ページを制作する。 確認事項 映像に関する情報は、テキストデータや音声でも提供されているか確認する。 - 71 - 8-2. 8-2-1. 音声や映像で情報を提供する場合、コントロールできるようにする。 音や映像は自動的に再生しない。 優先度：1 達成基準 ：1.4.2 適合レベル：A 区分 ：A 達成基準 ：2.2.2 適合レベル：A 区分 ：U 解説 音や映像は、利用者の意に反して再生されないようにする。 理由 ページを表示するだけで再生されると、再生していることに気がつかず、急に大音量で流 れ出すなど、困惑する場合がある。 対応方法 音や映像は、ページを開いただけで、自動的に再生させない。 自動的に再生させる場合は、利用者に再生する旨を周知し、時間を置いて再生させる。 確認事項 ページを開いただけで、再生されないか確認する。 自動的に再生される場合は、利用者に再生することを周知したうえで、時間をおいて再生 しているか確認する。 - 72 - 8-2-2. 音や映像の再生は、利用者がコントロールできるようにする。 優先度：1 達成基準 ：1.4.2 適合レベル：A 区分 ：A 達成基準 ：2.2.2 適合レベル：A 区分 ：A 解説 音や映像の再生・一時停止やボリューム調整は、利用者が調整できる仕組みを提供する。 理由 利用者の利用する環境はさまざまであるため、利用者の意思に基づいて操作できなければ、 不意な動作を起こした場合、ページを消すしか方法がなく、今後利用されなくなる場合が ある。 対応方法 音や映像の再生・一時停止やボリューム調整は、利用者が調整できる仕組みを提供する。 確認事項 再生・一時停止・停止・音量調整のコントロールができるか確認する。 - 73 -