1. ガイドラインの目的ウェブサイトは文字や画像 音声 映像を組み合わせて いろいろな情報をいろいろな形で表現することができます また インターネットの普及 携帯コンテンツの進歩により 勤務先のほか 学校や自宅 屋外など あらゆる場所でウェブサイトにアクセスすることができます そのため ウェブサイト

Transcription

1 長崎県ウェブサイト アクセシビリティガイドライン 改訂第 5 版 長崎県 2017 年 6 月 20 日

2 1. ガイドラインの目的ウェブサイトは文字や画像 音声 映像を組み合わせて いろいろな情報をいろいろな形で表現することができます また インターネットの普及 携帯コンテンツの進歩により 勤務先のほか 学校や自宅 屋外など あらゆる場所でウェブサイトにアクセスすることができます そのため ウェブサイトやウェブシステムの作成にあたっては どのような利用者がいるのか どのような環境で利用しているのか 改めて考えてみる必要があります ウェブサイトの作成については さまざまな方が利用できるようにアクセシビリティに配慮した日本工業規格 (JIS 規格 ) JIS X が定められており 2016 年には World Wide Web Consortium(W3C) が定めた世界的共通の規格 ( ウェブ コンテンツ アクセシビリティ ガイドライン (WCAG)2.0) に準じた改正が行われました この規格に準じて 総務省において みんなの公共サイト運用ガイドライン の策定 改定が行われ さまざまな方が利用する公共機関のウェブサイトについては JIS 規格に基づいたサイト作成が求められています また 2016 年 4 月に施行された障害者差別解消法では ウェブアクセシビリティを含む情報アクセシビリティは合理的配慮を的確に行うための環境の整備と位置づけられており 事前的改善措置として計画的に推進することが求められています このような背景から 長崎県では 多くの人にウェブサイトを利用していただき ウェブサイトを電子県庁として 各課と利用者を直接結びつける媒体として利用できるよう 長崎県ウェブサイトアクセシビリティガイドライン を作成し 取り組むことにより 利用者と情報発信者が利用しやすいウェブサイトを構築していきます 2. ガイドラインの考え方ガイドラインは次に示す利用者の環境を想定して作成しています (1) ウェブサイト利用者年齢や性別 身体の障害の有無などに関らず ウェブサイトを利用するすべての利用者 (2) ウェブサイトを利用する環境ウェブサイトを利用するさまざまな利用環境を想定しています デスクトップ型パソコンやノート型パソコン モバイル端末などハードウェアの違い ブロードバンドやナローバンドなどの通信環境の違い Windows や Macintosh などの OS( 基本ソフト ) の違い Internet Explorer や Firefox などブラウザソフトの違い キーボードやマウスがない環境など操作機器の違い カラーやモノクロのディスプレイの表示機器の違い 身体障害の状況に応じた入出力機器などの違い 1

3 (3) 適用範囲長崎県公式ウェブサイトのほか 長崎県が制作 運営するウェブサイト ウェブサイトを通じて提供するサービスサイト (4) 参考とする規格等 JIS( 日本工業規格 ) JIS X : 2016 高齢者 障害者等配慮設計指針- 情報通信における機器 ソフトウェア及びサービス- 第 3 部 : ウェブコンテンツ 総務省公共分野におけるウェブアクセシビリティの確保の取り組みの充実に関する調査研究報告書 みんなの公共サイト運用ガイドライン(2016 年度版 ) W3C ウェブ コンテンツ アクセシビリティ ガイドライン(WCAG)2.0 ( 参考 ) 障害者基本法 ( 情報の利用におけるバリアフリー化等 ) 第 22 条 2( 平成 23 年改正 ) 国及び地方公共団体は 災害その他非常の事態の場合に障害者に対しその安全を確保するため必要な情報が迅速かつ的確に伝えられるよう必要な施策を講ずるものとするほか 行政の情報化及び公共分野における情報通信技術の活用の推進に当たつては 障害者の利用の便宜が図られるよう特に配慮しなければならない 障害者基本計画 ( 第 3 次計画平成 25 年度 ~ 平成 29 年度 ) III 6-(4)-1 各府省において, 障害者を含む全ての人の利用しやすさに配慮した行政情報の電子的提供の充実に取り組むとともに, 地方公共団体等の公的機関におけるウェブアクセシビリティの向上等に向けた取組を促進する 障害を理由とする差別の解消の推進に関する法律 ( 平成 28 年 4 月 1 日施行 ) ( 社会的障壁の除去の実施についての必要かつ合理的な配慮に関する環境の整備 ) 第五条 御製期間等及び事業者は 社会的障壁の除去の実施についての必要かつ合理的な配慮を的確に行うため 自ら設置する施設の構造の改善及び設備の整備 関係職員に対する研修その他の必要な環境の整備に努めなければならない ( 行政機関等における障害を理由とする差別の禁止 ) 第七条 2 行政機関等は その事務又は事業を行うに当たり 障害者から現に社会的障壁の除去を必要としている旨の意思の表明があった場合において その実施に伴う負担が過重でないとき 2

4 は 障害者の権利利益を侵害することとならないよう 当該障害者の性別 年齢及び障害の状態に応じて 社会的障壁の除去の実施について必要かつ合理的な配慮をしなければならない 工業標準化法 ( 日本工業規格の尊重 ) 第 67 条 国及び地方公共団体は 鉱工業に関する技術上の基準を定めるとき その買い入れる鉱工業品に関する仕様を定めるときその他その事務を処理するに当たつて第二条各号に掲げる事項に関し一定の基準を定めるときは 日本工業規格を尊重してこれをしなければならない ( そのほかの基準 指針 ) 障害者の権利に関する条約(Convention on the Rights of Persons with Disabilities) Web サイト等による行政情報の提供 利用促進に関する基本的指針 電子自治体の取組を加速するための 10 の指針 政府情報システムの整備及び管理に関する標準ガイドライン 3. ウェブアクセシビリティ取組方針ウェブアクセシビリティ確保のために 職員をはじめ 委託事業者とも連携して取り組んでいきます (1) 取組体制について長崎県が提供するウェブサイトのアクセシビリティ確保に向け コンテンツを作成する各所属への周知を行うとともに コンテンツ制作委託事業者や検証を依頼する外部モニターなど協力を得ながら運営を行う (2) 職員の意識向上について実務的なウェブアクセシビリティ配慮のためのガイドラインを整備し 周知していくとともに ウェブアクセシビリティの理解を深める研修や ホームページ作成に関する研修を継続的に実施し コンテンツ作成に携わる職員のウェブアクセシビリティ確保に取り組みます 職員はコンテンツを作成 更新するときには チェックシートなどによりウェブアクセシビリティが確保されているか確認し 適切な配慮を行った後に公開していくように努めます また ウェブサイト管理者は 作成時に確認できるチェックツールなどを導入し コンテンツ作成時の確認を支援します (3) 委託業者への取組業務委託を行う場合には 仕様書に別添個別遵守事項のうち 必要なものを添付し 委託業者へ遵守させるとともに 検収時の確認作業をとおして アクセシビリティに配慮したサイト制作を進めます 3

5 (4) 検証についてウェブアクセシビリティ対応状況については 手順書やチェックツール等を使用して 作成 更新時はもとより 既存のコンテンツについても検証していきます また ホームページやウェブコンテンツについて 必要に応じ ユーザーテストや意見募集を行い 問題点について検証し 改善に努めていきます 4. 前提となる注意点 (1) ウェブコンテンツに関する規格や技術仕様の遵守 ウェブコンテンツは 各種ブラウザや OS 支援技術 ( 音声読み上げや拡大機能など ) などとの連携によって利用者に提供されます どのような方でも利用できるようにするためには 共通のルールに準拠して制作する必要があります 実例 HTML や CSS などは W3C が発表している WEB 標準に則って記述する Flash や PDF など 特定企業が推進している技術は それぞれの企業が公式に発表している規格や仕様を守る HTML コーティングにおいて 不要な記述は避ける 不必要な記述があると ブラウザによってはきれいに表示されない場合があります (2) 情報デザイン ( 情報の整理やページ構成など ) への配慮 ウェブサイトで提供するすべての情報は その情報の整理を行い サイトの構成 ページレイアウト コンテンツの表現方法などについて 利用者の立場に立って検討しましょう (3) アクセシビリティとユーザビリティへの配慮 アクセシビリティは 使えるかどうか ユーザビリティは 使いやすさ ( 学習しやすさ 操作の効率性など ) の問題を中心として扱います 両者を明確に区分できない場合も多く アクセシビリティに取り組むことは ユーザビリティの向上にもつながります そのため どちらか一方だけを考えるのではなく 両方について考慮することが効果的です (4) セキュリティ プライバシーへの配慮 セキュリティには システムに対するものと情報に対するものがあります システムを構築するプログラムが攻撃を受けると ほかのプログラムにも影響するなど 多大な被害を受けます プログラムを開発する際には セキュリティを意識した制作を行うとともに 運営を行う際のパスワードなどの管理も重要です 情報は ウェブサイトで公開している間は生きた情報となります 期限が過ぎている情報を掲載することは 利用者にとって不快感や不利益を与えることになり 場合によっては 損害賠償請求や著作権侵害などの損害賠償を求められるなど 県にとって不利な状況になる可能性があります 4

