ページの先頭です。 メニューを飛ばして本文へ
トップページ 組織で探す 県民生活部 情報政策課 岡山県ウェブコンテンツ作成指針(HTML)

岡山県ウェブコンテンツ作成指針(HTML)

第1:目的

インターネットに代表されるIT(情報通信技術)の進展とともに、多くの人々がウェブコンテンツ技術によって実現されたサービスを利用するようになっている。このような中で、ウェブアクセシビリティ(高齢者や障害者といったホームページ等の利用に何らかの制約があったり利用に不慣れな人々を含めて、誰もがホームページ等で提供される情報や機能を支障なく利用できること)の確保と向上が求められ、日本工業規格にウェブアクセシビリティに関する規格(JISX8341-3)が制定された。
 「岡山県ウェブコンテンツ作成指針」(以下「本指針」という。)は、JISX8341-3を踏まえ、岡山県のウェブコンテンツについて、誰もがウェブコンテンツを知覚し、理解し、操作できるようにするため、ウェブコンテンツの企画、設計、制作・開発、検証及び保守・運用をするときに配慮すべき事項を定めたものである。

第2:参考規格

本指針は、次の規格及び文書に基づいて要件を定める。
  • JIS X 8341-1(2010年) 高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第1部:共通指針
  • JIS X 8341-3(2010年) 高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ

 また、上記2に示される達成基準を満たすための具体的な実装方法や達成基準の意図を理解するため、World Wide Web Consortium(W3C)及びウェブアクセシビリティ基盤委員会が公開している次の文書も参考にする。

第3:用語及び定義

本指針で用いる主な用語及び定義は、JIS X8341-1(2010年)、JIS X8341-3(2010年)による。

