Microsoft Word - 【下関市】アクセシビリティガイドライン正式版_15041

(1)

しものせき

ウェブアクセシビリティガイドライン

平成 27 年 4 月

広報広聴課

(2)

-目次-１. はじめに ... 1 １‐１目的 ... 1 １‐２本ガイドラインの適用範囲... 1 １‐３根拠となる規格 ... 2 １‐４検証について ... 2 １‐５ガイドラインの見直し... 2 ２. 全般 ... 3 ２‐１機種依存文字など ... 3 ２‐２数字 ... 4 ２‐３ HTML 以外の情報 ... 4 (１) PDF ... 4 (２) 音声、動画、プログラムやアプリケーションソフトなどを使った情報... 5 ３. 文書構造・表示スタイル ... 6 ３‐１文書構造... 6 ３‐２表 ... 6 ３‐３ページタイトル... 8 ３‐４現在位置の情報 ... 9 ３‐５ナビゲーション（追加）...10 ４. 操作 ...11 ４‐１新しいウィンドウ、自動更新 ...11 ４‐２リンク ...12 ４‐３補助操作（追加） ...13 (１) キーボード操作 ...13 (２) フォーカス移動...14 (３) フォーカス順序...15 (４) フォーカス認知...16 ５. テキスト以外の情報（画像・音声・動画など） ...17 ５‐１画像・リンク画像...17 (１) 画像 ...17 (２) リンク画像...19 ５‐２音声情報...19 ５‐３動画・アニメーション ...20

(3)

ii

５‐４時間の経過に伴って変化するメディア（追加） ...21 (１) 代替コンテンツ・音声ガイド...21 (２) キャプション...22 (３) 音声制御...23 ６. 色・形...24 ６‐１色での区別 ...24 ６‐２形・位置 ...26 ６‐３画像内の文字...26 ７. 文字 ...27 ７‐１文字のサイズ...27 ７‐２文字の書体...28 ７‐３文字の色...28 ８. 変化や点滅のある表示...29 ８‐１変化や移動（追加） ...29 ８‐２点滅（追加修正） ...29 ８‐３制限時間（追加） ...31 ９. 言語 ...32 ９‐１言語の明示（追加） ...32 ９‐２省略語、専門用語など ...32 ９‐３読みの難しい言葉...33 ９‐４単語内の空白...33 ９‐５記号や省略表記 ...34 １０. 入力フォーム（追加）...35 １０‐１入力エラー ...35 １０‐２ラベル・説明文 ...36 １１. その他（追加）...37 １１‐１一貫した識別性 ...37 １１‐２ブロック・スキップ...37 １１‐３複数の到達手段...38 １１‐４オンフォーカス ...38 １１‐５ユーザインタフェースコンポーネントによる状況の変化...39 １１‐６互換性 ...40

(4)

１.はじめに

１. はじめに

本市では、平成１７年２月に「しものせきウェブデザインガイドライン」及び「しものせきウェブデザイン作成基準」を施行し、これまでホームページやインターネットサービスなどのウェブ機能を利用して行う広報や情報の提供を行う職員が、アクセシビリティに配慮することで、市民をはじめ、誰もが利用可能で、より使いやすいものにするよう努めてきました。しかしながら、ウェブアクセシビリティを取り巻く様々な状況の変化に対応するため、国際基準ウェブサイトガイドラインの WCAG 2.0(※)との整合性などをふまえて、ＪＩＳ規格（JIS X 8341-3）が 2010 年 8 月 20 日に改正されました。この改正を受け、これまでの「しものせきウェブデザインガイドライン」及び「しものせきウェブデザイン作成基準」の内容を見直し、この度、「しものせきウェブアクセシビリティガイドライン」として、施行することとなりました。 ※ W3C（Web サイトの言語や標準規格を決めている非営利団体）が定める、ウェブコンテンツのアクアセシビリティについてのガイドライン（参考 URL） http://waic.jp/docs/WCAG-TECHS/Overview.html １‐１

目的

しものせきウェブアクセシビリティガイドライン（以下、「本ガイドライン」という。）は、日本工業規格（JIS X 8341-3）を踏まえ、ホームページやインターネットサービスなどのウェブ機能を利用して行う広報や情報の提供（以下、「ウェブメディア」という。）を行う職員が、アクセシビリティに配慮することで、障害者や高齢者など、誰もが利用可能で、より使いやすいものにするための基本方針及び具体的な実施手順を示したものです。１‐２

本ガイドラインの適用範囲

本ガイドラインは、下関市公式ホームページ（i-CityPortal 作成分）を対象とします。また、その他の下関市が開設しているサイトや下関市が関連する各種団体が開設しているサイトについても、広く適用されることを望みます。そのため、ウェブメディアを外部発注する場合は、本ガイドラインを発注しようとするウェブメディアの特性と照らし合わせ、可能な限り全ての項目を仕様として提示する必要があります。

(5)

１.はじめに

2

根拠となる規格

JIS X 8341-3（高齢者・障がい者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－第三部：ウェブコンテンツ）は、ウェブサイトの制作・運用におけるウェブアクセシビリティ対応についての基準を定めたもので、改正後の JIS X 8341-3 では、改正前のものと比べて、達成基準を満たすだけでなく「ウェブ運営の方針」や「試験結果を開示」を行う等の対応が求められています。なお、本ガイドラインの各タイトルの右に、対応する JIS X 8341-3 の項番を記載しています。１‐４

検証について

ウェブアクセシビリティ対応状況について、本ガイドラインやチェックツール等を使用して、作成・更新時に検証します。また、必要に応じて、目の不自由な人、手や指の不自由な人、高齢の人などに実際に閲覧・操作していただき、問題点を伺い、ウェブアクセシビリティの向上のための参考とします。１‐５

ガイドラインの見直し

利用者の閲覧環境の変化、ウェブメディアの制作技術の変化に対応するため、本ガイドラインを定期的に見直します。

(6)

２.全般

２. 全般

２‐１

機種依存文字など

【ルール】機種依存文字や外字、半角カナは使用しない。【解説・目的】丸付き数字やローマ数字などの機種依存文字（JIS 規格で定義されていない文字）や「髙」「﨑」などの外字を使用すると、利用者の使用環境によっては表示がされず、異なった表示結果となる場合があります。機種依存文字や外字は使用せず、別の文字に置き換えて表記してください。半角カナについても、文字化けなどを起こすことがあるため、カタカナ表記は全角で表記してください。機種依存文字【具体例１】 ○良い例機種依存文字や外字、半角カナではない文字で表記する。【具体例２】 ○良い例機種依存文字や外字ではない文字で代替表記し、別途テキストで補足説明する。高橋花子様（「高」は、はしごだか）名前など正しい表記が求められる場合は、機種依存文字ではない文字で表記し、別途補足説明を追加します。 ○○○（株）機種依存文字である「㈱」と表記せず、「（株）」と表記しましょう。

(7)

２.全般

4

数字