6 また 個人情報の取り扱いについては 特に注意する必要がありますので 関係法 令を遵守するとともに プライバシーポリシーを制定して 運営時には厳格に守るなど 企画 制作 運営時において それぞれの取組を行ってください 5. 企画 制作上の注意点 (1) 企画するときからアクセシビリティに配慮するウェブサイトを制作する場合は ターゲットとなる利用者やアクセシビリティへの配慮について定めてください 情報更新頻度の高いサイトの場合 更新時に品質を保てない場合があるため コンテンツ管理システム (CMS) を導入することも選択肢の1つになります (2) 業務委託を行う場合業務委託を行う場合 仕様書に使用するガイドラインについて記述し 業者に周知してください また 納品されたページやシステムに対して 必ずページ検証を行ってから公開してください (3) 公開前にチェックするブラウザのバージョン パソコン版 Microsoft Internet Explorer 11 以上 ( 必須 ) Google Chrome 最新版 ( 任意 ) Opera 最新版 ( 任意 ) Firefox 最新版 ( 任意 ) Safari 最新版 ( 任意 ) スマートフォン版 iphone ipad 系 Safari Android 系 Chrome 携帯版 各携帯キャリアによる 6. 個別遵守事項に関する注意点個別遵守事項については 基本的事項からコンテンツ オブジェクト フォーム 動画など さまざまな項目が用意されています 制作時に利用する項目について活用してください また すべての項目をいきなり満たすことは難しいため 優先度を設けています 優先度 1は ( 必須 ) 2は ( 強く推奨 ) 3は ( 推奨 ) です 優先度 1については必ず達成するようにしてください 5

7 長崎県ウェブサイトアクセシビリティガイドライン個別遵守事項 目次 1. コンテンツ制作の基本事項 1-1 使用する規格を明確にする ウェブページを作成する際には XHTML1.0 Transitional CSS2.0 を用い 文字 コードは UTF-8 を使用する ウェブページのソースコードは 使用する技術や仕様に従って記述する 基本言語を指定する 部分的に異なる言語を用いる場合 その言語に適した言語コードを記述する 1-2 ページ制作サイズは 表示サイズ等に配慮する 横スクロールが発生しないよう ページ幅を配慮する ページの長さは 3 画面分程度に収める 印刷時に A4 用紙に収まるよう 適切な設定をする 1-3. レイアウトとコンテンツを分離する レイアウトや装飾など視覚表現の制御には スタイルシートを用いる 1-4. 適切なフォルダ名 ファイル名をつける フォルダ名 ファイル名は半角英数字を用い 簡潔に表現する 1-5. ファイルサイズを小さくする ファイルサイズの少ないページを作成するよう心がける 2. コンテンツの構成や仕組みについて配慮する事項 2-1. コンテンツの制作に関する事項 ( レイアウト ) 位置や表示スタイルなどに一貫性のある基本操作部分を提供する フレームは使用しない 印刷時は メニューなどの不必要な情報を除いて印刷できるようにする 2-2. コンテンツの制作に関する事項 ( コンテンツ ) 適切なページタイトルを設定する 適切な HTML 要素を用いて文書の構造を記述する - 1 -

8 現在位置を示す情報を付与する 文字の色はウェブセーフカラーを用いる 文字の色と背景の色には 十分なコントラストを確保する 文字の大きさは pt px で指定しない 2-3. 情報提供に関する事項 分かりやすい文章で表現する カタカナ文字 外国語 専門用語を多用しない 略語を使用する場合は 最初に説明を行う 読みの難しい言葉は 読み方を明示する 単語の途中にスペースや改行を入れない 機種依存文字は使用しない 色だけで情報の識別や指示をしない 形や位置だけで情報の識別や指示をしない 日付 時刻 通貨単位は 漢字表記を基本とする サイト内で使う言葉は 全ページで統一した言葉を用いる 利用者からの問い合わせ方法を記述する 2-4. イメージ ( 画像等 ) に関する事項 画像 リンク画像には適切な代替テキストをつける 画像化された文字はできる限り使わない 2-5. 表に関する事項 レイアウトのために表 (table 要素 ) を使用しない 表を使用する場合は単純な構造にし 読み上げ順に配慮する 2-6. リンクに関する事項 リンクは相互の間隔を十分に取り 大きな面積を確保する リンクを設定する場合は リンク先が想像できる文言で表す リンクを開く際は 新しいウィンドウを開かない 自動的にページを更新したり 別のページに移動したりしない 2-7. 管理に関する事項 複数の経路でページに到達できるようにする 新着情報は 適切に管理する 掲載期間の過ぎた情報は掲載しない - 2 -

9 3. 操作性に関する事項 3-1. さまざまな使用方法に対応できるようにする マウスだけでなく キーボードですべての操作ができるようにする すべてのページに共通する部分を読み飛ばすことができるしくみを提供する 3-2. フォーカスに関する事項 キーボードによるフォーカス移動は 視覚的な順序と一致させる フォーカスされていることが視覚的に認知できるようにする フォーカスが当たった時に 状況を変化させない 4. オブジェクトに関する事項 4-1. 特定の技術やプラグインに対応していないブラウザの配慮を行なう プラグインを使用しなくても 同等の情報が得られるよう配慮する プラグインの入手先を明示し 操作方法のをする JavaScript によるページの移動を行なわない 5. ダウンロードデータに関する事項 5-1. ダウンロードデータの提供は その必要性について考慮する ダウンロードデータのみによる情報提供は行なわない ダウンロードデータは ファイルの種類とファイルサイズを明示する 5-2. PDF ファイルに関する事項 アクセシビリティに配慮した PDF を提供する ファイルサイズの大きな PDF ファイルは 分割して掲載する 6. 時間変化に関する事項 6-1. 時間変化を伴う表現は 使用方法に注意する 変化する画像 移動及び点滅するテキストは極力使用しない 7. 入力フォームに関する事項 - 3 -

10 7-1. 入力フォームに関する事項 ラベルは分かりやすい位置に配置し フォームの構成部品に関連づける フォームの入力や選択の操作で 状況を変化させない 入力すべき内容と入力方法を説明する 入力エラー箇所を知らせ 修正を知らせる配慮をする 入力した内容を確認できるようにする 入力した内容を継承できるようにする 入力項目は少なくする 制限時間は設けない 8. 音声や映像に関する事項 8-1. 音声や映像で情報を提供する場合 代替情報も併せて提供する 音声情報を提供する場合は 内容を書き起こしたテキストや手話などの代替情報 を提供する 映像で情報を提供する場合には 音声またはテキストで代替する 8-2. 音声や映像で情報を提供する場合 コントロールできるようにする 音や映像は自動的に再生しない 音や映像の再生は 利用者がコントロールできるようにする - 4 -

11 構成 記述区分 ( 優先度 ) ガイドラインの中でも 取組の優先度を表しています 優先度 1 (a)jis 規格の適合レベル A 及び AA に該当し 目標達成のために取り組まなければならないもの (b)jis 規格には項目がないが 配慮することで 利用者の利便性を著しく増加させるもの 優先度 2 (a) 配慮することで 利用者が快適に利用できるもの (b)jis 規格の適合レベル AAA に該当し 利用者の利便性に大きく寄与するもの 優先度 3 JIS 規格の適合レベル AAA に該当するもの ( 達成基準 適合レベル ) JIS X :2016 に規定される達成基準とその適合レベルを表しています 達成基準 ページの作成において対応すべき個別的な要件を規定したもの 適合レベル アクセシビリティ対応の程度を示したもの ( 区分 ) U( ユニバーサルデザイン 利用しやすさ ) と A( アクセシビリティ 誰でも利用できる ) のどちらに配慮した仕様かを表しています 取組の内容を掲載しています 理由 配慮しなければならない理由を掲載しています 対応方法 作業内容を掲載しています 確認事項 制作したファイルの確認方法を掲載しています - 5 -

12 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

13 ウェブページのソースコードは 使用する技術や仕様に従って記述する 優先度 :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