第4:適用範囲

  1. 対象とするウェブコンテンツ
      岡山県公式ホームページ(http://www.pref.okayama.jp/配下のウェブページ一式)。
      ただし、岡山県公式ホームページ以外のウェブコンテンツについても、本指針に準じウェブアクセシビリティ
      の確保、向上に努める。
  2. 対象とするウェブコンテンツ技術
      岡山県公式ホームページ上で公開されるHTML、CSS、Javascript、PDF、JPG、GIF、PNG及びFLASH。
      ただし、個別技術の採用すべきバージョン・機能等は、コンテンツ作成時期によって異なるため、本指針で
      は規定しないが、ウェブページ及びウェブページ一式を作成する際、個別に定めることを推奨する。
  3. 対象とする時期
      岡山県公式ホームページ上のコンテンツの新規作成時及び更新時。
      ただし、岡山県公式ホームページ内に本指針に反する内容が認められた場合には、内容の更新時期に
      かかわらず、当該部分の積極的な改修を行う。
  4. 対象とする作成者
      岡山県公式ホームページへ掲載するコンテンツを作成する者(岡山県から作成業務を委託された者を
      含む)

第5:基本方針

1:全般的事項

  1. JIS X 8341-3(2010年)を尊重し、誰もがウェブコンテンツを知覚し、理解し、操作できるように規格の示す要件に従ってできる限りの対応を行う。
  2. JIS X 8341-3(2010年)に規定するウェブコンテンツのアクセシビリティ達成等級については、ウェブページ一式を単位として別に定める。

2:本指針に関する事項

  1. 具体的な実装方法及び実装例を記すことによりウェブコンテンツに関する専門的な知識の有無にかかわらず、十分な理解ができるよう配慮する。
  2. 実装方法は、原則としてHTML及びXHTMLに関して示す。なお、特定の技術・バージョンに依存する表現については、ウェブコンテンツ技術や利用者が用いる支援技術の発展などに対応できるように定期的な見直しを行う。

第6:ウェブアクセシビリティの確保・向上に関する全般的要件

1:企画・設計

  1. ウェブコンテンツの企画に当たっては、本指針を基に、JIS X8341-3(2010年)による達成等級を含むウェブアクセシビリティ方針を定める。
  2. ウェブコンテンツの内容や設計時点での技術動向等に応じて、使用するウェブコンテンツ技術及び実装方法を適切に選択する。
  3. ウェブコンテンツ作成ソフト(CMSを含む)は、本指針に示す達成基準を満たすことを補助する機能を持つものを選定することが望ましい。

2:制作・開発

  1. 本指針に定める達成基準を満たすように制作・開発を行う。

3:検証

  1. ウェブサイトを公開する際は、本指針「試験実施方法」に示す方法により達成基準が満たされていることを可能な限り検証する。
  2. 高齢者・障害者支援技術など新しい検証用プログラムを必要に応じて利用する。

4:保守・運用

  1. ウェブサイト公開時だけでなく、保守・運用時にわたってウェブアクセシビリティの品質を確保し維持・向上するように努める。
  2. 利用者の意見、要望、質問は、積極的にウェブコンテンツへ反映するように検討する。
  3. ウェブコンテンツには、電子メール、電話及びFAXなど複数の問い合わせ手段を併せて明示する。

第7:ウェブコンテンツに関する達成基準

1:テキストでない情報には適切な代替テキストを提供する(7.1.1.1/A)

達成のためのポイント

  1. img要素、area要素及びinput要素の画像ボタンには、alt属性を付与する。
  2. alt属性は、前後の文脈から判断して適切な文章を記述する。
  3. 装飾目的、整形目的の画像には、「alt=""」を記述する。
  4. ASCIIアート(アスキーアート)、顔文字は使用しない。

解説

 画像などのテキストでない情報は、代替テキストを提供することにより音声や点字のような利用者が必要とする形式に変換し、利用することができます。画像の代替テキストは、画像の内容や役割を端的に表現することが求められますが、何の画像であるかよりも、画像が文脈においてどのような意味を持っているかを伝える必要があります。
 また、文字を組み合わせてその形状を絵や顔等に見立てた表現は、文字として意味が伝わらないので使用しないでください。

図1:適切でない代替テキスト(左)と適切な代替テキスト(右)の例

1つめのグラフは「グラフ」と代替テキストが提供されているが、2つめのグラフは「製造業、非製造業の別を示したグラフ。製造業が約9割を占める。」と提供されている。

図2:ASCIIアート(左)と顔文字(右)の例

アスキーアートと顔文字で視覚的な表現をしていますが、音声で読み上げた時に、適切に読み上げることができません。

ASCIIアート(アスキーアート)とは、罫線やカッコなどの記号や文字を組み合わせて、視覚的な表現を行うものです。

2:音声のみ 若しくは映像のみのコンテンツ に対して、代替情報を提供する(7.1.2.1/A)

達成のためのポイント

  1. 音声のみの情報に対して、その音声に含まれる情報をテキストでも提供する。
  2. 映像のみの情報に対して、その映像に含まれる情報をテキスト若しくは音声でも提供する。

3:同期したメディア に含まれる音声コンテンツに対して、字幕を提供する(7.1.2.2/A、7.1.2.4/AA)

達成のためのポイント

  1. 同期したメディアに含まれる収録済みの音声コンテンツに対して、字幕を提供する。
  2. 同期したメディアに含まれるすべての生中継の音声コンテンツに対して、字幕を提供する。

4:同期したメディアに含まれる収録済みの映像コンテンツに対して、音声ガイドを提供する(7.1.2.3/A、7.1.2.5/AA)

達成のためのポイント

  1. 同期したメディアに含まれるすべての収録済みの映像コンテンツに対して、音声ガイドを提供する

解説

 音声や映像など時間の経過に伴って変化するメディアを使用する場合には、収録済みであるか生中継であるか、同期したメディアであるかどうかによって、求められる対応が異なります。図3を参考に、どのような達成方法を採用すべきか確認しましょう。

図3:音声もしくは映像コンテンツを掲載する際の対応方法フローチャート

映像・音声・録画済み・生中継それぞれの場合で、音声・テキスト・字幕等により適切な方法で情報提供する。

図4:字幕を付加した映像ファイルの例

ももっちの映像に字幕を付けて内容を分かりやすくしています。

5:文書の構造は、適切なHTML要素を用いて記述する(7.1.3.1/A)

達成のためのポイント

  1. 見出しは、見出し要素(h1、h2、h3、h4、h5、h6)を用いて表現する。
  2. 各ページのコンテンツには、ページの主題をh1として記述する。
  3. 箇条書きは、ol、ul、dl要素を用いて表現する。
  4. 強調は、strong、em要素を用いて表現する。
  5. 表を使用する前に、表以外に適した表現がないかを検討する。
  6. 表を使用する際は、見出しを表すth要素と、データを表すtd要素を適切に使用する。
  7. データテーブルでは、caption要素を用いて表題を記述する。
  8. データテーブルでは、headers、scope、id属性を用いて見出しとデータの関連性を明示する。
  9. ラジオボタン、チェックボックス、テキストフィールド(入力欄)などの入力フォームを構成する部品は、label要素及びfor、id属性を用いて、ラベルとの関連を明示する。

解説

 HTMLは、見出しや箇条書き、段落などの構造を記述するためのものです。ウェブコンテンツの文書構造に応じた適切なHTML要素を用いることにより、文字の大きさや太さ、色といった視覚的な情報に頼ることなく、文書の内容が理解しやすくなります。
 表は、縦横の関係を把握しなければならないため、音声読み上げソフトを使用した場合、内容を正しく理解することが難しい場合があります。そのため、表を使用することが最適な表現であるかを十分検討してください。また、表を使用する際には表の構造を示すHTML要素を適切に用いることが重要です。
 問い合わせや申込等で用いる入力フォームでは、ラジオボタン、チェックボックス、テキストフィールド(入力欄)などの入力フォームを構成する部品がラベルと関連付けられていない場合、誤操作の原因となる、又は何を入力すれば良いのか分からなくなる恐れがあります。

図5:文書の構造が適切に記述された例

県政ハイライト2010のページを見てみると、大見出し(h1)、中見出し(h2)、小見出し(h3)の順に表示しています。

このページの主題である「県政ハイライト2010」をh1要素で、次のレベルの見出し「1月」、「2月」をh2要素で記述しています。また、出来事など並列関係にある見出しはすべてh3要素で記述されているなど、文書構造が適切なHTML要素によって示されています。

図6:箇条書きの使い分け例

ul、ol、dlの例が挙げられています。

ul要素は番号のつかない箇条書き、ol要素は番号つきの箇条書き、dlは用語とその定義を示す場合に用いられます。

図7:強調例

重要な部分は、強調するための要素を用います。

strong要素は「強調」を示しています。視覚的には一般的に太字で表現されます。

図8:入力フォームを構成する部品とラベルを関連付けた例

岡山県内か岡山県外を選ぶラジオボタン。

6:ウェブコンテンツの意味の順序と、読み上げ順序を一致させる(7.1.3.2/A)

達成のためのポイント

  1. 文書の内容や構造を無視した表示位置の指定をしない。
  2. 表の読み上げ順序を考慮し、内容が正確に把握できる表を構成する。
  3. 整形のために、単語内にスペースや改行を使用しない。

解説

 音声読み上げソフトなどは、HTMLに記述された順序でウェブコンテンツを読み上げます。そのため、文書の内容や構造と視覚的な位置が異なっている場合、正しい順序で読み上げられないため、文書の内容を理解することが難しくなります。
 また、表は、図9の順序でウェブコンテンツを読み上げます。そのため、図10の場合には、内容を理解しやすくなるように(「表」以外の表現方法がないかも含め)検討する必要があります。

図9:音声読み上げソフトの表(table要素)の読み上げ順序

表の各部分に順番がふってある例
はじめの行を左から右、次の行を左から右と読み上げていくが、セルの結合や分割があると複雑な読み上げ順となります。

図10:読み上げ順に問題がある例(左)とその改善例(右)

左の表は県の木・県の花・県の鳥・アカマツ・ももの花・キジと読み上げますが、右の表は県の木・アカマツ・県の花・ももの花・県の鳥・キジと順番に読み上げます

表の構成を変えることにより「県の木」と「アカマツ」の関係が分かりやすくなります。ただし、この場合、箇条書きを用いるなどの表以外の表現も検討すべきです。

図11:(悪い例)ソースコードと表示が異なる例

1.卵と牛乳を混ぜる。2.ホットケーキミックスを加え、さっくりと手早く混ぜる。3.フライパンを中火で熱する。

HTML上は、手順1→3→2の順で記述されているが、1→2→3の順に表示されるよう構造を無視した位置指定がされています。

図12:単語内にスペースが入っている場合の読み上げ例

経済という単語で、経と済の間でスペースを入れると、ケイスミと読み上げることがあります。 位置という単語で位と置の間でスペースを入れると、クライチと読み上げることがあります。 人口という単語で人と口の間でスペースをいれると、ヒトクチと読み上げることがあります。

単語の途中にスペースや改行が入っていると、音声読み上げソフトでは一つの単語として認識できず、期待する読み上げができなくなる場合があります。

7:形、大きさ、位置、方向、音だけに依存した情報を提供しない(7.1.3.3/A)

達成のためのポイント

  1. 形・大きさ・位置・方向・音だけでなく、テキストの情報を併記する。
  2. 感覚的な表現が、一般的なルールとして認知されている場合には、積極的に使用する。

解説

 形・大きさ・位置・方向・音だけに依存した情報を提供した場合、それらを認識できない、又はその意味を理解できないとき、文書の内容を理解することが難しくなります。

図13:形のみで情報を提供している例(左)と、改善例(右)

岡山県は降水量1ミリ未満の日数が全国で一番多い?はい又はいいえ、その下の左側に○の下に「次の問題へ進む」のテキストリンク、右側に○の中に正解の文字があって、その下に「次の問題へ進む」のテキストリンク
「正解」という意味を「○」という形だけで表現するのではなく、「正解」というテキストを併記することにより意味を明確にしています。
ただし、クイズの答えに関するページで「○」が表示されている場合、それは「正解」を意味することは一般的であるので「○」という形は積極的に使用することが望ましいと言えます。

図14:(悪い例)タグクラウド

入札・契約、インフルエンザなど、アクセスが多いリンクの文字が大きくなっています。

ブログ等で見られる「タグクラウド」と呼ばれる表現。文字の大きさによって、検索回数や人気度、記事の数などを表していますが、音声読み上げソフトなど文字の大きさを認識できない場合には、意味のない情報になってしまいます。

8:色の違いだけに依存した情報を提供しない(7.1.4.1/A)

達成のためのポイント

  1. 色だけでなく、テキストの情報を併記する。
  2. 色を用いた表現が直感的な理解につながる場合には、積極的に使用する。

解説

 色の違いだけに依存した情報を提供した場合、色の違いを認識できないとき、文書の内容を理解することが難しくなります。色を使って情報を提供する場合、テキストの情報も併記しましょう。

図15:色のみで情報を提供している例(左)と、改善例(右)

色のみで情報を提供しているため、色以外に説明を追加している。

赤色の背景色で警報、黄色の背景色で注意報を表現しています。「大雨」「洪水」の文字しかないため、音声読み上げソフトやモノクロプリンタなどでは色に依存した情報が損なわれてしまいます。
ただし、色の違いが分かる場合には、「赤」や「黄」が持っている注意喚起の意味や度合いを生かした効果的な表現と言えます。

9:ウェブコンテンツの音声は、音声読み上げソフトの音声を妨げない(7.1.4.2/A)

達成のためのポイント

  1. 音声を自動的に再生しない。

解説

 音声を自動的に再生した場合、その音と音声読み上げソフトの読み上げ音声が重なってしまい、理解を妨げてしまいます。また、音が鳴ることが好ましくない環境で使用している、又は音が鳴ることにより情報を読むことに集中できなくなることもあります。そのため、音声を自動的に再生することは避けてください。
 なお、警告などの目的で発せられる極短時間の音声については、許容されます。

10:文字色と背景色のコントラストを確保する(7.1.4.3/AA)

達成のためのポイント

  1. テキストの文字色は黒(#000000)から濃灰色(#333333)、背景色は白(#ffffff)から薄灰色(#cccccc)の無彩色を基本とする。
  2. 文字色及び背景色に有彩色を用いる場合やリンク文字色・強調など通常のテキストとは視覚的に異なる表現を用いる場合には、(1)と同等以上のコントラストを確保する。
  3. 文字及び背景に(単色ではない)画像を用いる場合、(1)と同等以上のコントラストを確保する。
  4. 文字周辺部には、色の変化が大きな背景画像を使用しない。
  5. 文字色と背景色のコントラストが確保できない場合には、文字周辺部の縁取りなど適切な処理を行なった画像を使用する。

解説

 JIS X8341-3(2010年)では、確保すべきコントラスト比を数値で定めていますが、本指針では、標準色を例示することにより当該要件への対応を図ります。原則として、通常のテキストの文字色を、#000000から#333333の範囲、背景色を、#ffffffから#ccccccの範囲にある無彩色(白と黒を混ぜて得られる色)とします。
 なお、それら以外の文字色及び背景色を用いる場合には、JIS X8341-3(2010年)に規定するコントラスト比(4.5対1)を遵守してください。画像化された文字や背景画像を用いる場合についても、できる限り同等のコントラストを確保しましょう。

図16:標準色の組み合わせ例

テキストの文字色は黒(#000000)から濃灰色(#333333)、背景色は白(#ffffff)から薄灰色(#cccccc)

図17:画像化された文字のコントラスト確保例

鷲羽山からの眺望という文字が入っている、瀬戸大橋の写真。

同じ写真に、同じ文字色を用い、文字周辺のみ加工を施しています。
文字だけでは、写真と色が重なってしまう部分があり読みにくくなってしまいます(左)が、文字周辺の縁取りをしたり(中央)、背景へ色の帯を置いたり(右)することにより十分なコントラストが確保され文字が読みやすくなっています。

11:文字サイズを変更可能にする(7.1.4.4/AA)

達成のためのポイント

  1. 文字サイズを指定する際は、絶対指定(px、pt)ではなく、相対指定(em、%、キーワード(small、large等))を用いる。
  2. ウェブページ上に文字サイズを変更(200%に拡大)できる仕組みを提供する。
  3. 文字サイズを200%まで拡大しても、すべてのコンテンツ・機能がスクロールにより表示されるように設計する。

解説

 弱視の利用者や高齢者にとっては、通常の文字サイズのままでは小さく読みづらいと感じることがあるかも知れません。そのため、利用者が読みやすいと感じる文字サイズに自由に変更できる必要があります。
 多くのウェブブラウザには、文字サイズを変更する機能が備わっていますが、ウェブページ上にその様な仕組みを提供することにより、より簡単な操作で快適な閲覧環境を得ることができるようになります。
 その際、文字サイズが変わったことによって特定の情報が失われてしまうことのないように注意が必要です。

図18:ウェブページに備えられた文字サイズを変更できる仕組み

ホームページに文字の大きさを調整するボタンを設定。

12:必要不可欠な場合を除いて、画像化された文字を使用しない(7.1.4.5/AA)

達成のためのポイント

  1. 主たるコンテンツは、写真・グラフなど視覚的な表現が求められる場合を除いて、テキストで表現する。
  2. 画像化された文字を用いる場合には、記号的に用いる場合を除いて、14ポイント以上の大きさを確保する。

解説

 テキスト情報であれば、文字の拡大や色の変更など利用者にとって読みやすい表示に変更できますが、画像化された文字では、それができません。そのため、必要不可欠な場合を除いて画像化された文字は用いないようにします。

図19:必要不可欠と認められる画像化された文字の例

県章及びロゴ画像と岡山太郎のサイン。

県章及びロゴタイプという視覚的表現は、そのロゴのアイデンティティとして不可欠です。また、サイン(署名)は、書き手の特定、又は本人の意思を示したものでありテキストで同様の文字列が掲載されている場合とは異なる意味を持っているため必要です。

13:キーボード操作だけで、すべての情報・機能が利用できるように作成する(7.2.1.1/A、7.2.1.2/A)

達成のためのポイント

  1. リンクを設定する際は、a要素のhref属性を用いる。
  2. 入力フォームを用いる際は、button、fieldset、legend、select、option、textarea要素、input要素のtype = "button" 、type ="submit"、type ="reset"、type = "image"、type = "text"、type = "password"、type="checkbox、type="radio"属性のみを用いる。
  3. HTML以外のウェブコンテンツ技術で入力フォームを実現する場合には、そのウェブコンテンツ技術が持つ標準的かつアクセシブルな部品を用いる。

解説

 目と手を一緒に使うマウスは、全盲の視覚障害者には使用することができません。そのため、マウスを使うことなく、キーボード操作だけですべての情報や機能を利用できるようにすることが必要です。
 また、画面上のポインタ(マウスカーソル)を見つけたり、目で追ったりするのが困難な利用者や、手が震えたり、手の可動範囲に制限がある利用者についても同様です。
 入力フォームを作成する際、HTMLによる場合は、入力フォームを構成する部品及びリンクを適切に記述することが必要ですが、FLASH及びスクリプト等で入力フォームを生成する場合も同様です。
 なお、画面上に絵を描くなどマウスの軌跡(移動方向や移動速度)に依存している機能については、キーボードで同様の表現をすることができないため例外とします。

14:コンテンツの利用には、原則として時間制限を設けない(7.2.2.1/A)

達成のためのポイント

  1. コンテンツの閲覧時間・操作可能時間には、原則として制限を設けない。ただし、イベントや施設利用の申込など情報の性質上、制限時間を設定する場合を除く。
  2. コンテンツの閲覧時間・操作可能時間に制限を設ける場合には、利用者の操作によってその制限時間を延長することができるようにする。

解説

 ウェブコンテンツを利用するためにかかる時間は、その利用者の機器や身体的な特性によって大きく異なります。制限時間を設けることにより想定する作業を完了できない、又は意図しない申込をしてしまうなど、様々な不都合が生じる可能性があります。そのため、期日が定まっているイベントや施設利用申込など制限時間を設定することがやむを得ない場合を除いて、コンテンツの利用には時間制限を設けないようにウェブコンテンツを設計しましょう。
 また、セキュリティ確保の都合などでコンテンツの利用に時間制限を設ける場合には、利用者自身の操作によって、それを延長できるようにすることが必要です。

15:コンテンツを動かしたり、自動更新させたりしない(7.2.2.2/A)

達成のためのポイント

  1. 画像を点滅させない。ただし、第三者から提供される画像等で使用することがやむを得ない場合を除く。
  2. 画像のアニメーションは、5秒以内で終了させる。また、アニメーション停止後も、画像の意味が伝わるよう表現を工夫する。
  3. FLASH、Java、Javascriptなどでアニメーション・スライドショーを行なう場合には、分かりやすい場所に一時停止ボタンを設置する。
  4. 画面の一部・全部を問わず自動スクロールを行わない。
  5. 一定時間経過後であるか、瞬時であるかを問わず、コンテンツの自動更新を行わない。

解説

 画像が点滅する、又は文字や画面の一部が移動することにより、その情報を読み取れない、又は変化に追いつくことができず思い通りの操作ができなくなる可能性があります。
 また、コンテンツが自動的に更新されると、それまでの情報を把握する前に新たな情報に置き換わってしまい、コンテンツを理解することが難しくなってしまいます。
 そのため、コンテンツを動かすことはできるだけ避けましょう。アニメーション・スライドショーを行なう場合には、容易に停止させることができるような配慮が必要です。

図20:(好ましくない例)テキストのスクロール(移動)

お知らせの内容が、右から左に移動している

「お知らせ」の内容が、右から左に移動しているため、情報を追うことが難しくなる可能性がある。

16:閃光を放つコンテンツは、閃光の回数・大きさ・色彩を調整する(7.2.3.1/A)

達成のためのポイント

  1. 閃光を放つコンテンツは、原則として公開しない。
  2. 閃光を放つコンテンツを公開する場合、閃光は1秒間に3回以下であるものに限る。

解説

 光過敏性発作の疾患のある利用者は、数回以上の閃光があり一定の周期で閃光を放つコンテンツによって発作を引き起こされる恐れがあります。情報が得られないということだけではなく、身体の安全に関わる事象ですので十分な配慮が必要です。閃光を放つコンテンツは、閃光を放つ部分を失うことにより情報の本質が損なわれたり、表現として不足したりする場合に限り公開できるものとします。アニメーション画像及び映像コンテンツが対象となりますが、全てのシーンを漏れなく確認しましょう。
 また、やむを得ず閃光を放つ箇所を含むコンテンツを公開する場合には、閃光がどの1秒間においても3回以下になるように対象コンテンツを編集することが必要となります。

17:複数のページで繰り返されるコンテンツは、読み飛ばせる仕組みを提供する(7.2.4.1/A)

達成のためのポイント

  1. 各ページの先頭に、そのページの主たるコンテンツへのリンクを画面に表示させる。ただし、容易に見つけることができない画像を用いる、又はCSSを無効にした場合のみ表示される方法は避ける。

解説

 サイトロゴ、主要なカテゴリへのリンク、検索機能など複数のページで繰り返されるコンテンツは、サイトの使い勝手を高める上で有効なため設置されることが望ましい。しかしながら、キーボードを使用して一つ一つの項目を順に操作する利用者には、ウェブページの情報そのものにたどり着くまで必要以上に多くの操作を強いることになってしまいます。見出し(h1~h6要素)に移動する機能を備えたソフトの場合には、達成基準「5.文書の構造は、適切なHTML要素を用いて記述する」を満たすことにより、読み飛ばすのと同等の機能を有することになります。また、そのような機能を備えていないソフトに対しても、読み飛ばせる仕組みを用意することが必要です。
 なお、JIS X 8341-3(2004年)附属書1に例示されていた透明のGIF画像の使用については、キーボードだけで操作している肢体不自由の利用者にとっては有用とは言えないため、視覚的に確認できるようにすることが必要です。

図21:「本文へ」というリンクによって、主たるコンテンツへのリンクを提供している例

ホームページ上部に、本文へジャンプするリンクを設定する。

「本文へ」が表示されていることにより音声読み上げソフトの利用者以外にも有用なものとなっています。

18:分かりやすいタイトルをつける(7.2.4.2/A)

達成のためのポイント

  1. 各ページのtitle要素には、サイトの構成情報及びページの主題を記述する。
  2. 各ページのtitle要素は、他ページと同一の文字列にしない。
  3. 各ページのtitleは、先頭から15文字以内で他ページとの判別ができるよう工夫する。

解説

 タイトル(HTMLにおけるtitle要素)は、図22に示す部分で表示され、情報取得の手がかりとして役立ちます。そのため、タイトルがページの内容を適切に表していない、又は複数のページで同じタイトルがつけられている場合、目的のページを探し出しにくくなります。
 また、タイトルが表示される部分には、図23のとおり一定の文字数以上は表示されない場合がありますので、表示される部分だけでページの識別ができるようにしましょう。

図22:タイトル表示箇所例

ウェブブラウザのタイトルバーと検索結果のリンクテキストとブックマークのラベルにタイトルが表示されています。

ウェブブラウザのタイトルバー(A)、検索結果のリンクテキスト(B)、ブックマークのラベル(C)などにtitle要素の内容が表示されます。

図23:ブックマーク登録時のタイトル表示例

タイトル表示例

タイトルが長い場合、最後まで表示されない場合がある。

19:ウェブコンテンツの意味の順序とフォーカス の順序を一致させる(7.2.4.3/A)

達成のためのポイント

  1. 文書の内容や構造を無視した表示位置の指定をしない。
  2. 入力フォームには、tabindex属性を適切に使用し、意味を理解しやすい移動順になるよう設定する。

解説

 キーボードで操作している利用者が、コンテンツ内を一つずつ順を追いながら行き来する場合、フォーカスはHTMLが記述された順序若しくはHTMLで指定された順序でリンクや入力フォーム内を移動します。そのため、利用者が想定するウェブコンテンツの意味の順序とフォーカスの順序が異なっている場合、文書の内容を理解することが難しくなります。

20:リンク先を予測できるリンクテキストをつける(7.2.4.4/A)

達成のためのポイント

  1. リンクテキストだけでリンク先が予測できるように、リンク先の見出し要素等の文字列をリンクテキストとする。
  2. 画像によるリンクの場合には、リンク先の内容をalt属性として明示する。
  3. 同一ページ内にリンク先の異なる複数の同一リンクテキストを用いない。
  4. 「こちら」「詳細」などの曖昧なリンクテキストを用いる場合には、前後の文脈からリンク先の内容が予測できるように配慮する。
  5. リンクの目的が、PDF等のダウンロードである場合、ファイル形式及びファイルサイズをリンクテキストに含む、又は前後の文脈から容易に判断できるように配慮する。

解説

 リンクテキストの内容は、リンク先の内容を予測するために重要な情報です。リンクテキストの内容が不明確である、又はリンク先の内容と異なっていると利用者が混乱してしまう可能性があります。
 「動画」、「ブロードバンド用」、「PDF」、「こちら」、「詳細」、「click」など、リンクテキストだけではリンク先を予測することができない曖昧なリンクテキストを採用する場合には、リンク先の内容を容易に理解できる説明を前後に付加することが必要です。

図24:適切なリンクテキストの例

ふるさと岡山応援寄附金(ふるさと納税)のご案内

「ふるさと岡山応援寄附金(ふるさと納税)のご案内」という具体的なリンクテキストであり、かつ、リンク先の見出し要素(h1)と一致しているため、混乱が生じにくくなります。

図25:曖昧なリンクテキストだが、直前の説明からリンク先が想像できる例(1)

2010年11月24日、平成23年度用のももっち年賀状データを作成しました。その下に「詳しくはこちらをご覧ください。」のリンク 2010年6月10日、平成21年度の寄附金受入金額は2,036,324円でした。その下に「詳しくはこちらをご覧ください。」のリンク

図26:曖昧なリンクテキストだが、直前の説明からリンク先が想像できる例(2)

平成23年度当初予算について(Windows Media)、県立児童会館閉館後の利活用について(Windows Media)、岡山テルサについて(Windows Media)

図25・26はいずれも、リンク先の内容を表しているとは言えないリンクテキストが並んでいますが、直前の内容を読むことによりリンク先の内容を判別することができます。また、図27のように改めると、より分かりやすいものになります。

図27:曖昧なリンクの改善例

平成23年度用のももっち年賀状データ、ふるさと岡山応援寄附金の受入実績

前後の文脈に頼らなくても、リンクテキストだけでリンク先の内容が想像できます。

21:一つのコンテンツに対して、複数の到達手段を提供する(7.2.4.5/AA)

達成のためのポイント

  1. ウェブサイトにおける主要な分類から到達できるようにする。
  2. サイトマップを提供する。
  3. サイト内検索の機能を提供する。

解説

 一つのコンテンツへの到達手段が、「主要分類」、「サイトマップ」、「サイト内検索」のうち1つの到達手段しか提供されていないと、その到達手段を見つけることができない場合目的のコンテンツにたどり着けなくなってしまいます。
 そのため、「主要分類」、「サイトマップ」、「サイト内検索」のうち2つ以上の到達手段を提供し利用者にとって使いやすい到達手段を選択できるようにしましょう。

図28:複数の到達手段のイメージ

主要分類、サイトマップ、サイト内検索など複数の手段があれば、目的のページにアクセスしやすくなります。

22:分かりやすい見出しやラベルをつける(7.2.4.6/AA)

達成のためのポイント

  1. 見出しは、見出し要素(h1、h2、h3、h4、h5、h6)を用いて表現する。
  2. 見出しだけで、内容が理解できるようにページを作成する。
  3. 入力フォームを構成する部品は、label要素等を用いて、内容が理解できるように記述する。

解説

 達成基準「5.文書の構造は、適切なHTML要素を用いて記述する」では、見出し部分には、見出しの要素を用いることなど文書の構造を適切に記述することを求めています。そのことに加えて、この達成基準では、より内容を理解しやすくするために、意味のまとまりを考え、分かりやすい見出しやラベルをつけることが重要になります。
 見出しを読むだけで、その見出し以下にどんな内容が記されているか分かるような見出しを作成すると、すぐに大まかな内容を理解できるため、効率的な情報検索ができるようになります。

23:フォーカスされている項目が視覚的に認識できるようにする(7.2.4.7/AA)

達成のためのポイント

  1. リンクにフォーカスされた時、背景やボーダー(枠線)等に視覚的な変化が起こるようにする。
  2. 入力フォームを構成する部品にフォーカスされた時、背景やボーダー(枠線)等に視覚的な変化が起こるようにする。

解説

 フォーカスされている項目が視覚的に認識できるようになっていない場合、どこが操作対象か分からなくなります。その結果、思い通りの操作ができない、又は今、何を入力すべきなのか分からなくなることがあります。そのため、フォーカスされている項目に対して、視覚的な変化を起こさせることにより、何が操作対象であるか理解しやすくする必要があります。

図29:フォーカスされている項目が視覚的に認識できる例

検索ボックスの例

検索キーワードの入力欄にフォーカスが当たると、「|」が点滅する。

24:現在位置を示す(7.2.4.8/AAA)

達成のためのポイント

  1. ウェブサイトの階層構造を示す「パンくずリスト」を提供する。
  2. サイトマップを提供する。
  3. ナビゲーション内で現在位置を示す。

解説

 ウェブサイトは、多くのウェブページ等を含み複雑な構成になっています。そのため、現在閲覧しているページがウェブサイトのどこに位置しているのかを知ることは、効率的な情報収集には欠かせません。
 階層構造に関する情報と上位階層へのリンク機能を有する「パンくずリスト」、サイト全体の構成・構造を見渡すことができる「サイトマップ」のほか、ナビゲーション内で現在位置を示す必要があります。

図30:現在地を示す仕組みの例

「ホーム、分野で探す、くらし・環境・観光、食生活・消費生活、食育」とパンくずリストを設定している。

「食育」のページが、「くらし・環境・観光」に属していることや、上位階層が「食生活・消費生活」であることが示されています。

25:言語を指定する(7.3.1.1/A、7.3.1.2/AA)

達成のためのポイント

  1. 各ページのhtml要素に、適切なlang属性(もしくはxml:lang属性)を記述する。(日本語の場合、)
  2. ページの途中で使用する言語が変わる場合には、変わった箇所で適切なlang属性を記述する。

解説

 ウェブサイトは国・言語を問わず、共通の仕様・規格に基づいて制作されています。そのため、そのウェブサイト若しくはウェブコンテンツの一部が、どの言語によって記述されているかを明確に示す必要があります。言語が明確ではない場合、音声読み上げソフトが正しい発音で読み上げない等の問題が生じる可能性があります。
 また、ウェブページごとに適切な言語を指定するだけでなく、途中で言語が変わる際にもその都度適切に言語を指定しましょう。
 HTMLにおいては、html要素のlang属性を用いて言語を指定します。

26:分かりやすい言葉・表現を使用する(7.3.1.3/AAA、7.3.1.4/AAA、7.3.1.5/AAA、7.3.1.6/AAA)

達成のためのポイント

  1. 慣用句・専門用語・行政用語など一般的ではない言葉は、できる限り説明を付加するように心がける。
  2. 略語には、できる限り正式名称を付加するように心がける。
  3. 理解の難しい内容や複雑な文章には、イラストによる図解を付加する、又は文章をより読みやすくすることを心がける。
  4. 難読地名・人名など読みの難しい言葉は、できる限り読みがなを付加するよう心がける。
  5. 添付ファイルのみのページを作成しない。
  6. 機種依存文字(図31)を使用しない。

解説

 年齢・知識・経験の異なる利用者が、一つのウェブサイトを利用します。そのため、それらに関係なく利用者の多くが理解しやすくなるような分かりやすい言葉・分かりやすい表現を使用しましょう。音声読み上げソフトなどで誤読を生じさせないように次のような配慮が必要です。

日付・曜日を記述する場合、「2011年4月1日(金曜日)」のように標準的な表記にしてください。時刻を記述する場合、「午後3時10分、15時10分」のように標準的な表記にしてください。注釈を記述する場合、「注記1、注1」のように標準的な表記にしてください。英単語を記述する場合、「(新規)掲載、更新」のように標準的な表記にしてください。

 また、PDF、Excel等の添付ファイルへのリンクのみで構成されるページは、それらを利用できない利用者には何の情報も得られず、分かりにくいページとなってしまいます。テキストによる情報提供をできる限り行なうことが望ましいですが、少なくとも、添付ファイルの内容に関する説明(概要)を記すことが必要です。
 丸数字やローマ数字等のいわゆる「機種依存文字」については、閲覧する環境によって、意味が変わってしまう、又は情報が損なわれるため使用しないでください。

図31:機種依存文字の例

まるいち、まるに、まるさん、ローマ数字のいち、に、さん、株式会社の略字、組文字のキロメートル、アール、ヘクタール、平方ミリメートル、平方センチメートル

27:フォーカスを受け取った時に、状況を変化させない(7.3.2.1/A)

達成のためのポイント

  1. ページを開いた際、ポップアップなど別のウィンドウを開かない。
  2. 新しいウィンドウを開く際には、事前に通知をする。

解説

 フォーカスを受け取った時に、状況の変化(ウェブコンテンツの配置が大きく変化、新しいページへの移動など)を引き起こしてはならない。特に、ウェブページ全体を一度に見ることのできない利用者にとって、何が起きたのかが理解できず、次にすべき行動も把握できない可能性が高くなります。

28:ボタン等を操作した時に限り、状況を変化させる(7.3.2.2/A)

達成のためのポイント

  1. 「実行」、「選択」などを利用者が操作しない限り、状況を変化させない。
  2. 状況の変化を引き起こす入力フォームを構成する部品は、事前に変化の内容を通知する。

解説

 「実行」ボタンを伴わないプルダウンメニューは、キーボードで操作をする場合、項目を選択している最中にページ移動が実行されてしまうため、意図通りの項目を選択することが難しくなります。
 また、入力フォームに特定の値を入力した途端、他の入力項目に変化が生じる、又は別の画面に移動してしまうと、利用者は、その変化に対応できなくなってしまいます。そのような状況の変化を引き起こす場合には、状況の変化を引き起こす条件や結果について事前に知らせておくことが必要です。

29:共通するナビゲーションを提供する(7.3.2.3/AA)

達成のためのポイント

  1. ウェブサイト内のすべてのページに、共通するナビゲーションを提供する。
  2. 共通するナビゲーションには、サイトロゴ、主要なカテゴリへのリンク、検索機能、「パンくずリスト」及び達成基準17に示すリンクを含む。

解説

 ナビゲーションの機能・配置・見た目を統一することにより、利用者はウェブサイトの使い方を理解しやすくなり、円滑なサイト利用を期待することができます。また、ナビゲーション部分、コンテンツ部分が明確に区別できることにより情報を探すことに集中しやすくなります。

図32:共通するナビゲーションの例

トップページへのリンク・分野別リンク・検索ボックス等を各ページに共通で表示し、見た目を統一している。

30:同じ機能・内容をもつウェブコンテンツには、一貫した名称を用いる(7.3.2.4/AA)

達成のためのポイント

  1. ウェブサイトの入口となるページのラベルは「ホーム」、「トップページ」などを一貫して用いる。
  2. 同じ機能を持つリンクには、一貫したリンクテキストを用いる。
  3. 同じ機能をもつ画像(リンクボタンやアイコン)には、一貫したalt属性を付与する。

解説

 同じ内容や機能を有しているにもかかわらず、ページによって見た目や名称が異なっている場合、利用者は、それが同じ内容や機能であるかを判断できなくなる可能性があります。ウェブサイト全体で、機能ごとに一貫した名称を用いるようにしましょう。

図33:(好ましくない例)http://www.pref.okayama.jp/へのリンクが一貫していない例

「岡山県」、「岡山県ホーム」、「ホーム」と表現がバラバラになっている。

図34:(好ましくない例)ページ上部へのリンクが一貫していない例

「このページのトップに戻る」、「TOP」、「ページのいちばん上へ」と表現がバラバラになっている。

31:入力フォームの入力条件やエラー内容は、テキストで明確に示す(7.3.3.1/A、7.3.3.2/A、7.3.3.3/AA、7.3.3.4/AA、7.3.3.6/AAA)

達成のためのポイント

  1. 入力フォームの入力欄には、できる限り条件を設けない。
  2. 入力条件を設ける場合には、明確にテキストで説明する。
  3. 入力内容にエラーがある場合には、エラーの箇所をテキストで示し修正内容を提示する。
  4. 情報を送信する前に、入力内容を確認・修正をする仕組みを提供する。

解説

 入力フォームに入力された内容にエラーがあった場合には、エラーの箇所やエラーの理由、修正方法をテキストで明確に説明しましょう。
 利用者は、「エラー」とだけ表示されても、なぜエラーになったのか理解できない場合があるかもしれません。また、入力欄とエラー表示箇所が離れている、又はエラー箇所が色だけで表現されている場合、エラー箇所の特定が難しくなり目的を達成できなくなってしまいます。
 更に、エラー内容を明確に説明していても、エラーが出てしまうこと自体にあせってしまう利用者もいます。全角・半角の指定などプログラムで解決できる可能性があるものについては、できる限り条件を設けないといった方法も有効です。

図35:入力フォーム入力におけるエラー表示等の例

入力フォーム入力におけるエラー表示の好ましくない例と好ましい例の図。

上の図では、「番地」の入力において、全角文字での入力を求めていますが、半角文字を入力しているためエラーとなりました。「エラーです。」としか示されていないため、利用者は、なぜエラーになったのか理解できない可能性があります。
真ん中の図は、左の図同様の条件ですが、エラーの内容を明確に示していますので、利用者は、全角文字で入力すればいいことが分かります。
右の図は、全角・半角を指定していないため、利用者は全角・半角を問わず自由に入力することができます。
この場合、右の図が最も好ましい例となります。

図36:入力フォーム入力における標準的な画面遷移

フォーム入力画面、エラー修正画面、入力内容確認画面、入力内容修正画面、入力完了画面

入力内容を確認・修正する仕組みを必ず提供しましょう。

32:ウェブコンテンツ技術の仕様に準拠する(7.4.1.1/A、7.4.1.2/A)

達成のためのポイント

  1. 関連する文法、技術の規格や仕様の実用的な最新版を採用する。
  2. 1.に基づいて採用したウェブコンテンツ技術の仕様に準拠する。

解説

 音声読み上げソフトなど支援技術の多くは、ウェブコンテンツ技術の仕様に基づいて設計・開発されています。そのため、ウェブコンテンツ技術の仕様に準拠したウェブコンテンツを作成することにより支援技術が正しく動作する可能性が高まります。
 作成したウェブコンテンツがウェブコンテンツ技術に則って作成されているかは、下記のツールを用いて検証することができます。

 また、ウェブコンテンツ技術やそれに基づいて開発される支援技術・機器等は、日々、進化しています。より多くのウェブコンテンツの利用が可能になる、又は新たな機能が生まれることもあります。それらに十分対応していくためには、関連する文法、技術の規格・仕様の最新版を採用していくことが必要です。
 ただし、最新版の普及が進んでいない場合や修正版の配布が待たれる状態など、その最新版が実用的な段階に達しているかを十分に考慮する必要があります。

33:一般的なルールや法規を遵守する(JIS X8341-3(2010年)規定なし)

達成のためのポイント

  1. リンク切れがないか十分に確認する
  2. リンク先ページの内容に注意を払う
  3. 適切な「引用」を行う
  4. 個人が特定できる情報(画像を含む)を掲載しない

解説

 JIS X8341-3(2010年)には規定されていませんが、ウェブサイトには、品質を保つ上でルールがあります。
 ウェブサイトはウェブページ同士の相互リンクによって成り立っています。そのため、リンク切れがある場合、利用者は必要な情報を得られなくなってしまいます。岡山県ウェブサイト以外へのリンク(外部リンク)も多数存在していますので、リンク先が存在しているか(リンク切れを起こしていないか)を定期的に確認するようにしましょう。
 また、リンク設定後にリンク先の内容が公序良俗に反する情報、虚偽の情報などに変更されている可能性もありますので注意しましょう。
 ウェブサイトでは、岡山県以外が著作権を有する著作物を扱うことがあります。その場合には、出典を明記する、引用部分とそれ以外の主従関係を明確にする(引用部分の方が、文章量が少ない)など著作権法における正当な「引用」となるよう注意しましょう。フレーム内のリンクなど作成者が不明確になる表示方法を行わないでください。
 なお、岡山県が著作権を有する場合でも、個人が特定可能な人物の画像を本人の許可なく公開すると肖像権の侵害に当たるとされていますので注意が必要です。

  • 岡山県個人情報保護条例(岡山県条例第三号)

第8:試験実施方法

JIS X 8341-3(2010年) の箇条8「試験方法」に基づく試験を行う際は、情報通信アクセス協議会・ウェブアクセシビリティ基盤委員会作成の「JIS X 8341-3(2010年) 試験実施ガイドライン」の最新版に基づいて行ってください。

「実装チェックリスト」及び「達成基準チェックリスト」は、本指針の付属資料を使用してください。
附則
本指針は、平成23年4月1日から施行する。

意見をお聞かせください

このページがお役にたちましたら、下のいいねボタンを押してください。


トップページ 組織で探す 県民生活部 情報政策課 岡山県ウェブコンテンツ作成指針(HTML)