【ルール】数値や位取りのカンマを使用する場合は、半角を用いる。【解説・目的】全角数字や、全角のカンマを用いると、音声読み上げソフトに誤って解釈されてしまい、正確な数値を理解することが困難となります。【具体例】  「￥５，０００」（全角数字と全角記号）は、「5,000 円」（半角数字と日本語表現）とする。  「１０００」（全角数字）ではなく「1,000」（半角数字）  「１．１１」（全角数字と全角小数点）ではなく、「1.11」（半角数字と半角小数点）とする。２‐３

HTML 以外の情報

(１) PDF 【ルール】 PDF で作成したコンテンツを掲載する際は、PDF ファイルであることを表記し、アクセシビリティに配慮した形式で制作し公開すると同時に、掲載の際にはファイルの情報内容を説明するテキストなどを提供する。また、ファイルサイズの大きな PDF を掲載する場合は、ファイルサイズを表示するとともに、分割したファイルも併せて掲載する。【解説・目的】画面や紙をスキャンしただけの PDF の場合、利用者が内容を読み取れなかったり、テキスト検索ができたりしません。できるだけ、Word などの文書ファイルから PDF を生成し、ページ内の文章を読み上げできる形で対応してください。なお、スキャンした PDF を掲載する場合は、代替情報としてテキストで同等の内容を提供しましょう。ファイルサイズの大きな PDF は、利用者の環境によってはダウンロードに時間がかかってしまうため、ファイルサイズを表示したり、分割したりすることによって利用者の負荷を軽減することができます。 ※ ダウンロードファイルは、1 ファイルあたり 10MB を超えないようにしてください。達成基準 7.1.1.1 [非テキストコンテンツ]

(8)

２.全般 (２) 音声、動画、プログラムやアプリケーションソフトなどを使った情報【ルール】特定のアプリケーションでしか開けない情報（WORD・EXCEL ファイルなどでの情報提供を含む）や、プログラム（Script、Applet など）で作成した情報を提供する場合は、内容を説明するテキストや同等の操作を可能にする代わりの手段を提供する。さらに、それぞれのアプリケーションやプログラムに固有のアクセシビリティ機能がある場合、それを利用して、できるだけ配慮ある設計にする。【解説・目的】 HTML 以外のプログラムや音声・動画、特定のアプリケーションでしか開けない情報は、内容を読み取ったり操作できない利用者がいる可能性があるため、使用を検討し、本当に必要な場合のみ使用しましょう。

(9)

３.文書構造・表示スタイル

6

３. 文書構造・表示スタイル

３‐１

文書構造

【ルール】 HTML で見出し、段落、リストなどの要素を用いて、ページ内の内容の構造を示す。【解説・目的】見出しや段落、箇条書きなどの文書構造を適切な形で指定すると、障がいのある人を含めた様々な人にとって利用のしやすさ、わかりやすさが向上します。文字を太字や斜体にして装飾する際も同様です。３‐２

表

【ルール１】表組みを利用したレイアウト（段組みなど）は、できるだけ作成しないようにする。やむをえず用いる場合は、音声読み上げソフトでの読み上げ順への配慮を行う。【解説・目的】 HTML の表組みで提供される情報は、本来の順序と違う順序で読み上げられてしまうと、特に音声読み上げソフトなどの利用者にとって、内容の把握が困難になってしまいます。表組みをレイアウト目的で用いる場合は、読み上げ順序を考慮のうえ、適切に配置してください。【具体例】音声読み上げソフトでの表の読み上げ順序単純な表の場合 ※ 一般的な音声読み上げソフトは、表の左上から右下に 1 セルずつ読み上げる。達成基準 7.2.4.6 [見出し及びラベル] 達成基準 7.1.3.1 [情報及び関係性] 達成基準 7.1.3.1 [情報及び関係性] １２３４５６７８

(10)

３.文書構造・表示スタイル複雑な表の場合 ※ 複雑な表では読み上げ方も複雑になり、意図どおりに読み上げられない可能性があるので、セルの結合・分割などを多用した表は、極力作成しないようにしましょう。【ルール２】表組みで情報を表現する場合、表の見出しや表題を設定する。【解説・目的】「商品一覧」や「会員名簿」など一貫した情報を表組みで提供する場合は、表にはわかりやすい表題をつけたり、見出しを設定したりするなど、データとの関係を明確にしなくてはなりません。なお、表組みが複雑になる場合は、表組みの代わりにリストを使用することも検討してください。【具体例１】 ×悪い例表題と見出しがないため、内容の把握が困難。納品先商品名単価山田小学校えんぴつ 30 円川村小学校消しゴム 50 円 ○良い例表題と見出しを設定してわかり易い情報を提供する。納品先商品名単価山田小学校えんぴつ 30 円川村小学校消しゴム 50 円１２３４６８５９７１０１１読み上げ例：「山田小学校えんぴつ 30円」例えば2行目を読み上げると、「30円」がどのような価格を指し示すのか正しく伝わりません。読み上げ例：「納品先山田小学校商品名えんぴつ単価 30円」学校別商品単価表見出しを設定することでセル内の内容が学校別の商品単価表であり、「30円」は山田小学校へ納品する「えんぴつ」の単価だということが分かります。表題見出し

(11)

8

ページタイトル

【ルール】全てのページに、ページ内容のわかるタイトルを付ける。【解説・目的】ページタイトルによってページの内容が把握できないと、わかりにくさや混乱の原因になるため、全てのページで内容がわかるようなページタイトルを付けましょう。また、同じタイトルを持ったページが複数あると利用者の混乱を招くため、すべてのページで内容に沿って異なったタイトルを付けましょう。【具体例】 ×悪い例すべてのページに同じタイトルが付いている ○良い例ページごとに固有のタイトルが付いている達成基準 7.2.4.2 [ページタイトル] 音声読み上げソフトの利用者にとって、ページタイトルはページの内容を判断する最初の手がかりになります。それぞれのページの内容を判別できるように、ページタイトルにはページの内容を要約した個別のタイトルを付けましょう。ページタイトルが同じだと、音声読み上げソフトの利用者は、今どのページを開いているか、分からなくなることがあります。タイトルで内容が分からない場合は、本文まで読んで内容を理解するため、時間がかかってしまいます。

(12)

３.文書構造・表示スタイル３‐４

現在位置の情報

【ルール】現在位置を示す情報（例：パンくずリストなど）やリンクを各ページに表示する。【解説・目的】パンくずリストをページ上部に配置することで、表示されているページがサイト内のどの位置にあるかをわかりやすく伝えることができ、多くの人が混乱することなくサイトを利用することができます。【具体例】パンくずリストとは達成基準 7.2.4.8 [現在位置] ウェブサイトで、閲覧者が現在サイト上のどの位置にいるかを階層表示するリスト。一般的にのような形で表示される。【補足】「パンくずリスト」という名称は、童話「ヘンゼルとグレーテル」に由来している。ホーム > 下関市の紹介 > ○○○○○○

(13)

10

ナビゲーション（追加）