14 基本言語を指定する 優先度 :1 達成基準 :3.1.1 適合レベル :A 区分 :A 日本語を主体とするページには 基本言語として日本語を指定する 理由ウェブページで記載されている言語にあった言語コードが指定されていないと 不適切な文字が表示されてしまう可能性がある また そのページを音声読み上げソフトで読み上げた場合に 正しい読み上げが行われない可能性がある 対応方法日本語を主体とするページには HTML の場合は <html lang="ja"> と記述する XHTML の場合は 図 1-1-3A のように xml:lang="ja" を併記する 外国語を主体とするページの場合には その言語ごとに適切なソースコードを記述する 図 1-1-3A 主たる言語が日本語であるページの言語コード記載例 確認事項ウェブページのソースコードを表示し <html lang="ja"> と記述されていることを確認する - 8 -

15 部分的に異なる言語を用いる場合 その言語に適した言語コードを記述する 優先度 :1 達成基準 :3.1.2 適合レベル :AA 区分 :A ページの主体となる言語と異なる言語を部分的に用いる場合には 言語が切り替わった箇所を lang 属性を用いて明示する 理由ウェブページで記載されている言語にあった言語コードが指定されていないと 不適切な文字が表示されてしまう可能性がある また そのページを音声読み上げソフトで読み上げた場合に 正しい読み上げが行われない可能性がある 対応方法 で定めるとおり ページの主体となる言語の言語コードを記述することに加え 部分的に異なる言語を用いる場合にも 言語が切り替わった箇所を lang 属性を用いて明示する 図 1-1-4A 英語が用いられている箇所に lang 属性を記述している 確認事項ウェブページのソースコードを表示し 部分的に異なる言語を用いている箇所について適切な言語コードが記述されていることを確認する - 9 -

16 1-2 ページ制作サイズは 表示サイズ等に配慮する 横スクロールが発生しないよう ページ幅を配慮する 優先度 :2 達成基準 : なし適合レベル :- 区分 :U ページを表示した際 小さな画面で表示しても横スクロールが発生しないよう 表示エリアに合わせてページ幅が変わるなどの配慮を施すようにする 理由ウェブページを閲覧する場合 横スクロールが発生すると 一行読むたびに左右のスクロールが必要となり スムースな閲覧ができなくなってしまう PC だけでなく スマートフォン 携帯電話など画面の小さな機器での閲覧を考慮する必要がある 図 1-2-1A 横スクロールが発生すると スムースな閲覧ができない 対応方法下記に示す方法のうち ウェブサイトの目的や想定するターゲットを元に選択的に制作する 機器の表示エリアに合わせて ページ幅が変化するように制作する 閲覧する機器に合わせた複数のページを生成する ウィンドウ幅を 1024ピクセルにした場合に横スクロールが発生しないサイズで作成する 確認事項ウェブブラウザのウィンドウ幅を 1024 ピクセル程度にした状態で 横スクロールが発生しないこと及び 表示されない部分がないことを確認する

17 ページの長さは 3 画面分程度に収める 優先度 :2 達成基準 : なし 適合レベル :- 区分 :U ページの長さは 650 ピクセルを 1 画面とし 3 画面以内に収める 理由 ページの長さが著しく長くなると スクロール作業が煩雑になったり 情報量が多くなることで目的の情報が探しにくくなったりしてしまう 図 1-2-2A ページの長さの上限 ( イメージ ) 対応方法ページの長さは 650 ピクセルを 1 画面とし 3 画面以内に収め それを超える場合には 別ページを作成することを原則とする ただし ページを分けることが誤解につながるおそれがあるなどの場合には コンテンツの状況に応じて 以下の方法をとる 適宜見出しをつける ページの先頭に概要を掲載する 簡潔な表現に変えられないか検討する

18 印刷時に A4 用紙に収まるよう 適切な設定をする 優先度 :2 達成基準 : なし 適合レベル :- 区分 :U 利用者がウェブページを印刷した際 A4 用紙 ( 縦位置 ) に収まるよう適切な設定をする 理由 ウェブページの幅が A4 用紙の幅以上に設定されていると 利用者がウェブページを印刷し た際に 一部の情報が印刷対象にならないなど 情報が不足してしまう可能性が高い 対応方法ページの横幅を A4 に収まるサイズに固定して作成してもいいが その場合 画面表示時に余白が多くなり閲覧時の効率が良くない そのため ページの横幅を出力先に応じて変化させることができるようにしておく また その際 で示すように メニューや余分な装飾を取り払った印刷用のスタイルを用意しておくことで さらに使い勝手がよくなる 確認事項ウェブページを印刷し すべての情報が印刷結果に現れるか確認する

19 1-3. レイアウトとコンテンツを分離する レイアウトや装飾など視覚表現の制御には スタイルシートを用いる 優先度 :1 達成基準 :1.3.1 適合レベル :A 区分 :U A レイアウトや装飾など視覚表現の制御には CSS を用い HTML には 文書構造を適切に 記述する 理由 HTML には 装飾を行うための要素も定められているが 多くは非推奨であったり CSS による代替が強く求められたりしているなど 本来は文書の構造を記述するための言語である レイアウトや装飾といった視覚的な表現に関わる部分は スタイルシートによって記述することで 利用機器に合わせた出力が容易になったり ファイルサイズの軽減につながったりといったメリットが生じる 図 1-3-1A ウェブページの構成イメージ 対応方法スタイルシートを利用する 確認事項スタイルシートを無効にしてウェブページを閲覧した際 情報の不足がないことを確認する

20 1-4. 適切なフォルダ名 ファイル名をつける フォルダ名 ファイル名は半角英数字を用い 簡潔に表現する 優先度 :1 達成基準 : なし適合レベル :- 区分 :U フォルダ名やファイル名は 半角英数字を用いる また その際 数字の羅列や意味のない文字列ではなく 内容を想起しやすい名前にすることが望ましい 理由ひらがな カタカナ 漢字 全角の英数字は 正しく処理できなかったり アドレスとして扱われる際別の形式に置き換わったりするため 使用しないようにする 半角英数字を用いた場合にも 単なる数字の羅列や意味のない文字列を使用してしまうと 内容を理解する助けにならなかったり 直接入力をする際に ミスにつながったりしやすい 図 1-4-1A 漢字を用いた場合 別の文字に置き換わることがある 対応方法ファイル名には 半角英数字を用いる その際に 短くても意味がわかるよう また - _ などを用いて単語や意味の区切りなどを示すと よりわかりやすくなる場合がある 以下についても命名指針として定める 各フォルダ ( ディレクトリ ) 及び コンテンツ群 ( 複数ページの内容的なまとまり ) の最初のページのファイル名は index.html とする HTML の拡張子は.html に統一する (.htm は用いない ) 図 1-4-1B 数字などの羅列では内容がわからないが 言葉を使うと内容がイメージできる 確認事項 ファイルやフォルダ名に 全角文字を用いていないことを確認する ファイルやフォルダ名に 半角カナを用いていないことを確認する ファイルやフォルダ名は 適度な長さを保っていることを確認する

21 1-5. ファイルサイズを小さくする ファイルサイズの少ないページを作成するよう心がける 優先度 :2 達成基準 : なし適合レベル :- 区分 :U ウェブページはファイルサイズを増加させてしまうような不要な装飾を避け 写真はサムネイルを置き 大きな写真は別ページで表示させるようにするなど ファイルサイズが少なくなるよう心がける 理由利用者の中には アナログ回線 携帯電話など 通信速度が十分ではない環境で利用している方もいる また 災害など通信の輻輳によって十分な速度で閲覧ができないことも起こりうる ファイルサイズが大きいと 閲覧時の読み込みに時間がかかり 利用者のストレスになるとともに 必要な情報を取得できない恐れがある 対応方法 HTML コメントなど表示に関係のない文字は極力記述しない 画像を使用する際は トリミングやリサイズなどファイルサイズが小さくなるような処理を施す 大きな写真を掲載する必要がある場合には はじめに小さな写真を表示させ 利用者の求めに応じて別ページに大きな写真を掲載するなどの方法を取る 図 1-5-1A ファイルサイズを測るツールを使うと簡単にファイルサイズが計測できる 画面は Web Developer Extension のもの 確認事項 HTML CSS 画像など ページを表示するのに必要なファイルのファイルサイズ合計が 100KB 以内になっているか確認する

22 2. コンテンツの構成や仕組みについて配慮する事項 2-1. コンテンツの制作に関する事項 ( レイアウト ) 位置や表示スタイルなどに一貫性のある基本操作部分を提供する 優先度 :1 達成基準 :3.2.3 適合レベル :AA 区分 :U ウェブサイト全体に 位置 表示スタイルや表記など一貫性を持たせた基本操作部分を提供し メニューやナビゲーションに統一感を持たせる 理由ページごとに操作方法や ボタンの名称 位置などが異なっていると ページごとに使い方を新たに学習しなければならず 情報が探しにくくなってしまう メニューやナビゲーションに統一感があることで 同じサイトであるという安心感が生まれるとともに 操作を覚えなおす必要がないので 迷いが生じにくくなる 対応方法ほかのページと同じレイアウトが提供されているか確認する

23 フレームは使用しない 優先度 :1 達成基準 : なし適合レベル :- 区分 :U A 複数の領域にそれぞれ別のページを読み込み 1 つのページのように見せる フレーム (frame 要素 frameset 要素 ) を使用しない 理由フレームは一部のウェブブラウザでは利用できない上 複数のページが同時に表示されるため音声読み上げソフトでは切り替え操作が必要になり 情報の取得が難しい また ページを遷移してもウェブブラウザに表示される URL( アドレス ) が変わらなかったり フレーム内の 1 ページのみが単独で表示された場合にナビゲーションが失われてしまうなど 使い勝手が悪くなってしまう 図 2-1-2A B から C にページを遷移しても 見かけ上のアドレス (frame.html) が変わらない 対応方法フレームは メニューと本文を分割する方法として採用されることがあったが 前述のような使いにくさがある 複数のページに共通するメニューを設置したい場合には 各ページにメニューを自動的に生成するしくみを用いるなど フレームを用いず一つのページとして作成する 確認事項フレームを使っていないか確認する

24 印刷時は メニューなどの不必要な情報を除いて印刷できるようにする 優先度 :2 達成基準 : なし 適合レベル :- 区分 :U 印刷を行う際には 必要な情報が見やすいように 共通するメニューを取り除いた状態で印刷できるようにする 理由ウェブページを印刷するのは デザインやナビゲーションではなく ページに表示される情報そのものを必要としている場合がほとんどである ナビゲーション部分が印刷されることで本文の印刷面積が少なくなってしまったり 必要以上に多くの用紙を必要としてしまったりする 対応方法印刷に適したスタイルを定義したスタイルシートを用意する 確認事項印刷もしくは印刷プレビュー機能を用いて 余計な情報が印刷されないか確認する

25 2-2. コンテンツの制作に関する事項 ( コンテンツ ) 適切なページタイトルを設定する 優先度 :1 達成基準 :2.4.2 適合レベル :A 区分 :U A そのページの内容を表すページタイトル (title 要素 ) を設定する 理由ページタイトル (title 要素 ) は そのウェブページのタイトルとして お気に入り に登録した場合のタイトルになったり 検索結果の表示画面でもリンク文字列として表示されたりする また ソーシャルメディアなどで情報が流通する際にも最も目に触れるものとなる そのため ページの内容が表現されていないと 内容を理解できなかったり そのページの魅力が伝わりにくくなってしまう 図 A タイトルは ウェブブラウザのタイトルバーに表示されるだけでなく お気に入り ( ブックマーク ) 登録時の名前としても使用される 対応方法ページタイトルを設定する際には 以下の条件を守る ページの内容を表すものにする 他のページとの重複を避ける 長崎県 であることを含める 25 文字程度に抑える ( 少なくとも そこまでで他と区別できるようにする ) 確認事項ページタイトルを見て ページの内容が想像できるかを確認する

26 適切な 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 要素を用いて文書の構造を記述しているか確認する 文字の大きさなど見た目だけで構造の表現をしていないか確認する

27 現在位置を示す情報を付与する 優先度 :2 達成基準 :2.4.8 適合レベル :AAA 区分 :U パンくずリスト ( トピックパスとも呼ばれる ) を各ページにつける 理由長崎県ウェブサイトは膨大なページ数があるため 全体の構成や 現在地を把握できないと 迷子になってしまう可能性がある サイト内での位置と上位階層へのリンクを備えたパンくずリストをつけることで 現在地やサイト全体の構成の把握がしやすくなる 対応方法各ページには パンくずリストを設置する トップページから現在のページまでの 途中の階層 カテゴリをサイト構成に合わせてシンプルなリンクとして表現する 図 2-2-3A パンくずリスト設置例 確認事項パンくずリストが設置されていることを確認する

28 文字の色はウェブセーフカラーを用いる 優先度 :2 達成基準 : なし 適合レベル :- 区分 :A 文字色はウェブセーフカラーの中から選択し それ以外の色は極力使用しない 理由 ウェブセーフカラー以外の色を用いると 閲覧環境の違いによって色が変わってしまう可能性がある 対応方法閲覧環境に関わらず 正しく表示できるウェブセーフカラーのみを使用する 確認事項複数の閲覧環境で 表示色に大きなずれがないかを確認する

29 文字の色と背景の色には 十分なコントラストを確保する 優先度 :1 達成基準 :1.4.3 適合レベル :AA 区分 :A 達成基準 :1.4.6 適合レベル :AAA 区分 :A 文字の色と背景との色には 十分なコントラストを確保し 読みやすい色の組み合わせを用いる 理由文字の色と背景の色に十分なコントラストが確保されていないと 文字の識別が困難になったり 情報が見つからなくなったりする 対応方法 シンプルな配色を心がける 色のコントラスト比は 4.5:1 を確保する 図 2-2-5A 文字色 : 黒 (#000000) の場合の背景組み合わせ例枠下に示す数字は コントラスト比 確認事項チェックツールを用いてコントラストを確認する カラー コントラスト アナライザー 2013J

30 文字の大きさは pt px で指定しない 優先度 :1 達成基準 :1.4.4 適合レベル :AA 区分 :A 文字サイズの指定は 相対的な単位を使用し pt px などの単位を使用しない また 書 体の指定もしない 理由 pt px の単位を用いると ウェブブラウザによっては 文字サイズの設定を変更しても表示される文字の大きさを変えることができないため 小さな文字が読みづらいと思っていても解決できない 対応方法文字のサイズは % もしくは em で指定する また 原則として書体は指定しない 確認事項ブラウザの文字サイズを変更した際 文字の大きさが変更されるか確認する ( 現状のブラウザの多くは 文字サイズの設定に用いている単位に関係なく 文字および画面全体の拡大 縮小が可能となっている 文字だけを拡大 などのメニューにより 文字サイズのみを変更することができる

31 2-3. 情報提供に関する事項 分かりやすい文章で表現する 優先度 :3 達成基準 :3.1.5 適合レベル :AAA 区分 :U 分かりやすい文章で表現する 必要に応じて 対象者の理解力 読解力に合わせた別のコンテンツを用意する 理由文章が分かりにくかったり 主語 述語の関係が明確でなかったりすると 誤解が生じたり 理解が不十分になってしまったりする場合がある 対応方法 中学校教育レベルの読解力で分かる文章で表現する 総務文書課作成の 分かりやすく親しみやすい文書づくりのために を参照する 別のコンテンツ ( 子ども向けページなど ) を用意する 文章だけではなく 図やイラストなどを用いる 1つの文章は40 文字以内を目安とする 主語 述語の関係を明確に示し 簡潔な文章構造にする 確認事項分かりやすい表現 文章になっているか確認する 必要に応じて 想定する対象者に文章を読んでもらう 総務文書課作成の 分かりやすく親しみやすい文書づくりのために で確認する

32 カタカナ文字 外国語 専門用語を多用しない 優先度 :3 達成基準 :3.1.3 適合レベル :AAA 区分 :U カタカナ文字 外国語 専門用語を多用しない 理由 用語や表記が一般的ではないことによって 誤解が生じたり 理解が不十分になってしまったりする場合がある 対応方法カタカナ文字 外国語 専門用語の代わりに 一般的な用語 わかりやすい表現に置き換えられるかを検討する 用いようとするカタカナ文字 外国語 専門用語に一般性があり その表現が有益であると認められる場合には 置き換えをしない 例 ) パブリックコメント置き換え例 : 意見公募手続 意見募集 ガイドライン置き換え例 : 指針 確認事項用いようとするカタカナ文字 外国語 専門用語に一般性があるか判断する

33 略語を使用する場合は 最初に説明を行う 優先度 :3 達成基準 :3.1.4 適合レベル :AAA 区分 :U 略語を使用する場合には 初めてその言葉を用いる際に 正式表記を添える もしくは 正式表記の書かれた箇所へのリンクを設定する 理由用語や表記が一般的ではないことによって 誤解が生じたり 理解が不十分になってしまったりする場合がある 対応方法略語が出現した際には 単語の後ろにカッコ書きで正式表記を明示する もしくは 脚注や用語集のページなどの正式表記の書かれた箇所に対してリンクを設定する ただし 略語表記が一般的であり 正式表記を添えなくとも言葉の理解度に差異がない場合にはこの限りではない 例 ) 国体 ( 国民体育大会 ) NPO( 非営利団体 / 特定非営利活動法人 ) 確認事項一般的ではない略語に 正式表記が明示されているか確認する