【ルール】ウェブページ一式の中にある複数のウェブページ上で繰り返されているナビゲーションのメカニズムは、繰り返されるたびに相対的に同じ順序で提供しなければならない。ただし、利用者がそれを変更した場合は除く。【解説・目的】「複数のウェブページ上で繰り返されているナビゲーションのメカニズム」とは、次のようなものが挙げられます。・ナビゲーションバー・サイト内検索・ヘッダーにある「サイトマップ」や「お問合せ」などのリンク・ローカルナビゲーション（サブメニュー）このような「ナビゲーションのメカニズム」は、どのウェブページでも必ず「相対的に同じ順序」でユーザーに提示する必要があります。これらが、どのページでも必ず「相対的に同じ順序」でユーザーに提示されていれば、ページによって、異なるコンテンツが挿入されていたり、あるメカニズムが存在しない場合も、達成基準を満たすことができます。例えば、サイト内検索の機能が、ページによってナビゲーションバーの前や後にあったりすると、サイト内検索の機能が「相対的に同じ順序」で表示されていないので、達成基準を満たすことができなくなります。達成基準 7.3.2.3 [一貫したナビゲーション]

(14)

４.操作

４. 操作

４‐１

新しいウィンドウ、自動更新

【ルール】新しいウィンドウを開いてページを表示することはしない。やむをえず新しいウィンドウを開く際は、そのケースと告知方法についてルールを定める。また、自動で新しいページへ移動したり、内容を更新したりしない。【解説・目的】リンク先のページを新しいウィンドウに表示すると、全盲の利用者や高齢者は、自分がどのウィンドウを閲覧しているのかわからなくなったり、上手に利用できない人が出てしまうため、やむをえず新しいウィンドウを表示する場合は、必ず告知しましょう。なお、やむをえず新しいページへ移動したり、内容を更新したりする場合は、あらかじめそのことを告知しておきましょう。【具体例】 ○良い例あらかじめ、新しいウィンドウで開くことを案内している【補足】やむを得ず新しいウィンドウを開いても良いケース  外部サイト（ページ）へ移動する場合  ヘルプ画面など、同時に複数の画面を参照させたい場合 ○○○○○○○○○。

市からのお知らせ

新しくウィンドウを開いたほうが、内容を参照しやすい場合は、あらかじめリンク元で新しいウィンドウが開くことを明示しておきましょう。例えば、「広報広聴課からのお知らせ（新しいウィンドウで表示）」などと表記します。

下関市からのお知らせ

お知らせ・催し・講座主な広報活動市民だより広報広聴課からのお知らせ（新しいウィンドウで表示）

(15)

４.操作

12

リンク

【ルール】リンクテキストやリンク画像は識別しやすく、リンク先の内容が明確にわかるような表記にする。【解説・目的】リンクの貼られている部分の文章（リンクテキスト）やリンク画像の内容や形状がわかりにくいと、多くの利用者が混乱してしまいます。リンク部分はリンクであることがわかりやすいよう、本文と違う色や形状（下線を付けるなど）にし、リンク先の内容を明示するようにしましょう。「ここ」「こちら」「クリック！」「click here!」など、リンク先の内容を推測できない表現は、極力リンクテキストとして使用しないようにしてください。【具体例】 ×悪い例「ここ」「こちら」「クリック」など、リンク先の識別ができない部分だけをリンクとしている ○良い例文脈が伝わる内容までを含めてリンクとする達成基準 7.2.4.4 [文脈におけるリンクの目的]

(16)

４.操作４‐３

補助操作（追加）

(１) キーボード操作【ルール】コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能でなければならない。ただし、その根本的な機能が利用者の動作による始点から終点まで続く一連の軌跡に依存して実現されている場合は除く。【解説・目的】コンテンツの全ての機能は、マウスだけではなく、キーボードだけでも同じように操作できるようにしなければなりません。マウスなどを使用することができず、キーボードだけで操作しているユーザーのために、キーボードだけで同じようにその機能を操作できるようにする必要があります。HTML のリンクやフォーム・コントロールについては、標準のものを使用していれば特に何もしなくても、キーボードだけでも操作することが可能です。なお、本達成基準は、キーボードだけでも操作できるようにすることを求めているだけで、マウスやその他の手段で操作できることを禁じているわけではありません。【具体例】イベント・ハンドラを使用する場合、マウス向けとキーボード向けの両方を併用するようにします。マウス向けキーボード向け mousedown keydown mouseup keyup click （keypress） ※リンクやボタンで使用する際、併用の必要無し。 mouseover focus mouseout blur 達成基準 7.2.1.1 [キーボード操作]

(17)

４.操作

14

Copyright © 2015 Shimonoseki city. ALL Rights Reserved. (２) フォーカス移動【ルール】キーボードインタフェースを用いてキーボードフォーカスをそのウェブページのあるコンポーネントに移動できる場合、キーボードインタフェースだけを用いてそのコンポーネントからフォーカスを外すことが可能でなければならない。さらに、その操作が修飾キーを伴わない矢印キー、修飾キーを伴わない Tab キー又はフォーカスを外すその他の標準的な方法で可能な場合を除き、キーボードフォーカスをそのコンポーネントから外す方法を利用者に知らせなければならない。【解説・目的】ユーザーがキーボード操作でフォーカス移動している際、コンテンツの一部分に閉じ込められないようにします。 HTML では、プラグインやアプリケーションを埋め込んだ際に、その部分にキーボードフォーカスが閉じ込められてしまうことがあります。フォーカス移動のキー操作（主に Tab キー）以外の方法で抜け出すことが可能であれば、その操作方法を明記する必要があります。また、リンクやボタンをクリックするなどの操作で、ダイアログボックスを表示する場合、ダイアログボックスが開くとフォーカスがそのダイアログボックスから外へ抜け出せなくなることがあります。その場合は、ユーザーが［OK］、［キャンセル］または［閉じる］ボタンを押せば、ダイアログボックスが閉じられて、フォーカスが元の位置に戻るようにします。達成基準 7.2.1.2 [フォーカス移動]

(18)

４.操作 (３) フォーカス順序【ルール】ウェブページが順番にナビゲートできて、そのナビゲーション順序が意味又は操作性に影響を及ぼす場合、フォーカス可能なコンポーネントは意味及び操作性を保持した順序でフォーカスを受け取らなければならない。【解説・目的】ユーザーがキーボード操作でフォーカス移動する際には、コンテンツの意味や操作性に沿った順序でキーボードフォーカスを受け取らなければなりません。この達成基準を満たす方法は、見た目の並び順とキーボード操作時の移動順序を一致させることです。画面を見てキーボード操作しているユーザーは、見た目の並び順と異なる順序でフォーカス移動していくと困惑してしまう恐れがあります。ただし、フォーカス移動順序が見た目の並び順と異なっていても、それにより、コンテンツの意味が変わったり、操作に問題が生じたりしない限り、本達成基準を満たすことができます。また、リンクやボタンをクリックするなどの操作で、ダイアログボックスを表示する場合、ダイアログボックスが開くとフォーカスはそのダイアログボックスへ移動し、フォーカスを受け取ることのできるリンクやフォーム・コントロールに順に移動するようにします。ユーザーが、［OK］、［キャンセル］または［閉じる］ボタンなどを押せば、ダイアログボックスが閉じられて、フォーカスが元のトリガーとなったリンクやボタンの位置に戻るようにします。【具体例】 ×悪い例操作性に問題のあるフォーカス順序見た目の並び順と同様にフォーカス移動するが、検索範囲を変更するには、［検索］ボタンを通り過ぎた後、逆順で［検索］ボタンに戻る必要がある。また、音声読み上げソフトを使用している場合、検索範囲指定のラジオボタンがあることに気づかない可能性がある。 ○良い例操作性を保持したフォーカス順序フォーカス移動順序は、見た目の並び順と異なるが、キーワードを入力した後の操作性を考慮し、検索を実行する前に検索範囲を指定できるようにしている。音声読み上げソフトを使用している場合も問題ない。達成基準 7.2.1.2 [フォーカス順序]