34 読みの難しい言葉は 読み方を明示する 優先度 :3 達成基準 :3.1.6 適合レベル :AAA 区分 :U 人名や地名などで 漢字の読み方が難しい場合 一般的な読みと異なる場合 複数の読み方ができる場合などには 読み方を明示する 理由外国の方 ( 日本語を母国語としない方 ) や子どもなど 漢字の読み方や意味を理解しにくい利用者にとって 読み方がわからないことによって 誤解が生じたり 理解が不十分になってしまったりする場合がある 対応方法読みの難しい単語が出現した際には 単語の後ろにカッコ書きで読み方を併記する 確認事項読みが難しいと思われる言葉に 読み方が明示されているか確認する

35 単語の途中にスペースや改行を入れない 優先度 :1 達成基準 :1.3.2 適合レベル :A 区分 :A 体裁を整えるために 単語の途中にスペースや改行を入れない 理由図 2-3-5A の 日時 定員 ように 体裁を整える目的で 単語の途中にスペースや改行が入っていると 日時 定員 と認識されず 音声読み上げソフトで誤った読み上げ結果になったり 自動翻訳で誤った翻訳結果になったりする 図 2-3-5A 対応方法体裁を整えるために 単語の途中にスペースや改行を入れない 文字の間隔や文字の表示範囲 ( 幅 ) を調整したい場合には スタイルシートを用いる 確認事項単語の途中にスペースや改行が入っていないか目視する 音声読み上げソフトは 表記に問題がない場合でも誤読が避けられない 正しい読み上げをさせるために 漢字をひらがなに改めることなどは過剰な対応となり 適切ではない

36 機種依存文字は使用しない 優先度 :2 達成基準 : なし 適合レベル :- 区分 :A 丸付き文字や省略記号などのいわゆる機種依存文字及び半角カタカナは使用しない 理由丸付き文字や省略記号などのいわゆる機種依存文字や半角カタカナをページ上に用いると 閲覧環境の OS や文字コードの違いによって 意図する文字と違う文字が表示されたり 全く表示されなかったりしてしまう 対応方法丸付き文字や省略記号など図 2-3-6A に示す文字は使用しない 確認事項丸付き文字や省略記号など図 2-3-6A に示す文字を使用していないか確認する 図 2-3-6A

37 色だけで情報の識別や指示をしない 優先度 :1 達成基準 : 適合レベル :A 区分 :A 情報の識別や指示は 色だけに依存した表現を用いず テキストなどの情報を合わせて提供する 理由色の識別が難しい利用者や モノクロディスプレイのような色を表示できない環境では 色だけに依存した表現を用いると 情報の違いを識別できない可能性がある また 音声読み上げソフトでは 色による区別を音声で表現しないため 同様に 情報の識別ができない 対応方法図 2-3-7A では 休館日 であることを 赤字 という色のみで伝えている 図 2-3-7B では 赤字であることに加え 太字であること さらには 2012 年 9 月の休館日は というテキストでの説明を付加している そのため 色が表示できない場合でも 休館日に関する情報を正しく伝えることができる 図 2-3-7A 図 2-3-7B

38 図 2-3-7C 図 2-3-7D 図 2-3-7C では 入力欄の背景色の色を変化させることのみで 入力必須項目 任意項目の別を表現している 図 2-3-7D では ( 必須 ) というテキスト情報を合わせて提供している このように 文字色や背景色 図中の色分けなど 色に依存した情報提供を行う場合には 色だけで情報の識別や指示をするのではなく 色がなくても意味が伝わるようテキストなどの情報を合わせて提供する 確認事項色だけに依存した表現が用いられていないか モノクロでの表示 ( もしくは印刷 ) 結果を確認する

39 形や位置だけで情報の識別や指示をしない 優先度 :1 達成基準 :1.3.3 適合レベル :A 区分 :A 情報の識別や指示は 形や位置だけに依存した表現を用いず テキストなどの情報を合わせて提供する 理由表組みなどで用いられる といった記号文字は 音声読み上げソフトでは 意図したとおりに読み上げられない場合がある また 左のボタン 右のボタン など 位置だけで指し示した表現を用いると 音声読み上げソフト利用者は画面上の位置が把握できず 操作することができない 対応方法図 2-3-8A では を記号文字で表記していることについて 表組より前に凡例を提供している 図 2-3-8B は 音声読上げソフト利用者にも情報を伝えられるよう 説明を付加している例 図 2-3-8C では 記号を画像にし その代替テキストに説明を加えている例である 図 2-3-8A 対応可否を記号で表記しています は対応 は非対応を示します 図 2-3-8B

40 図 2-3-8C 図 2-3-8D は位置だけで指し示した表現となっているため 図 2-3-8E のように 位置が把握できなくても操作できるような表現に変更している 図 2-3-8D 図 2-3-8E 確認事項形や位置だけに依存した表現が用いられていないか確認する

41 日付 時刻 通貨単位は 漢字表記を基本とする 優先度 :2 達成基準 : なし 適合レベル :- 区分 :A 日付や時刻を表す場合には : / - などではなく 月 日 時 などを用いる 曜日は ( 月 )( 火 ) などではなく ( 月曜日 )( 火曜日 ) などと記載する 理由 日付や時刻を表すのに 記号を用いると 音声読み上げソフトで正しく読み上げなかったり 文化 習慣の違いにより解釈が異なったりしてしまう 対応方法日付 :2012 年 9 月 10 日時刻 : 午前 10 時 25 分通貨 :1,580 円曜日 :( 月曜日 ) と表記する 確認事項日付 時刻 通貨単位に漢字を用いているか確認する

42 サイト内で使う言葉は 全ページで統一した言葉を用いる 優先度 :1 達成基準 :3.2.4 適合レベル :AA 区分 :U 主要なナビゲーションの名称や送りがななど 言葉の表記を統一する 理由 同じ内容を複数の言葉で表したり 同じ言葉の表記が統一されていなかったりすると 示 している内容が明確でなくなり 利用者が混乱する 対応方法 複数ページを見て 表記が統一されているか確認する

43 利用者からの問い合わせ方法を記述する 優先度 :2 達成基準 : なし 適合レベル :- 区分 :U ページには 情報発信者の連絡先を掲載する 理由利用者がページの内容について 不明な点があった際 問い合わせ先が明示されていないと どこに問い合わせていいのかわからず不満を覚える また 担当ではない部署に問い合わせが行くことによって 回答に時間がかかったり 本来の業務に支障をきたしたりすることになる 対応方法各ページには 以下の情報をもれなく記載する 情報発信日( 更新日 ) 情報発信部署( 課 ) 情報発信部署の所在地 情報発信部署の電話番号 FAX 番号 情報発信部署のメールアドレス( もしくは問い合わせフォーム ) 電話だけでは聴覚障害者の問い合わせに支障があるなど 障害や身体特性 経験等によって問い合わせをしやすい手段は利用者ごとに異なるので 必ず複数の手段を示しておく 確認事項上記がもれなく記されているか確認する

44 2-4. イメージ ( 画像等 ) に関する事項 画像 リンク画像には適切な代替テキストをつける 優先度 :1 達成基準 :1.1.1 適合レベル :A 区分 :A 達成基準 :2.4.4 適合レベル :A 区分 :A 画像及びリンク画像には 文脈においてどのような意味 役割を持っているかを表現する適切な代替テキストをつける 理由ページ上に画像が掲載されている場合 画像だけでは何を伝えているかわからないので 代替テキストを記述することでその意味を補うことが必要となる 対応方法 画像(img 要素 ) に対して alt 属性を設定する 何が書かれている画像なのかではなく 文脈上どのような意味を持つかが重要 意味を持たない画像の場合には alt 属性値を空 (alt="") とする 画像に文字が含まれている場合は その文字を alt 属性に含める 複雑な内容の画像には 簡潔な alt 属性を設定した上で 本文に詳しい説明を記載する リンク画像には リンク先が想像できる文言で alt 属性を設定する 図 2-4-1A 適切な alt 属性と 不適切な alt 属性の例 使用している画像は 雪だるま だが 雪だるまは文脈において 雪 という意味を持っているため alt= 雪 とするのが妥当 確認事項画像が表示されなかった場合に 代替テキストを読むことで意味が通じるかを確認する

45 画像化された文字はできる限り使わない 優先度 :1 達成基準 :1.4.5 適合レベル :AA 区分 :A 文字情報は必要不可欠な場合を除いては画像化せず テキストを用いて情報を提供する 理由画像を見ることができる人であっても 拡大や色の反転 行間の変更などを行うことで 読みやすさが向上する場合がある 文字が画像化されていると それらが正しく機能しなかったり 十分な効果が見込めない可能性が高い 対応方法文字はテキスト形式のままで掲載する ただし スタイルシートでは意図する視覚表現ができない 正しい字形を伝える必要があるなどの場合には画像化することができる 図 2-4-2A 長崎県 と書かれている画像 書体や装飾に特徴がないのであれば テキストで表現する 確認事項画像化されている文字が テキストで表現できるものでないか確認する