(19)

４.操作

16

Copyright © 2015 Shimonoseki city. ALL Rights Reserved. (４) フォーカス認知【ルール】キーボード操作が可能なユーザインタフェースには、キーボードフォーカスの状態が視覚的に認識できる操作モードがなければならない。【解説・目的】ユーザーがキーボード操作でフォーカスを移動させた際には、「キーボードフォーカス」がそこにあることを視覚的に認識できるようにしなければなりません。「キーボード操作が可能なユーザインタフェース」としては、次のようなものが挙げられます。  リンク  イメージマップのホットスポット  フォーム・コントロール  ボタン「キーボードフォーカス」は、HTML で標準的なリンクやフォーム・コントロールを使用していれば、特に何もしなければ標準のフォーカスインジケーター（ドットの矩形）が表示されるため、ユーザーは視覚的に認識することが可能です。しかし、例えば CSS で:focus {outline: none}などを用いると、このフォーカスインジケーターが表示されなくなるため、本達成基準を満たすことができなくなります。

達成基準 7.2.4.7

(20)

５.テキスト以外の情報（画像・音声・動画など）

５. テキスト以外の情報（画像・音声・動画など）

５‐１

画像・リンク画像

(１) 画像【ルール】画像には必ず代替テキストを設定し、画像の内容が適切に伝わるように配慮する。【解説・目的】画像を掲載する場合は、そのままでは画像が見えない利用者（音声読み上げソフトなどで利用している人など）に情報が伝わらないため、代替テキストを設定し、その画像が何であるか、また、画像が文字情報を含む場合は、その内容を示す情報を提供しましょう。【具体例１】 ×悪い例画像（画像化された文字）に代替テキストが記述されていない ○良い例画像（画像化された文字）に代替テキストが記述されている ※ 画像化された文字は、視覚的表現が好ましいもの・必要なもの（企業、商品、イベントなどのロゴ、書体サンプルなど）以外は、極力使用しないようにしましょう。達成基準 7.1.4.5 [画像化された文字] 達成基準 7.1.1.1 [非テキストコンテンツ] 下記のとおり開催いたします。日時：2013 年○月○～○日場所：△△△△△△ 画像の代替テキストが設定されていないと、音声読み上げソフトでは何も読み上げないため、画像の内容を把握できません。読み上げ例「」下記のとおり開催いたします。日時：2013 年○月○～○日場所：△△△△△△ 画像の代替テキストが設定されているため、音声読み上げソフトの利用者にも情報が正確に伝わります。読み上げ例「第60回夏祭り開催のお知らせ」

(21)

18

Copyright © 2015 Shimonoseki city. ALL Rights Reserved. 【具体例２】 ×悪い例画像に対して適切でない代替テキストが記述されている ○良い例画像に対して適切な代替テキストが記述されている【具体例３】 ×悪い例同じ内容を二度読み上げてしまう ○良い例意味を持たない画像の説明は空とする ※「alt=””」とする読み上げ例「」次に続くリンクテキスト「第二章」だけを読み上げます。代替テキストと、リンクテキストが同一であるため、音声読み上げ時に「第二章」を二度読み上げてしまいます。読み上げ例「第二章」検索この領域から検索だということを正しく伝えることができます。読み上げ例「検索」検索検索をイメージさせるための画像ですが、虫眼鏡という代替テキストでは検索ということが伝えられません。読み上げ例「虫眼鏡」

(22)

５.テキスト以外の情報（画像・音声・動画など） (２) リンク画像【ルール】リンク画像には、リンク先の内容が予測できるよう、代替テキストを設定する。【解説・目的】画像にリンクを貼る場合は、そのままでは画像が見えない利用者（音声読み上げソフトなどで利用している人など）に、リンク先がどのような内容なのか情報が伝わらないため、代替テキストを用いてリンク先の内容を明確に示しましょう。【具体例】 ×悪い例リンクのある画像にリンク先の内容を示す代替テキストが記述されていない ○良い例リンクのある画像にリンク先の内容を示す代替テキストが記述されている５‐２

音声情報

【ルール１】音声情報を提供する際は、合わせてテキストでの情報も提供する。【解説・目的１】音声で提供される情報は、聴覚障がい者や高齢者など内容を聞き取れない人がいる可能性があるため、テキストでの代替情報も合わせて提供しましょう。また、提供する際は必ずファイルサイズを併記しましょう。【具体例１】達成基準 7.1.1.1 [非テキストコンテンツ] 達成基準 7.1.2.1 [収録済みの音声しか含まないﾒﾃﾞｨｱ及び収録済みの映像しか含まないﾒﾃﾞｨｱ] 読み上げ例「Flash Playerダウンロードページへ」画像の代替情報にリンク先の内容が記述されているため、音声読み上げソフトの利用者にも情報が正確に伝わります。画像の代替情報が記述されていないと、音声読み上げソフトではリンク先のURLを読み上げるため、リンク先の内容が伝わりません。読み上げ例「http://・・・・」（URLを読み上げる）

(23)

20

動画・アニメーション

【ルール】動画やアニメーションなど時間によって変化するコンテンツを提供する際は、音声や映像と同じタイミングで内容を説明する代替情報を提供する。【解説・目的】動画やアニメーションで提供される情報は、視覚障がい者、聴覚障がい者、高齢者など、内容を把握できない人がいる可能性があるため、映像とテキスト情報を同じタイミングで提供しましょう。また、提供する際は必ずファイルサイズを併記しましょう。【具体例】 ○良い例 Flash コンテンツにおける代替手段の例達成基準 7.1.1.1 [非テキストコンテンツ] アニメーションが見られない利用者にも、内容が伝わります。

(24)

５.テキスト以外の情報（画像・音声・動画など）５‐４

時間の経過に伴って変化するメディア（追加）