46 2-5. 表に関する事項 レイアウトのために表 (table 要素 ) を使用しない 優先度 :1 達成基準 :1.3.1 適合レベル :A 区分 :A 達成基準 :1.3.2 適合レベル :A 区分 :A レイアウトを整える目的で table 要素を使用しない 理由 table 要素は 表組の要素であり 本来はレイアウトを整える目的で用意されたものではない セルの大きさを変えたり 分割や結合を行なったりすることで レイアウトを整えることができるが 音声読み上げソフトの読み上げ順に乱れが生じ 情報が正しく伝わらない可能性がある 対応方法 table 要素は 表を作成するときにのみ使用し レイアウトを整える目的で使用しない やむを得ず table 要素をレイアウト目的で使用する場合には 読み上げ順序に問題が出ないよう 表の組み方を工夫する レイアウトを整えるのには スタイルシートを用いる 確認事項表以外の部分に table 要素を使用していないか確認する

47 表を使用する場合は単純な構造にし 読み上げ順に配慮する 優先度 :1 達成基準 :1.3.1 適合レベル :A 区分 :A 達成基準 :1.3.2 適合レベル :A 区分 :A 表を使用する場合は 単純な構造にし 読み上げ順に配慮する また 表には分かりやすい表題をつける 理由表は 図 2-5-2A のように 一行目を左から右 次の行に移り左から右といった順に処理される 音声読み上げソフトでも 同じ順序で読み上げられるため それを意識しないと 意図した順序で読み上げが行われないため 情報が伝わらなくなってしまう 図 2-5-2A 表の読み上げ順序を表現した図 1 から 9 の順に読み上げられる 対応方法 表以外の表現方法がないか検討する 表は単純な構造を保つ セルの結合や分割はできるだけしない 読み上げ順を考慮し 横方向( 行 ) のデータを意識する 内容を簡潔に表す表題をつける 確認事項表は単純な構造になっているか確認する

48 2-6. リンクに関する事項 リンクは相互の間隔を十分に取り 大きな面積を確保する 優先度 :2 達成基準 : なし適合レベル :- 区分 :U リンクとリンクは十分な間隔を確保し 一つのリンクエリアは十分な面積を確保する 理由 リンク同士が接近していると 複数のリンクが一つに見えてしまったり 意図しない方のリンクが反応してしまったりと 誤認 誤操作の原因となる 対応方法リンクとリンクの間には 十分な間隔を設けるか リンクではない文字 ( 記号を含む ) を間に置くなどして 誤動作を防ぐようにする また リンクエリアは スマートフォンなど小さな画面を指先で操作するなどの場合も考慮して 十分な面積を確保する 図 2-6-1A リンクの相互の間隔の例 リンクではない文字 ( ここでは ) を用いてリンクとリンクの間隔を一定程度確保している また カーソルがリンクエリアに入ると色が変わるなど 操作対象となるリンクを視覚的な変化で表現するなどの方法も合わせて採用する 確認事項リンクの相互の間隔が十分であることを確認する

49 リンクを設定する場合は リンク先が想像できる文言で表す 優先度 :1 達成基準 :2.4.4 適合レベル :A 区分 :U A リンクテキストを読むだけで リンク先の内容が想像できるよう リンクを設定する 理由 こちらへ 詳細 クリック のような リンク先を具体的に表現していないリンクでは 利用者はどこにリンクするかが事前にわからず 不安を覚える 対応方法リンクテキストが リンク先の内容を具体的に示すよう配慮する また 長崎県ウェブサイト以外へのリンクを設定する場合には 外部へのリンクであることを明示する 図 2-6-2A リンクテキストを こちら ではなく リンク先の内容で具体的に置き換えた例 この場合 リンク先が PDF なので ダウンロードデータは ファイルの種類とファイルサイズを明示する に従って PDF であることと そのファイルサイズを合わせて記載している 確認事項リンクテキストだけでリンク先の内容がわかるか確認する

50 リンクを開く際は 新しいウィンドウを開かない 優先度 :2 達成基準 :3.2.5 適合レベル :AAA 区分 :U A リンクを開く際は 同じウィンドウ内で遷移させる 理由新しいウィンドウが開かれることで それに気づかず 戻る が利かないと思ってしまったり 閲覧後にウィンドウを閉じる操作が煩雑になったり 複数のウィンドウの管理が難しかったりするなど 利用者の混乱を招いてしまうことがある 対応方法リンクは 同じウィンドウ内での遷移を原則とし 新しいウィンドウは開かないようにする 外部サイトである場合や 一連の手続きの途中で説明等のリンクを設ける場合など 新しいウィンドウを開くことに利点がある場合には リンクテキストに 新しいウィンドウで開きます という文言を含めるようにする 確認事項予告なく新しいウィンドウでリンクを開いていないか確認する

51 自動的にページを更新したり 別のページに移動したりしない 優先度 : 1 達成基準 :2.2.1 適合レベル :A 区分 :A 達成基準 :2.2.4 適合レベル :AAA 区分 :A 達成基準 :3.2.5 適合レベル :AAA 区分 :A 利用者の許可を得ることなく ページを自動的に書き換えたり 別のページに移動したりしない 理由ページを自動的に書き換えたり 別のページに自動的に移動したりすると 更新前の情報を見ることができなくなったり 読み終わらないうちに別の情報に移らなければいけなくなってしまったりするため 利用者がページの情報を理解する妨げとなる 対応方法ページの自動的な更新 自動的な移動は避ける 現在起きていることを伝えるページなど 自動更新をすることが有効な場合もあるが その場合でも 自動的に更新するか 利用者の任意のタイミングで手動で更新するかの選択を利用者ができるようにしておく 図 2-6-4A サイトの移転に伴う告知の例 数秒後に自動的に別のページに移動するのではなく 移転先を明示し 利用者の判断 動作に委ねる ページの有効期限が切れた場合などにおいても 自動的にトップページに移動するという処理はせず 利用者がどのような行動をとるべきか 引き続き情報を探すのにどのような選択肢があるかを示すにとどめる 確認事項ページを開き 内容が自動的に更新 もしくは 自動的に別ページに移動しないことを確認する

52 2-7. 管理に関する事項 複数の経路でページに到達できるようにする 優先度 :1 達成基準 :2.4.5 適合レベル :AA 区分 :U 各ページでサイト内検索とサイトマップへのリンクを提供する また カテゴリや 生活の場面 担当課など 一つの情報掲載ページに対して複数の経路を設ける 理由利用者によって その情報への到達経路のイメージが異なるため 経路が一つしかないと その経路をイメージできない利用者は情報にたどり着くことができない 対応方法特定の情報に対して どのようなジャンル 属性の情報であるかは人それぞれ異なっているため どのような観点からでも情報にたどり着く経路が失われないように 複数の経路を設けておく 図 2-7-1A 利用者が望む分類 イメージしやすい経路でたどりつけるよう 複数の経路を用意する 確認事項サイト内検索とサイトマップへのリンクが提供されていることを確認する 複数の経路で到達できることを確認する

53 新着情報は 適切に管理する 優先度 :2 達成基準 : なし 適合レベル :- 区分 :U 新着情報は 掲載時期 掲載期間 掲載件数等を適切に管理する 理由新着情報などの時系列の情報は 掲載件数が多いと見つけにくく 掲載情報が古いと情報やサイトに対する信頼が損なわれてしまう また 掲載期間が短すぎると 利用者の目に触れにくくなってしまう 対応方法新着情報の掲載ルールを以下のように定める 掲載件数: 原則 10 件以下 掲載期間: 一ヶ月未満 また 新規掲載と更新の別を示す 緊急性の有無によって表現を変える 文章表現を統一するなどの工夫をする 確認事項古い情報がないかを確認する

54 掲載期間の過ぎた情報は掲載しない 優先度 :2 達成基準 : なし 適合レベル :- 区分 :U 掲載期間の過ぎた情報ページ及び ページに付随する図表等は ファイルそのものをサーバから削除する 理由掲載期間の過ぎた情報が掲載されていると その情報を閲覧した人が現在有効な情報と誤認してしまい 誤った情報取得につながる恐れがある 対応方法公開期限を無期限とはせず 一定時期に期限を設ける 掲載開始時期と同様 掲載終了時期についてもチェックをする 毎年同時期に掲載される情報は 新旧を混同しやすいので特に注意する 確認事項掲載期間が終了した情報が掲載されていないか確認する