(１) 代替コンテンツ・音声ガイド【ルール１】同期したメディアに含まれている収録済みの映像コンテンツに対して、時間の経過に伴って変化するメディアに対する代替コンテンツ又は音声ガイドを提供しなければならない。ただし、その同期したメディアがテキストの代替メディアであって、代替メディアであることが明確にラベル付けされている場合は除く。【解説・目的１】収録済みの「同期したメディア」（主に、音声付きの映像（動画）のこと）を用いる際には、映像だけが伝えている情報も含めてテキストに書き起こした「代替コンテンツ」を提供するか、または「音声ガイド」を提供しなければなりません。映像を見ることのできないユーザーは、映像だけで伝えられる視覚的な情報を入手することができません。映像を見ることができなくても、音声付き映像を再生しながら、等価な情報が得られるように「代替えコンテンツ」または「音声ガイド」を提供する必要があります。「代替コンテンツ」は、音声付きの映像の音声と映像の両方で伝えられている情報をテキストに書き起こしたもので、これは「トランスクリプト」と呼ばれ、その音声や映像の台本のようなものになります。 ※ 「音声ガイド」の提供は実際には困難なことが多く、等級 AA（達成基準 7.1.2.5）では必須ですが、この等級 A では「代替コンテンツ」の提供でも達成基準を満たすことができます。【ルール２】同期したﾒﾃﾞｨｱに含まれているすべての収録済みの映像ｺﾝﾃﾝﾂに対して、音声ｶﾞｲﾄﾞを提供しなければならない。【解説・目的２】収録済みの「同期したメディア」（主に、音声付きの映像（動画）のこと）を用いる際には、映像だけが伝えている情報を「音声ガイド」を用いて提供しなければなりません。映像を見ることのできないユーザーは、映像だけで伝えられている視覚的な情報を入手することができません。映像を見ることができなくても、音声付き映像を再生しながら、等価な情報が得られるように「音声ガイド」を提供する必要があります。「音声ガイド」は、必ずしも映像と同等の情報を伝えることができるとはかぎりません。「音声ガイド」は主音声の合間に挿入するナレーションであり、提供できる情報量が時間的に限られていることが多いからです。「音声ガイド」を挿入することが可能な主音声の合間を使って重要な情報をできる限り多く伝達できるように、音声ガイドのナレーション原稿を工夫する必要があります。 ※ 等級 A の達成基準 7.1.2.3 を満たすために「音声ガイド」をすでに提供している場合、本達成基準は自動的に満たされていることになります。達成基準 7.1.2.3 [収録済みの映像コンテンツの代替コンテンツ又は音声ガイド] 達成基準 7.1.2.5 [収録済みの映像コンテンツの音声ガイド]

(25)

22

Copyright © 2015 Shimonoseki city. ALL Rights Reserved. (２) キャプション【ルール１】同期したメディアに含まれているすべての収録済みの音声コンテンツに対して、キャプションを提供しなければならない。ただし、その同期したメディアがテキストの代替メディアであって、代替メディアであることが明確にラベル付けされている場合は除く。【解説・目的１】収録済みの「同期したメディア」（主に、音声付きの映像（動画）のこと）を用いる際には、音声で伝えている情報をテキストに書き起こして、画面上で「キャプション」（テロップなど）として提供しなければなりません。音声だけで伝えられている情報は、音声を聞くことのできないユーザーが入手することができません。そのため、音声を聞くことができなくても、音声付きの映像を再生しながら等価な情報が得られるように「キャプション」を提供する必要があります。「キャプション」には次の 2 種類があり、いずれかの方法を用いて提供します。  オープン・キャプション画面に常に表示されているキャプション。  クローズド・キャプション画面への表示/非表示の切り替えが可能で、必要に応じて画面に表示することができるキャプション。【ルール２】同期したﾒﾃﾞｨｱに含まれている、すべてのﾗｲﾌﾞの音声ｺﾝﾃﾝﾂに対し、ｷｬﾌﾟｼｮﾝを提供しなければならない。【解説・目的２】ライブの「同期したメディア」（主に、音声付きの映像（動画）のこと）を用いる際は、音声で伝えている情報をテキストに書き起こし、画面上で「キャプション」（テロップなど）として提供しなければなりません。音声を聞くことのできないユーザーは、音声付き映像の音声だけで伝えられている情報を入手することができません。そのため、音声を聞くことができなくても、ライブ提供されている音声付き映像から等価な情報が得られるように「キャプション」を提供する必要があります。「キャプション」には次の 2 種類があり、いずれかの方法を用いて提供します。  オープン・キャプション画面に常に表示されているキャプション。  クローズド・キャプション画面への表示/非表示の切り替えが可能で、必要に応じて画面に表示することができるキャプション。 ※ ライブの場合、「キャプション」のテキストを書き起こすのが困難な場合があるのが現状です。音声が聞き取れなかったとしても再確認することはできませんし、誤字・脱字があっても修正することができません。将来的には音声認識技術などを用いて、リアルタイムで「キャプション」のテキストを書き起こすことが可能になるかもしれません。達成基準 7.1.2.2 [収録済みの音声コンテンツのキャプションに関する達成基準] 達成基準 7.1.2.4 [ライブの音声コンテンツのキャプション]

(26)

５.テキスト以外の情報（画像・音声・動画など） (３) 音声制御【ルール】ウェブページ上にある音声が自動的に再生され、その音声が 3 秒より長く続く場合、その音声を一時停止若しくは停止するメカニズム、又はシステム全体の音量レベルに影響を与えずに音量レベルを調整できるメカニズムを提供しなければならない。【解説・目的】ウェブページ上に動画または音声ファイルがあり、その音声が自動的に再生されて、3 秒よりも長く続く場合には、ユーザーが音声を一時停止または停止できるようにするか、あるいは「システム全体の音量レベルに影響を与えずに音量レベルを調整」できるようにしなければなりません。「システム全体の音量レベルに影響を与えずに」というのは、PC 自体の音量は下げずにコンテンツの音量だけを調整できるようにするという意味です。なお、もしページ上の動画または音声ファイルが自動再生されなければ、この達成基準は自ずと満たされたことになります。音声読み上げソフトなどを使用している場合、ページ読込みと同時に音声が自動再生され始めると、音声読み上げソフトなどの読み上げ音声が聞き取りづらくなり、操作に支障をきたす恐れがあります。これらの理由から、音声を自動的に再生しないことが推奨されています。達成基準 7.1.4.2 [音声制御]

(27)

６.色・形

24

６. 色・形

６‐１

色での区別

【ルール】情報の識別や指示は、色だけでなく文字などでもわかるようにする。【解説・目的】色の区別がつきにくい人や、音声読み上げソフトなどで利用している人は、色の違いを把握できません。「赤字は○○です」など、色の違いだけで、情報の意味の違いや強調が表現されていると、意図が伝わらない可能性があります。色のみによる情報の識別や指示は使用せず、テキスト情報を併せて提供しましょう。【具体例１】 ×悪い例色だけで円グラフを説明している ○良い例色だけに頼らずに円グラフを説明している達成基準 7.1.4.1 [色の使用] 達成基準 7.1.3.1 [情報及び関係性] 色覚障がいのある利用者は、色の違いを把握することが困難な場合があります。色情報を取り去ると・・・引き出し線をつけたりテキスト情報を付加したりすることで、色覚障がいのある利用者も情報を識別することができます。色情報を取り去ると・・・

(28)