55 3. 操作性に関する事項 3-1. さまざまな使用方法に対応できるようにする マウスだけでなく キーボードですべての操作ができるようにする 優先度 :1 達成基準 :2.1.1 適合レベル :A 区分 :A 達成基準 :2.1.2 適合レベル :A 区分 :A マウスがなくても キーボードだけですべての機能が使え すべての情報が得られるようにする 理由視覚に障害がある方の場合には マウスカーソルの位置情報が得られないため マウスの使用が困難であり 上肢に障害がある場合にも マウス等を移動させての操作が困難である また 身体的機能に制約がなくても 外出時や上級者など マウスが接続されていない状態で PC を扱う場面は少なくない 対応方法キーボードのみによる操作 主に Tab キーでの項目移動や画面のスクロール Enter キーによる実行が動作するようにするとともに ドラッグ & ドロップなどマウス特有の操作を必要としないことも求められる 確認事項マウスを使わずとも キーボードだけですべての機能が使え 情報が得られるかを確認する

56 すべてのページに共通する部分を読み飛ばすことができるしくみを提供する 優先度 :1 達成基準 :2.4.1 適合レベル :A 区分 :A 共通操作部分など すべてのページに存在し ページを開くごとに読む必要がない内容を 読み飛ばすしくみを提供する 理由共通操作部分は すべてのページに設置されていて 音声読み上げソフトでは ページを開くたびに同じ内容を読まなくてはならず 効率的な閲覧の妨げになってしまう 対応方法共通操作部分を読み上げなくても済むよう そこを読み飛ばし 本文の先頭などへジャンプできる機能を提供する で定める 見出し等の適切な記述によって 見出しだけを拾い読みするなど効率的な閲覧をすることができるようになるため 双方の手段を確立することが望ましい 図 3-1-2A 読み飛ばすしくみを備えた例 本文へ が表示されているため 音声読み上げソフト利用者だけでなく キーボードのみで操作される方にも有用な機能となっている 確認事項共通部分を読み飛ばすしくみがあること また そのしくみが正しく動作することを確認する

57 3-2. フォーカスに関する事項 キーボードによるフォーカス移動は 視覚的な順序と一致させる優先度 :1 達成基準 :2.4.3 適合レベル :A 区分 :A キーボードによってフォーカス ( リンクの選択やフォームのフィールドが入力可能な状態になること ) を移動させる場合 その移動順序は 視覚的な順序と一致するように設定する 理由アンケートフォームなどで 項目をキーボードにより移動するとき 名前 回答内容 郵便番号 フリガナ 住所 年齢など 項目の移動順序に規則性がないと 次にフォーカスされる内容が想像できず利用者が混乱してしまう 対応方法配置とキーボードによるフォーカス移動順序が一致するよう適切な属性を記述する 図 3-2-1A 視覚的に お名前 ご住所 電話番号 の順で並んでいるのであれば キーボードでも同様の順序で項目移動ができるようにする 確認事項キーボードでフォーカスを移動させ それが視覚的な順序と一致するかを確認する

58 フォーカスされていることが視覚的に認知できるようにする 優先度 :1 達成基準 :2.4.7 適合レベル :AA 区分 :A フォーカスが当たっている部分は 色が反転する 枠で囲われるなど その状態が視覚的に認知できるようにする 理由フォーカスが当たっている場合に 視覚的な変化が得られないと 操作対象箇所がどこなのか判別できないため 操作に支障がある 対応方法フォーカスが当たっている部分は 以下のような方法で 視覚的に区別できるようにする 色が反転する 枠で囲われる カーソル等が表示 点滅する 図 3-2-2A フォーカスを視覚的に明示した例 確認事項キーボードによる操作を行い フォーカスが当たった部分に視覚的な変化があるか確認する

59 フォーカスが当たった時に 状況を変化させない 優先度 :1 達成基準 :3.2.1 適合レベル :A 区分 :A フォーカスが当たった時に 配置の変化や ページの移動のような状況の変化を引き起こ さないようにする 理由 フォーカスを受け取った時に 状況が変化すると 何が起きたのか理解できず 変化に対応できなくなってしまう 対応方法フォーカスを受け取った後 Enter キーなど別のボタンを押下することで初めて状況の変化を引き起こすようにする 確認事項フォーカスを移動させ 状況の変化を引き起こさないことを確認する

60 4. オブジェクトに関する事項 4-1. 特定の技術やプラグインに対応していないブラウザの配慮を行なう プラグインを使用しなくても 同等の情報が得られるよう配慮する 優先度 :2 達成基準 : なし適合レベル :- 区分 :A Flash や Java Silverlight など コンテンツの利用に特定のプラグインが必要となる情報を掲載する際には そのソフトを利用することができなくても 同等の機能 情報を得られるようにする 理由特定のプラグインによる情報は そのプラグインを導入していないと情報を得ることができない また 特定の閲覧環境に対応していないケースもあり その場合にも 閲覧ができなくなってしまう 対応方法特定のプラグインが必要となる情報は 同等の情報を HTML でも提供する 確認事項プラグインをオフまたは 未導入の環境で 情報が得られるか確認する

61 プラグインの入手先を明示し 操作方法のをする 優先度 :2 達成基準 : なし 適合レベル :- 区分 :U A プラグインの入手に必要な情報を明示する 理由 特定のプラグインによる情報は そのプラグインを入手できなければ閲覧することができない 対応方法プラグインの入手先を明示する また 導入方法の説明ページを設ける 図 4-1-2A PDF 閲覧用ソフトのダウンロードを促す記述例 確認事項サイトの案内を頼りにプラグインの最新版を入手できるか確認する

62 JavaScript によるページの移動を行なわない 優先度 :2 達成基準 : なし 適合レベル :- 区分 :A 利用者が直前に開いていたページへ 戻る ためのリンクを JavaScript を用いて設置し ない 理由利用者が直前に開いていたページに 戻る ためのリンクは JavaScript が用いられるため JavaScript が無効な環境では機能しない また 戻る 先が利用者ごと 閲覧機会ごとに変わり 一定の動作をするものではないので 混乱が生じてしまう 対応方法 JavaScript を利用した 戻る ボタンは設置しない 確認事項 JavaScript によるリンクが設置されていないか確認する

63 5. ダウンロードデータに関する事項 5-1. ダウンロードデータの提供は その必要性について考慮する ダウンロードデータのみによる情報提供は行なわない 優先度 :2 達成基準 : なし適合レベル :- 区分 :U A 情報提供方法の基本は HTML ページの閲覧によって行い ダウンロードデータは 詳細なデータ提供 補足説明 様式 印刷用などのサービス提供用とし ダウンロードデータのみでの情報提供は行なわない 理由 特定のプラグインによる情報は そのプラグインを入手できなければ閲覧することができ ない 対応方法 HTML による通常のページを作成し その上で 添付ファイルによる情報提供を行なう 確認事項 ダウンロードデータ以外にも HTML で情報が提供されているか確認する

64 ダウンロードデータは ファイルの種類とファイルサイズを明示する 優先度 :2 達成基準 :2.4.4 適合レベル :A 区分 :A 達成基準 :2.4.9 適合レベル :AAA 区分 :U ダウンロードデータを提供する際には ファイル形式とファイルサイズを明示する 理由 利用者の環境で利用可能なデータであるか判断でき また ダウンロードに要する時間を事前に推測できることで 閲覧するかどうかを決めることができる 対応方法ダウンロードデータへのリンク部分に ファイル形式とファイルサイズを明示する 図 5-1-2A に示されるように こちら を具体的な言葉に置き換えた上で ファイル形式とファイルサイズを明記している例 確認事項ダウンロードデータへのリンク部分に ファイル形式とファイルサイズが記されているか確認する

65 5-2.PDF ファイルに関する事項 PDF で情報提供する場合は HTML でも提供する優先度 :2 達成基準 : なし 適合レベル :- 区分 :U A PDF ファイルで情報提供する場合は 読み上げ可能なテキストが含まれ 読み上げ順序に 問題のないアクセシブルな PDF ファイルを提供する 理由 アクセシビリティに配慮された PDF ファイルでない場合 音声読み上げソフトで情報の取 得ができない 対応方法 紙の文書をスキャナーなどで画像として読み込み PDF に変換して提供しない アドビシステムズが推奨する方法で アクセシブルな PDF を生成する 確認事項 生成された PDF がアクセシブルなものか確認する 注意事項アクセシブルである PDF 文書の条件 1. 文書の読み上げ順序が適切である 2. 画像などの視覚情報に対して テキストによる代替情報が提供されている 1. については タグ付き PDF を作成する必要があるが 作成手順が煩雑で 作業も大変 2. については Microsoft Office や Adobe Acrobat を用いて 画像等に代替テキストを付与する必要があるが 日本語の代替情報が文字化けする場合があるなどの不具合がある 現状では PDF 文書をアクセシブルにするには限界がある アクセシビリティの観点から言うと HTML による情報提供がベストであり PDF はセカンドベストになる このため PDF 文書で情報提供を行う場合には これは HTML では提供できないか ということを事前に十分検討する必要がある