６.色・形【具体例２】 ×悪い例文字の色だけで、情報を識別させている ○良い例文字の色とテキスト情報を併用して、情報を識別させている赤字の日程に関しては、満席のため、受付を終了しております。 2012 年 10 月 1 日就職説明会（受付終了） 2012 年 10 月 15 日就職説明会（受付終了） 2012 年 11 月 15 日就職説明会 2012 年 11 月 20 日就職説明会色だけに頼らず、テキストで「受付終了」と明示していることで、色覚障がいのある利用者も、情報を識別することができます。赤字の日程に関しては、満席のため、受付を終了しております。 2012 年 10 月 1 日就職説明会 2012 年 10 月 15 日就職説明会 2012 年 11 月 15 日就職説明会 2012 年 11 月 20 日就職説明会色覚障がいのある利用者は、色の違いを把握することが出来ないため、情報の識別ができません。

(29)

６.色・形

26

形・位置

【ルール】情報の識別や指示は、画面上の形や位置だけでなく文字などでもわかるようにする。【解説・目的】画面に表示されている形や位置によって、情報を区別したり指示が行われたりする場合、音声読み上げソフトなどで利用している人などは、情報の区別がつかなかったり、操作できなくなる可能性があります。形や位置による情報の識別や指示は使用せず、テキスト情報を併せて提供しましょう。【具体例】 ×悪い例画面上の位置に依存して情報を示している ○良い例位置だけに頼らず、テキスト情報をつけている６‐３

画像内の文字

【ルール】画像内の文字の背景色と前景色のコントラストに配慮する。【解説・目的】画像内の文字の読み取りやすさは、高齢者をはじめ多くの利用者にとって重大な問題です。画像内の文字と背景の色の明暗の差がない場合、画像内の文字を識別しにくくなってしまいます。画像に文字を入力する場合は、背景色と前景色のコントラストを十分にとり、文字を識別しやすい形で画像を提供しましょう。 ※ 文字の背景色と前景色のコントラストに関しては、「カラーコントラストアナライザー」などのフリーツールで確認することができます。達成基準 7.1.3.3 [感覚的な特徴] 達成基準 7.1.4.3 [最低限のコントラスト] 画面上の位置に依存した情報は、音声読み上げソフトの利用者は操作ができなくなる可能性があります。右下のボタンを押して印刷してください。右下のボタンを押して印刷してください。

印刷

形や位置だけに依存せず内容や操作手順をテキストで併記すると、音声読み上げソフトの利用者もボタンを選択することができます。

(30)

７.文字

７. 文字

７‐１

文字のサイズ

【ルール】文字の大きさは利用者が任意に変更できるようにする。【解説・目的】視力の弱い方や高齢者が閲覧していることも考慮し、必要に応じて文字サイズを変更できるよう、文字サイズの絶対指定はしないようにしましょう。【具体例】ブラウザで文字サイズを変更できるページ内にある文字サイズ切替機能で変更できる達成基準 7.1.4.4 [テキストのサイズ変更]

(31)

７.文字

28

文字の書体

【ルール】文字の書体は指定せず、ブラウザで指定されたフォントで表示されるようにする。【解説・目的】文字の書体の違いによって読みやすさが異なる場合があります。一般に、文字の細い明朝体よりもゴシックなどのはっきりとしたフォントの方が、読みやすい人が多くなります。利用者が自由に書体を変更できるよう、文字の書体は指定しないようにしましょう。７‐３

文字の色

【ルール】文字色はウェブセーフカラーの中から使用し、コントラストや明度など、視認性に配慮する。 ※ ウェブセーフカラーとは、OS やコンピュータの違いによらずどんな環境でもこれらの色が表示できる 216 色のことで、色選択の目安とされています。【解説・目的】ページ内の文字の読み取りやすさは、高齢者をはじめ多くの利用者にとって重大な問題です。文字色と背景色との差（コントラスト、明度）は十分にとり、文字色と同色系の背景色や背景画像などは、原則として用いないようにしましょう。 ※ 色覚特性によっては、「赤と緑」「黄と青」、高齢者の場合は「白と黄」「青と黒」「青紫と黒」を識別するのが困難な場合があります。【具体例】 ×悪い例明るい背景色と明るい文字色が使われており、コントラストが十分ではない ○良い例背景色と文字色のコントラストが十分とられている達成基準 7.1.4.4 [テキストのサイズ変更] 達成基準 7.1.4.3 [最低限のコントラスト]

下関市について

明るい背景色に明るい文字色が使われているため、十分なコントラストが確保されていません。コントラストが十分にとられていないため、文字が読みにくくなります。

下関市について

明るい背景色に暗い文字、または暗い背景色に明るい文字が使われているため、十分なコントラストが確保され、文字が読みやすくなります。

(32)

８.変化や点滅のある表示

８. 変化や点滅のある表示

８‐１

変化や移動（追加）

【ルール】移動したり、表示内容が切り替わって変化する画像、テキストなどは使わない。【解説・目的】文章が移動したり、画像の表示内容が切り替わって変化したりするような表示は、高齢者や視覚障がい者など見る人によっては認識が難しい場合がありますので、使用しないようにしましょう。 ※ 文字が画面上を流れる <marquee> タグはウインドウズのみの対応です。このように、特定の環境でしか正確に表示されないものは使用しないでください。使用する場合は、下記の事項を満たす必要があります。  自動的に開始して 5 秒よりも長く続く「動き」、「スクロール」がある場合には、ユーザーがそれらを「一時停止」、「停止」または「非表示」にすることができるようにしなければなりません。  「自動更新」が自動的に開始される場合には、ユーザーが「一時停止」、「停止」または「非表示」にできるようにするか、あるいはユーザーが更新頻度を調整できるようにしなければなりません。８‐２

点滅（追加修正）

【ルール】画面に表示される内容は点滅させない。【解説・目的】利用者の注意を促すために点滅を利用することがありますが、早い周期での点滅は「光感受性発作（光源性てんかん）」のある人の発作を引き起こすなどの危険があるため、1 秒間に 2 回以上の点滅は行わないようにしましょう。（特に彩度の高い赤の点滅）使用する場合は、下記の事項を満たす必要があります。  自動的に開始して 5 秒よりも長く続く「点滅」がある場合には、ユーザーがそれらを「一時停止」、「停止」または「非表示」にすることができるようにしなければなりません。達成基準 7.2.2.2 [一時停止，停止及び非表示] 達成基準 7.2.2.2 [一時停止，停止及び非表示] 達成基準 7.2.3.1 [3 回の閃光又は閾値以下]

(33)

８.変化や点滅のある表示

30

Copyright © 2015 Shimonoseki city. ALL Rights Reserved. 【具体例１】 ×悪い例利用者の注意を促すために点滅する画像を使用している ○良い例通常の画像を使用している光感受性発作のある利用者にも、安全に見てもらうことができます。ＮＥＷ！  主な市の施設の年末年始の業務について光感受性発作（光源性てんかん）のある利用者は、1秒間に数回の点滅やストロボ光のような光量の急激な変化に対し、発作を引き起こす可能性があります。拡大して見ている利用者もいるため、部分的な点滅でも同様の危険があります。  主な市の施設の年末年始の業務についてＮＥＷ！点滅ＮＥＷ！

(34)

８.変化や点滅のある表示８‐３

制限時間（追加）

【ルール】コンテンツに制限時間を設定する場合、次に挙げる事項のうち少なくとも一つを満たさなければならない。解除コンテンツを利用する前に、利用者がその制限時間を解除することができる。調整コンテンツを利用する前に、利用者が、少なくともデフォルト設定の 10 倍を超える、大幅な制限時間の調整をすることができる。延長時間切れになる前に利用者に警告し、かつ、少なくとも 20 秒間の猶予をもって、（例：スペースキー押下などの簡単な操作で）、利用者が制限時間を少なくとも 10 倍以上延長することができる。リアルタイムの例外リアルタイムのイベント（例：オークション）において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。必要不可欠の例外制限時間が必要不可欠なもので、制限時間を延長することがコンテンツの動作を無効にすることになる。 20 時間の例外制限時間が 20 時間よりも長い。【解説・目的】コンテンツの閲覧や操作に制限時間がある場合には、その制限時間内にコンテンツを読んだり、必要な操作を完了させたりすることが困難なユーザーが、必要に応じてその制限時間を解除、調整または延長できるようにしなければなりません。この達成基準では、次の３つに該当する場合には例外として制限時間を設けることが認められています。  リアルタイムで進行しているイベントで、制限時間なしでは成立しない場合（例：オークション）  一定の制限時間を設けないと、サイト本来の機能や目的が果たせない場合（例：チケット予約サイト）  制限時間が 20 時間よりも長い場合【具体例】 ○良い例時間切れを警告している。制限時間が切れてしまう 20 秒以上前に「時間切れの警告」ダイアログを表示し、ユーザーが［はい］ボタンを押せば、コンテンツの制限時間が延長される。達成基準 7.2.2.1 [調整可能な制限時間]

(35)

９.言語

32

９. 言語

９‐１

言語の明示（追加）

【ルール】それぞれのウェブページの主たる自然言語がどの言語であるかを、プログラムが解釈可能でなければならない。【解説・目的】 HTML のウェブページでは、html 要素でそのコンテンツの主たる「自然言語」を明示しなければなりません。 html 要素で使用する属性には、lang 属性と xml:lang 属性があり、HTML のバージョンや Content-Type によって異なります。 lang 属性および xml:lang 属性の値として使用する主な言語コードは次の通りです。  日本語： ja  英語： en  韓国語： ko  中国語（簡体）： zh-CN  中国語（繁体）： zh-TW ウェブページで複数の言語を使用している場合、そのコンテンツで最も多く使われている言語を指定します。ほぼ同じ割合で複数の言語を使用している場合には、最初に使われている言語を指定します。９‐２

省略語、専門用語など

【ルール】省略語や専門用語、流行語、俗語など、利用者にとって理解しにくいと考えられる用語は多用しないようにする。使用する際は、最初に用いるときに解説する。【解説・目的】一般的でない省略語や専門用語などが使用されると、高齢者や子供をはじめ多くの利用者が理解できない可能性があります。使用する際は、必ず解説や用語集を設けるようにしましょう。【具体例】略語を最初に用いる時に、その直前か直後に元の語を提供する。達成基準 7.3.1.1 [ページの言語] 達成基準 7.3.1.4 [略語] 国際連合難民高等弁務官事務所(UNHCR)は、1950 年に難民の保護と支援を提供するために設立された。

(36)

９.言語９‐３

読みの難しい言葉

【ルール】読みの難しい漢字や専門用語など、難解な言葉を多用しないようにする。使用する際は、最初に用いるときに解説する。【解説・目的】読みの難しい漢字や専門用語などが使用されると、高齢者や子供をはじめ多くの利用者が理解できない可能性があります。使用する際は、必ず解説や用語集を設けるようにしましょう。９‐４

単語内の空白

【ルール】単語の途中に空白（スペース）や改行を入れない。【解説・目的】「場所」、「時間」などのようにバランスをとるために、単語の途中に空白を入れないようにしてください。音声読み上げソフトでは「ば・ところ」、「とき・あいだ」と正しく読み上げられないため、単語の途中にスペースや改行を入れないようにしましょう。達成基準 7.3.1.5 [読解レベル] 達成基準 7.1.3.2 [意味のある順序]

(37)

９.言語

34

記号や省略表記

【ルール】  注釈は、「＊」「※」（コメジルシやアスタリスク）を使用せず、（注 1）などと、記述する。  曜日は、省略表記を行わない。「（日）」ではなく、「日曜日」と表記する。  日付け表記の「／」「/」（スラッシュ）は、分数で読み上げるため、「月」や「日」の漢字を使用する。  期間、範囲を示す場合は、「～」を使用すること。「-」を利用した場合、「から」と読み上げず、内容を把握しにくい。【解説・目的】テキストの記号は、音声読み上げソフトでは意図したとおりに読み上げないことがあります。重要な情報を示すのに、記号だけを使用することは避けてください。【具体例】 ×悪い例意図したとおり読み上げない ○良い例誤解なく情報が伝わる「にせんさんすらっしゅぜろよんすらっしゅぜろはち」「じゅうさんころんぜろぜろはいふんじゅうよんころんぜろぜろ」と読み上げられてしまい、意図したとおり読み上げられません。「にせんさんねんよんがつようか」「じゅうさんじからじゅうよんじ」と意味が分かるように読み上げられます。

(38)

１０.入力フォーム（追加）

１０. 入力フォーム（追加）

１０‐１

入力エラー

【ルール１】入力エラーが自動的に発見された場合は、エラーとなっている箇所を特定し、そのエラーを利用者にテキストで説明しなければならない。【解説・目的１】入力フォームでユーザーの「入力エラー」があった際は、エラー箇所とエラー内容の説明を、エラー修正画面上にテキストで提供しなければなりません。入力フォームで「入力エラー」となるのは、主に次のことが原因となります。・必須項目なのに入力または選択されていない・入力可能な値ではない・所定のフォーマット（書式）で入力されていない・その他、所定の入力方法で入力されていないエラーメッセージには、どの項目がエラーで、それがどういうエラーなのかが分かるよう「項目名」と「エラー内容」の説明をできるかぎり具体的に記述します。なお、エラーメッセージのテキストに加えて、入力エラー箇所の項目名の文字色やフィールドの色を変えたり、アイコンなどの画像もあわせて用いたりすることは全く問題ありません。【ルール２】入力エラーが自動的に発見された場合は、その修正方法が明らかであれば、その方法を利用者に提示しなければならない。ただし、セキュリティ又はコンテンツの目的を損なう場合は除く。【解説・目的２】達成等級「7.3.3.1 入力エラー箇所の特定に関する達成基準」に加えて、この達成基準では、さらに「その修正方法が明らかな場合」、エラーメッセージにその修正方法もあわせて提示しなければなりません。「入力エラー」の修正方法が分からないと、ユーザーはフォームへの入力をあきらめてしまう可能性があるので、エラーメッセージで修正方法を分かりやすく説明する必要があります。例えば、「正しく入力してください」ではなく、「ハイフンを入れて入力してください」というように、エラーメッセージで修正方法を提示する際は、可能なかぎり具体的に説明します。達成基準 7.3.3.1 [入力エラー箇所の特定] 達成基準 7.3.3.3 [入力エラー修正方法の提示]