66 ファイルサイズの大きな PDF ファイルは 分割して掲載する 優先度 :2 達成基準 : なし 適合レベル :- 区分 :U A ファイルサイズの大きな PDF ファイルは 複数に分割して掲載する 理由大きいファイルをダウンロードするのは 回線に負荷がかかり ダウンロードに要する時間も長くかかってしまう また 資料の一部が欲しい場合にも全てをダウンロードしなければならず 効率的でない 対応方法 3MB 程度を目安にファイルを分割する 図 5-2-2A 一定のファイルサイズ以下となるよう ページごとに別の PDF ファイルとして準備されている 確認事項 3MB 以上の PDF ファイルを掲載していないか確認する

67 6. 時間変化に関する事項 6-1. 時間変化を伴う表現は 使用方法に注意する 変化する画像 移動及び点滅するテキストは極力使用しない 優先度 :1 達成基準 :2.2.2 適合レベル :A 区分 :A 達成基準 :2.3.1 適合レベル :A 区分 :A 映像素材以外は 写真を変化させたり 移動点滅するテキストを極力使用しない 点滅を必要とする場合は 1 秒間に 3 回以下とする また 点滅を停止させる機能を設ける 理由点滅 移動する情報は 利用者によっては認識できないことがある 点滅 移動の多用は 利用者のコンテンツへの集中力を奪うことになり 早い点滅は 発作の原因にもなる 対応方法点滅や移動する情報は使わない 点滅を利用する場合は 1 秒間に 3 回以下とする 一定時間が経過したら停止させる 移動を利用する場合は 速度を緩やかにし 一定時間が経過したら停止させる 確認事項文字の点滅やスクロールは使用していないか確認する 点滅は 1 秒間に 3 回を超えて行われていないか確認する 点滅や移動は 一定時間経過後 停止しているか確認する

68 7. 入力フォームに関する事項 7-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 要素で明確にする 確認事項フォームの前に分かりやすいラベルがついているか確認する ラベルとフォームが関連付けられているか確認する

69 フォームの入力や選択の操作で 状況を変化させない 優先度 :1 達成基準 :3.2.2 適合レベル :A 区分 :A 項目の選択とページの移動にはそれぞれ別のボタンを設けるなど 利用者の操作によって 及ぼす影響や結果が予測できるように配慮する 理由 操作を間違えて選択しただけでページが遷移してしまうと 利用者が意図していない状態 で変化が起こることとなり 困惑してしまう 対応方法 選択メニュー と 決定 送信 ボタンなどのプログラムは 操作を分けるようにする 確認事項 項目を選択しただけで 状況の変化を引き起こしていないか確認する

70 入力すべき内容と入力方法を説明する 優先度 :1 達成基準 :3.3.2 適合レベル :A 区分 :A 入力欄には 分かりやすい項目名や入力条件 記入例を記載するなどして 入力しやすい ように配慮する 理由情報の入力は 利用者の個人情報である場合もあり 入力に慎重になるため 入力方法を分かりやすく説明するなどして 入力しやすい状態を保つ 入力項目名は簡潔で分かりやすく 入力条件も記載することで 音声読み上げソフトの利用者なども 利用しやすくなる 対応方法分かりやすい入力項目名をつける 半角数字など入力条件がある場合は記載する 記入例を記載する 入力方法の説明や記入例は 入力場所より前にして 見やすくする 確認事項分かりやすい入力項目名と入力条件が記載されているか確認する 記入例は設けられているか確認する

71 入力エラー箇所を知らせ 修正を知らせる配慮をする 優先度 :1 達成基準 :3.3.1 適合レベル :A 区分 :U 達成基準 :3.3.3 適合レベル :AA 区分 :U 利用者の入力にエラーがあった場合には その場所を特定して 修正方法を周知する仕組みを導入する 理由入力ミス 操作ミスは誰にでもあることであり 入力エラーを知らせず そのまま送信してしまうと 送り手は再度はじめから入力をしなければならなかったり 間違いに気づかず入力内容を送信してしまう可能性があり 不十分なデータを送ってしまうことになる また 受け手も 入力途中の不十分なデータを受け取ることになり 有効なコミュニケーションにならない 図 7-1-4A 入力が不十分な内容をテキストで知らせるとともに 入力欄に視覚的な変化をつけることで不十分な箇所をわかりやすく示している 対応方法入力エラーの項目の特定と その修正方法について周知する仕組みを導入する ( セキュリティ上問題がある場合は除く ) 確認事項入力エラーを知らせてくれるか確認する 修正方法は周知されているか確認する

72 入力した内容を確認できるようにする 優先度 :1 達成基準 :3.3.4 適合レベル :AA 区分 :U 入力した内容を送信 ( 登録 ) する前に 入力内容を確認するためのページを設ける 理由 利用者によっては 間違って登録してしまう場合がある 対応方法 入力内容確認画面を準備する 図 7-1-5A 入力フォームの画面遷移例 正しい内容が送信されるよう また 誤操作から の復帰が可能なように エラーの修正 入力内容の確認画面を設けるのが一般的 確認事項 入力内容を確認する画面が表示されるか確認する

73 入力した内容を継承できるようにする 優先度 :2 達成基準 : なし 適合レベル :- 区分 :U ブラウザやページ上に設定された 戻る ボタンを押し 前のページに戻る場合 利用者が入力した内容については 上書き修正ができるようにする 理由入力数が多くなると 利用しにくくなる 対応方法戻るボタンを利用した場合 入力したデータを継続して表示できるようにする 確認事項ブラウザの戻るボタンで戻った場合 入力した内容はクリアになっていないか確認する

74 入力項目は少なくする 優先度 :2 達成基準 : なし 適合レベル :- 区分 :U 求める入力項目は 必要最小限にする 理由 入力項目が多いと 利用しづらくなる また 個人情報を扱うため 厳しい管理が必要となる 対応方法 求める入力項目は 必要なもののみとする 入力項目の中でも必要最低限の項目については ( 必須 ) など表示し 利用者に知らせる 参考 : 個人情報の保護について ( 確認事項不必要な情報を収集していないか確認する

75 制限時間は設けない 優先度 :1 達成基準 :2.2.1 適合レベル :A 区分 :U 達成基準 :2.2.5 適合レベル :AAA 区分 :U セキュリティ上必要な場合を除き 入力に制限時間を設けない 理由 利用者の環境によっては 入力に時間がかかる場合がある 対応方法入力フォームには制限時間を設けない 会員専用など セキュリティ上制限時間を設けている場合は 再ログインの際 前回の入力内容が継承されるように配慮する 確認事項入力フォームに制限時間を設けていないか確認する

76 8. 音声や映像に関する事項 8-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 音声 ( 映像と同期した音声を含む ) で情報を提供する場合には その内容をテキストや 手話版などで提供する 理由 耳が不自由な方は 音声だけで情報を提供されても理解することができない 対応方法音声で提供する情報は テキストでも提供する 音声で提供する情報は 手話版でも提供するなど 利用者に配慮する 例 ) 手話 字幕版の映像制作 記者会見のテキスト版など 確認事項 音声に関する情報は テキストでも提供されているか確認する

77 映像で情報を提供する場合には 音声またはテキストで代替する 優先度 :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 動画やアニメーションを提供する場合 内容を説明する音声やテキスト情報も提供する 理由 目の不自由な人など 動画では情報を得ることができない場合がある 対応方法 状況を説明する音声テキストやテキストなどの代替情報を提供する 映像による紹介と同じ内容の情報ページを制作する 確認事項 映像に関する情報は テキストデータや音声でも提供されているか確認する

78 8-2. 音声や映像で情報を提供する場合 コントロールできるようにする 音や映像は自動的に再生しない 優先度 :1 達成基準 :1.4.2 適合レベル :A 区分 :A 達成基準 :2.2.2 適合レベル :A 区分 :U 音や映像は 利用者の意に反して再生されないようにする 理由 ページを表示するだけで再生されると 再生していることに気がつかず 急に大音量で流れ出すなど 困惑する場合がある 対応方法音や映像は ページを開いただけで 自動的に再生させない 自動的に再生させる場合は 利用者に再生する旨を周知し 時間を置いて再生させる 確認事項ページを開いただけで 再生されないか確認する 自動的に再生される場合は 利用者に再生することを周知したうえで 時間をおいて再生しているか確認する

79 音や映像の再生は 利用者がコントロールできるようにする 優先度 :1 達成基準 :1.4.2 適合レベル :A 区分 :A 達成基準 :2.2.2 適合レベル :A 区分 :A 音や映像の再生 一時停止やボリューム調整は 利用者が調整できる仕組みを提供する 理由利用者の利用する環境はさまざまであるため 利用者の意思に基づいて操作できなければ 不意な動作を起こした場合 ページを消すしか方法がなく 今後利用されなくなる場合がある 対応方法音や映像の再生 一時停止やボリューム調整は 利用者が調整できる仕組みを提供する 確認事項再生 一時停止 停止 音量調整のコントロールができるか確認する