(39)

１０.入力フォーム（追加）

36

ラベル・説明文

【ルール】コンテンツが利用者の入力を要求する場合は、入力箇所のラベル又は入力方法についての説明文を提供していなければならない。【解説・目的】ユーザーに入力を要求するフォーム項目では、そのフォーム・コントロールのラベル（項目名のテキスト）と、必要に応じて入力方法についての説明文を提供しなければなりません。入力方法などについての説明の提供が必要なのは、次のような場合です。・入力可能なデータ書式に制限がある場合・所定の入力方法がある場合・必須項目である場合つまり、入力エラーを引き起こす可能性がある項目に、入力エラーを事前に回避するため、ラベル部分に入力例や入力方法を提示します。入力例や入力方法、必須項目であることを明示する際は、ラベルとなるテキストと一緒に<label>要素の中に入れるようにします。これにより、例えば音声読み上げソフトを使用している際、テキストフィールドを読み上げる際に、ラベルとなるテキストとあわせて入力例や入力方法を読み上げます。また、入力項目数が少ないフォームや入力方法の項目が複数ある場合など、入力フォームの先頭部分で入力例や入力方法を提示したほうがよい場合もあります。入力項目ごとの説明がよいか、フォームの先頭にまとめたほうがよいかは、フォームの項目数や内容・構成によります。どちらが、より入力エラーを回避しやすいかという視点で判断してください。達成基準 7.3.3.2 [ラベル又は説明文]

(40)

１１.その他（追加）

１１. その他（追加）

１１‐１

一貫した識別性

【ルール】ウェブページ一式の中で同じ機能性をもつコンポーネントは、一貫して識別できなければならない。【解説・目的】「同じ機能性をもつコンポーネント」とは、次のようなものが挙げられます。・同一のページへのリンク・サイト内検索の［検索］ボタン・アイコン画像サイト内のページで、ある機能を学習したユーザーが、他のページにも同じ機能があれば見つけることができるように、その「機能性」が同じであれば、同じラベルを付けて一貫性を持たせる必要があります。例えば、サイト内検索の実行ボタンという「同じ機能性」を持つボタンのラベルが、ページによって「検索」や「探す」が混在していると、達成基準を満たすことができません。また、同じアイコン画像が繰り返し用いられている際は、それが同じ意味を示している場合、代替テキストも同一である必要があります。逆に、同じアイコン画像であっても、それが異なる意味で用いられている場合には、代替テキストは同一である必要はありません。１１‐２

ブロック・スキップ

【ルール】複数のウェブページ上で繰り返されているコンテンツのブロックをスキップできるメカニズムが利用可能でなければならない。【解説・目的】ページのメインコンテンツ部分の前に、「複数のページ上で繰り返されているコンテンツのブロック」（グローバルナビゲーション、ヘッダーなど）がある場合、ページ先頭からメインコンテンツ開始位置まで「スキップできるメカニズム」の提供が必要です。「スキップできるメカニズム」は、主に次のユーザーが利用できるものでなければなりません。・画面を見て、キーボードだけで操作しているユーザー（マウスなどを使用できないユーザー）・音声読み上げソフトやスクリーンリーダーを使用しているユーザー次の 2 つの実装方法を用いて「スキップできるメカニズム」を提供することが考えられます。・コンテンツの各セクションの開始位置に見出し要素（h 要素）を提供する・メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する達成基準 7.3.2.4 [一貫した識別性] 達成基準 7.2.4.1 [ブロック・スキップ]

(41)

１１.その他（追加）

38

複数の到達手段

【ルール】ウェブページ一式の中からあるウェブページに到達することのできる複数の手段がなければならない。ただし、ウェブページがプロセスの結果又はプロセスの中の一つのステップである場合は除く。【解説・目的】ユーザーがサイト内の目的のコンテンツを見つける手段として、自分の使いやすい方法を選ぶことができるように、次の中から複数の手段を提供します。・関連するページへナビゲートするリンクを提供する・サイトマップを提供する・検索機能を提供して、利用者がコンテンツを見つけるのを手助けする（サイト内検索など）全部で 10 ページ程度しかないような小規模なサイトでは、さらに次の中からも一つの手段を提供することが可能です。・他の全てのウェブページへのリンク一覧を提供する・HOME（トップ）ページからサイト上の全てのウェブページにリンクする１１‐４

フォーカスを受け取ったとき

【ルール】いずれのコンポーネントも、フォーカスを受け取ったときに状況の変化を引き起こしてはならない。【解説・目的】フォーカスを受け取ることができるもの（例：リンクやフォーム・コントロールなど）は、フォーカスを受け取っただけで「状況の変化」を引き起こしてはなりません。「状況の変化」とは、次のようなものが挙げられます。・新しいウィンドウを開くこと・フォーカスを異なる要素へ移動させること・新しいページへ移動すること（新しいページへ移動したかのように思わせてしまうことも含む）・ページの内容を大きく再配置すること例えば、キーボード操作（Tab キー）で、フォーカスをリンクに移動した途端に、新しいページへ移動してしまってはいけません。キーボード操作（Tab キー）で、フォーカスを全てのリンクやフォーム・コントロールなどに移動させても、上記のような「状況の変化」が引き起こされないようにします。達成基準 7.2.4.5 [複数の到達手段] 達成基準 7.3.2.1 [オンフォーカス]

(42)

１１.その他（追加）１１‐５

ユーザインタフェースコンポーネントによる状況の変化

【ルール】利用者が使用する前にその挙動を知らせている場合を除いて、ユーザインタフェースコンポーネントの設定を変更することで、状況の変化を引き起こしてはならない。【解説・目的】ユーザーが「ユーザインタフェースコンポーネント」（フォーム・コントロールなど）の設定を変更しただけで、「状況の変化」を引き起こしてはなりません。「状況の変化」とは、次のようなものが挙げられます。・新しいウィンドウを開くこと・フォーカスを異なる要素へ移動させること・新しいページへ移動すること（新しいページへ移動したかのように思わせてしまうことも含む）・ページの内容を大きく再配置すること【具体例】 ×悪い例実行ボタンのないプルダウンメニュー実行ボタンがなく、プルダウンメニューで選択肢を選んだだけでリンク先に移動させられてしまう。キーボード操作では、1 つ目の選択肢にフォーカス移動しただけで、強制的に移動させられてしまうため、２つ目以降の選択肢を選ぶことすらできない。 ○良い例実行ボタンのあるプルダウンメニュープルダウンメニューで選択肢を選んだ後に、［GO］ボタンを押すことによってはじめて、リンク先に移動することができる。達成基準 7.3.2.2 [ユーザインタフェースコンポーネントによる状況の変化]