本書の位置づけと適用対象本書の位置づけ岩手県ホームページは提供する情報やサービスを高齢者や障がい者を含めた誰もが支障なく利用できるようウェブアクセシビリティに十分配慮しなければならない 2004 年 6 月にウェブアクセシビリティの規格 JIS X :2004 高齢者障害者等配

Size: px

Start display at page:

Download "本書の位置づけと適用対象本書の位置づけ岩手県ホームページは提供する情報やサービスを高齢者や障がい者を含めた誰もが支障なく利用できるようウェブアクセシビリティに十分配慮しなければならない 2004 年 6 月にウェブアクセシビリティの規格 JIS X :2004 高齢者障害者等配"

ゆあうえや
6 years ago
Views:

1 参考資料 2 岩手県ホームページウェブアクセシビリティ対応基準書平成 29 年 4 月岩手県秘書広報室広聴広報課本書内容の複製転載目的外利用を禁じます

2 本書の位置づけと適用対象本書の位置づけ岩手県ホームページは提供する情報やサービスを高齢者や障がい者を含めた誰もが支障なく利用できるようウェブアクセシビリティに十分配慮しなければならない 2004 年 6 月にウェブアクセシビリティの規格 JIS X :2004 高齢者障害者等配慮設計指針 - 情報通信における機器, ソフトウェア及びサービス- 第 3 部 : ウェブコンテンツが制定されその後ホームページの制作技術の変化等を踏まえた2 度の改正が行われ 2016 年 3 月に JIS X :2016 として公示された岩手県ホームページは JIS X :2016 に示された内容に基づいてホームページを作成する岩手県ホームページウェブアクセシビリティ対応基準書 ( 以下本書 ) は JIS X :2016 の 61 の達成基準のうち岩手県が対応するものについて作成の基準を定めたものである適用対象本書は 2017 年度時点で CMS で作成されている全てのページ及び今後 CMS 作成する全てのページに適用する達成方法について本書は情報通信アクセス協議会ウェブアクセシビリティ基盤委員会 WCAG2.0 解説書 WCAG2.0 実装方法集に基づき構築において採用すべき達成方法を示している岩手県ホームページの構築は本書が示す実装方法により実施するなお WCAG2.0 解説書には JIS X :2016 の各達成基準を実現するための達成方法について本書で採用した以外の方法も説明されている本書が示す達成方法では対応できないコンテンツがある場合には WCAG2.0 解説書に示された方法から達成方法を追加することができる達成方法を追加する場合は岩手県に事前に相談の上で行う参照すべき規格及び文書 JIS X :2016 WCAG2.0 解説書 ( WCAG2.0 実装方法集 ( 本書内容の複製転載目的外利用を禁じます 1

3 目次本書の位置づけと適用対象... 1 目次基本要件構築に用いる技術対応ブラウザウェブアクセシビリティ対応基準... 6 達成基準非テキストコンテンツ... 6 達成基準音声のみ及び映像のみ ( 収録済 ) : 達成基準キャプション ( 収録済 ) 達成基準音声解説又はメディアに対する代替 ( 収録済 ) 達成基準キャプション ( ライブ ) 達成基準音声解説 ( 収録済 ) 達成基準情報及び関係性達成基準意味のある順序達成基準感覚的な特徴達成基準色の使用達成基準音声の制御達成基準コントラスト ( 最低限 ) 達成基準テキストのサイズ変更達成基準文字画像達成基準キーボード達成基準キーボードトラップなし達成基準キーボード ( 例外なし ) 達成基準タイミング調整可能達成基準一時停止停止及び非表示達成基準タイミング非依存達成基準割り込み達成基準回の閃光又は閾値以下達成基準回の閃光達成基準ブロックスキップ達成基準ページタイトル達成基準フォーカス順序達成基準リンクの目的 ( コンテキスト内 ) 本書内容の複製転載目的外利用を禁じます 2

4 達成基準複数の手段達成基準見出し及びラベル達成基準フォーカスの可視化達成基準現在位置達成基準リンクの目的 ( リンクのみ ) 達成基準セクション見出し達成基準ページの言語達成基準一部分の言語達成基準一般的ではない用語達成基準略語達成基準読解レベル達成基準発音達成基準フォーカス時達成基準入力時達成基準一貫したナビゲーション達成基準一貫した識別性達成基準要求による変化達成基準エラーの特定達成基準ラベル又は説明達成基準エラー修正の提案達成基準エラー回避 ( 法的金融データ ) 達成基準ヘルプ達成基準エラー回避 ( すべて ) 達成基準構文解析達成基準名前 (name) 役割(role) 及び値(value) 本書内容の複製転載目的外利用を禁じます 3

5 1. 基本要件 1.1 構築に用いる技術ウェブコンテンツ制作技術として以下を採用する全てのコンテンツはこれらの技術の仕様に則って制作を行う制作技術 HTML CSS バージョン XHTML 1.0 Transitional CSS2.1 HTML については納品前に以下のサービスを利用し This document was successfully checked as XHTML 1.0 Transitional! が表示されることを確認する ( Error の場合は不可とする ) W3C Markup Validation Service( CSS については納品前に以下のサービスを利用しおめでとうございます! エラーはありませんが表示されること確認する ( エラーが表示される場合は不可とする ) W3C CSS Validation Service( 本書内容の複製転載目的外利用を禁じます 4

6 1.2 対応ブラウザ以下のブラウザで概ね同じ表示がなされるよう作成する Win Internet Explorer 11 Win Internet Explorer 10 Win Internet Explorer 9 Win Internet Explorer 8 Win Internet Explorer 7 Win Internet Explorer 6 Win Firefox 最新版 Win Opera 最新版 Win Google Chrome 最新版 Win Safari 最新版 Mac Firefox 最新版 Mac Opera 最新版 Mac Safari 最新版以下のブラウザで情報の内容が読み取れないほど表示が崩れる ( 文字が重なるなど ) ことがないように作成する ( スタイルシートを読み込ませない設計も可とする ) Win Netscape 4.x Mac Internet Explorer 5.x 以下の音声読み上げソフトで内容に過不足無く読み上げの順序と意味の順序に整合性が取れていることを確認する IBM ホームページリーダー Windows 版 3.04 PC-Talker 最新版 NVDA 最新版リードスピーカー Enterprise( 岩手県ホームページで導入しているもの ) 本書内容の複製転載目的外利用を禁じます 5

7 2. ウェブアクセシビリティ対応基準達成基準非テキストコンテンツ適合レベル :A テキスト以外の情報について以下の方法で代替する画像画像を提供する場合の原則全ての画像には必ず alt 属性を指定する例 ) <img src="images/logo.gif" width="191" height="79" alt="( 画像の説明 ) > 短い説明で代替が可能な画像の場合利用者にとって情報として意味を持った画像は情報の内容を alt 属性として指定する例 ) テキストを画像化したものにはそのテキストの内容を指定例 ) マークで意味を伝えているリンクボタンなどにはマークが伝えている内容 ( 例えば索引など ) を指定 G94: 非テキストコンテンツに対してそれと同じ目的を果たし同じ情報を提供する簡潔な代替テキストを提供する G95: 非テキストコンテンツの簡単な説明を提供する簡潔な代替テキストを提供する H37: img 要素の alt 属性を用いる (HTML) 複雑な説明が必要な画像の場合複雑な説明が必要な画像の場合は簡潔な名称や説明のみを alt 属性で指定し完全本書内容の複製転載目的外利用を禁じます 6

8 な説明はページ本文内にテキストで配置する例 ) グラフ画像地図画像長い文章や表を画像化したものフローやチャートを表した画像など G74: 短い説明の中で長い説明のある場所を示して非テキストコンテンツの近くにあるテキストで長い説明を提供する H37: img 要素の alt 属性を用いる (HTML) 情報として意味のない画像の場合情報として意味のない画像は alt= と指定する ( ダブルコーテーションの中に何も書かない ) あるいは CSS から画像を読み込み表示する例 ) 配置を制御するための透明な画像雰囲気を表現しただけで特にテキスト化して伝える意味がない画像など H67: 支援技術が無視すべき画像の img 要素で alt 属性値を空にして title 属性を付与しない (HTML) C9: CSS を用いて装飾目的の画像を付加する (CSS) リンク画像リンク画像の alt 属性には利用者がリンク先のページの内容を想像できる言葉を指定する具体的には以下の点に注意するリンク先ページのページタイトル (title 要素 ) や大見出し (h1 要素 ) の内容などリンク先ページの内容を代表するような言葉を用いる画像だけにリンクが設定されている場合 alt="" とはしない同じページへ移動するリンク画像とリンクテキストを隣り合わせて掲載する場合は以下のとおりとするリンクテキストには利用者がリンク先のページの内容を想像できるような言葉本書内容の複製転載目的外利用を禁じます 7

9 を用いる両者を a 要素で括り一つのリンクとするリンク画像の alt 属性は alt= と指定する ( ダブルコーテーションの中に何も書かない ) HTML ではないファイルへのリンク別ドメインサイトにリンクする場合のリンク画像の alt 属性の指定方法については達成基準リンクの目的参照 H2: 隣り合った画像とテキストリンクを同じリンクの中に入れる (HTML) H37: img 要素の alt 属性を用いる (HTML) H30: a 要素のリンクの目的を説明するテキストリンクを提供する (HTML) <WCAG 2.0 に適合しない事例 > F89: 画像だけがリンクのコンテンツである際に img 要素の alt 属性値が空になっている送信 / 実行ボタンの画像 type 属性が image である input 要素において input 要素の alt 属性でボタンの機能を説明する例 ) <input type="image" name="submit" src="****.gif" alt=" 送信 " /> H36: 送信 / 実行ボタンとして用いる画像の alt 属性を使用する (HTML) 本書内容の複製転載目的外利用を禁じます 8

10 CSS を用いた画像表示 CSS を用いて画像を表示させる場合画像は重要な情報を伝えていないかまたは画像が表示されない場合も利用者に情報が伝わるようになっている H37: img 要素の alt 属性を用いる <WCAG 2.0 に適合しない事例 > F3:CSS を用いて重要な情報を伝える画像を表示させているマップ area 要素を使ってイメージマップを用意する場合はマップの画像に alt 属性を指定するとともに各 area 要素に対して利用者がリンク先ページの内容を想像できるような言葉を指定する H37: img 要素の alt 属性を用いる (HTML) H24: イメージマップの area 要素に代替テキストを提供する (HTML) 入力フォーム入力フォームは入力欄 ( 選択欄 ) とその名称 ( ラベル ) を label 要素を用いて指定する input type="checkbox" または input type="radio" の場合は label 要素は input の後に配置するキーワード検索機能の入力欄など名称 ( ラベル ) を表記することが視覚的なデザイン上適当でないと考えられる場合は title 属性を用いて名称 ( ラベル ) を指定する送信あるいは実行等のボタン画像に alt 属性を指定し適切な内容を記載する H44: label 要素を用いてテキストのラベルとフォームコントロールを関連付ける (HTML) 本書内容の複製転載目的外利用を禁じます 9

11 H65: label 要素を用いることができないとき title 属性を用いてフォームコントロールを特定する (HTML) H36: 送信 / 実行ボタンとして用いる画像の alt 属性を使用する (HTML) object 要素を用いる場合 object 要素を用いる場合は object 要素のボディに代替テキストを記述する例 ) <object classid=" <p> オブジェクトとその操作方法に関するテキストを書く </p> </object> H53: object 要素のボディに代替テキストを記述する (HTML) 本書内容の複製転載目的外利用を禁じます 10

12 達成基準音声のみ及び映像のみ ( 収録済 ) : 適合レベル :A 収録済の音声しか含まないコンテンツ音声で提供されている内容について同一ページ内にテキストを記述するかテキスト化したページを併せて用意しページへのリンクを記述する外部の配信サービスを活用して提供する場合も同等の対応を行う G158: 時間の経過に伴って変化するメディアの音声しか含まないコンテンツに対して代替コンテンツを提供する収録済の映像しか含まないコンテンツ映像で提供されている内容について同一ページ内にテキストを記述するかテキスト化したページを併せて用意しページへのリンクを記述する外部の配信サービスを活用して提供する場合も同等の対応を行う G159: 時間の経過に伴って変化するメディアの映像しか含まないコンテンツに対して代替コンテンツを提供する G166: 重要な映像コンテンツを説明する音声を提供する ( 参考 ) この達成基準の実装方法一覧 G158: 時間の経過に伴って変化するメディアの音声しか含まないコンテンツに対して代替コンテンツを提供する G159: 時間の経過に伴って変化するメディアの映像しか含まないコンテンツに対して代替コンテンツを提供する G166: 重要な映像コンテンツを説明する音声を提供する本書内容の複製転載目的外利用を禁じます 11

13 達成基準キャプション ( 収録済 ) 適合レベル :A 映像内の音声で提供されている内容についてキャプション ( 発話以外の重要な音声情報を含む字幕 ) を提供する外部の配信サービスを活用して提供する場合も同等の対応を行う G93: オープンキャプション ( 常に表示 ) を提供する G87: クローズドキャプションを提供する本書内容の複製転載目的外利用を禁じます 12

14 達成基準音声解説又はメディアに対する代替 ( 収録済 ) 適合レベル :A 映像で提供されている内容について以下のいずれかの対応を行う同一ページ内にテキストを記述するかテキスト化したページを併せて用意しページへのリンクを記述する動き登場人物シーンの変化画面上の文字に関する情報のうちコンテンツを理解する上で重要でかつ主音声では説明されていなかったり話されていない情報を音声解説で提供する外部の配信サービスを活用して提供する場合も同等の対応を行う G69: 時間の経過の伴い変化するメディアに対して代替コンテンツを提供する G58: 非テキストコンテンツのすぐ隣に時間の経過に伴って変化するメディアの代替へのリンクを置く G78: 音声ガイドを含んだ利用者が選択可能な副音声トラックを提供する本書内容の複製転載目的外利用を禁じます 13

15 達成基準キャプション ( ライブ ) 適合レベル :AA ライブ ( 生放送生中継 ) 映像内の音声で提供されている内容についてキャプション ( 発話以外の重要な音声情報を含む字幕 ) を提供する外部の配信サービスを活用して提供する場合も同等の対応を行う G9: ライブの同期したメディアに対してキャプションを作成する G93: オープンキャプション ( 常に表示 ) を提供する G87: クローズドキャプションを提供する本書内容の複製転載目的外利用を禁じます 14

16 達成基準音声解説 ( 収録済 ) 適合レベル :AA 映像で提供されている内容について動き登場人物シーンの変化画面上の文字に関する情報のうちコンテンツを理解する上で重要でかつ主音声では説明されていなかったり話されていない情報を音声解説で提供する外部の配信サービスを活用して提供する場合も同等の対応を行う G78: 音声ガイドを含んだ利用者が選択可能な副音声トラックを提供する本書内容の複製転載目的外利用を禁じます 15

17 達成基準情報及び関係性適合レベル :A 共通する原則配置や見映えは原則としてスタイルシートで指定する HTML の非推奨要素属性は使用しない G140: 情報と構造を表現から分離して異なる表現を可能にする G115: セマンティックな要素を用いて構造をマークアップするページ内の見出し文書内の見出しは見た目だけを見出し風にするのではなく見出しに相当する画像及びテキストに見出し要素 (h1~h6) を指定する H42: h1 要素 ~h6 要素を用いて見出しを特定する (HTML) ページ内の箇条書き文書内の箇条書きは見た目だけを箇条書き風にするのではなく HTML の箇条書きの要素 (ul ol dl) を指定する H48: リストに ol 要素 ul 要素 dl 要素を用いる (HTML) 表表を作成する場合はできる限りセルの結合は行わない具体的には以下のような対応を行う見出しセルが結合されている場合には以下のようにする (1) 対応するデータセルを適宜まとめて見出しセルの結合をなくす (2) そこで表を分割し各表の caption 要素には見出しセルの内容を記述する本書内容の複製転載目的外利用を禁じます 16

18 データセルが結合されている場合にはセルの結合を解除し各セルには同じ内容を記述する表の読み上げ順序に十分配慮し行と列の入れ替えなどが必要な場合は適宜行う表のセルの中に新たな別の表を作らない caption 要素で表題を指定する ( 表の直前に見出しがあり見出しの内容が標題を表しているような場合は指定しなくても良い ) 構成が複雑な表は summary 属性で表の構成や読み上げ順序を説明する (caption 要素で指定する内容と重複しないようにする ) 表内の見出しに相当するセルには th 要素を指定する 2 つ以上の行見出し及び ( または ) 列見出しのある複雑は表は id 属性及び headers 属性を用いてデータテーブルのデータセルを見出しセルと関連付ける上記以外の単純な表で見出しが行方向に対する見出しか列方向に対する見出しかあいまいな場合は表内の見出しに scope 属性を用い見出しとデータを関連付ける (1 行目や1 列目に見出しがある単純なテーブルの場合は th 要素が指定してあれば scope 属性による指定はなくても良い ) レイアウトに table 要素を用いる場合は caption 要素 summary 属性 th 要素などデータ表の構造を表す要素属性を使用しない H51: テーブルのマークアップを用いて表の情報を提示する (HTML) H39: caption 要素を用いてデータテーブルの表題とデータテーブルを関連付ける (HTML) H73: table 要素の summary 属性を用いてデータテーブルの概要を提供する (HTML) H63: scope 属性を用いてデータテーブルの見出しセルとデータセルを関連付ける (HTML) H43: id 属性及び headers 属性を用いてデータテーブルのデータセルを見出しセルと関連付ける (HTML) フォームフォームのラベルと対応するコントロール ( テキストボックスやラジオボタンなど ) を id 属性と label 要素内の for 属性により関連付けを行う input type="checkbox" または input type="radio" の場合は label 要素は input の後に本書内容の複製転載目的外利用を禁じます 17

19 配置する例 )<p> <input type= radio name= sex value= ma id= male > <label for= male > 男性 </label> <input type= radio name= sex value= fe id= female > <label for= female > 女性 </label> </p> キーワード検索のテキストボックスのようにラベルとなりうるテキストを画面に表示する必要が無い場合やラベルを表示することで混乱を引き起こしてしまう場合は title 属性を用いてコントロール ( テキストボックスやラジオボタンなど ) の名称あるいは役割を示す複数のコントロール ( テキストボックスやラジオボタンなど ) で構成されるフォームは fieldset 要素及び legend 要素を用いてグループを明示するセレクトメニューに含まれる選択肢について関連する選択肢としてグループ化すべきものがある場合 optgroup 要素を用いて select 要素内の option 要素をグループ化する H44: label 要素を用いてテキストのラベルとフォームコントロールを関連付ける (HTML) H65: label 要素を用いることができないとき title 属性を用いてフォームコントロールを特定する (HTML) H71: fieldset 要素及び legend 要素を用いてフォームコントロールのグループに関する説明を提供する (HTML) H85: optgroup 要素を用いて select 要素内の option 要素をグループ化する (HTML) 情報の強調を表現する場合スタイルシートを用いて赤色の太字にするなど視覚的に強調を表現する視覚的に強調を表現することに併せて em 要素あるいは strong 要素を用いて強調部分を指定する例 ) <p> この申込みの締め切りは <em>11 月 14 日 </em> です </p> 本書内容の複製転載目的外利用を禁じます 18

20 G138: 色の手がかりを用いる際は必ずセマンティックなマークアップを用いる H49: セマンティックなマークアップを用いて強調又は特別なテキストをマークアップする (HTML) 本書内容の複製転載目的外利用を禁じます 19

21 達成基準意味のある順序適合レベル :A レイアウト情報の意味の順序とスタイルシートを読み込まない状態での表示順序あるいは音声読み上げソフトでの読み上げ順序を一致させる視覚的な構成順序と HTML の構成順序を一致させる表音声読み上げソフトで読み上げた場合に情報を適切に理解できるように表を構成する ( 行列を入替えることにより情報を理解しやすくなる場合がある ) 文字間の調整等レイアウトの目的で単語内にスペースを入れたり改行 (br 要素 ) を指定しない悪い例 ) 平成 2 5 年度議事録 G57: コンテンツを意味のある順序で並べる C8: CSS の letter-spacing プロパティを用いて単語内の文字間隔を調整する (CSS) 本書内容の複製転載目的外利用を禁じます 20

22 達成基準感覚的な特徴適合レベル :A 情報の内容や対応関係を形で区別する場合テキストで情報内容や対応関係を補足するなど形の識別がつかない場合でも対応関係が理解できるようにするなどの記号だけで意味を表す場合 ( 予約可 ) のように補足する画像の形で機能の違いを表す場合画像の示す意味を alt 属性で指定する情報の内容や対応関係を位置で区別する場合テキストで情報内容や対応関係を補足するなど位置の識別がつかない場合でも対応関係が理解できるようにする右上の画像はというように位置で説明を行う場合右上のという画像はと補足する G96: 理解すべき情報を感覚的にだけ伝えることのないようにテキストでもアイテムを特定する本書内容の複製転載目的外利用を禁じます 21

23 達成基準色の使用適合レベル :A 情報の対応関係を色で区別する場合テキストで対応関係を補足するなど色を識別できない場合でも対応関係が理解できるようにするリンクの下線リンクの下線を消す設定は行わない G14: 色の違いで伝えている情報をテキストでも入手可能にする G122: 色の手がかりを用いる際には必ずテキストの手がかりも提供する G182: テキストの色の違いで情報を伝える際は視覚的な手がかりを補足する H92: フォームコントロールのラベルに色を用いる際にはテキストで補足する <WCAG 2.0 に適合しない事例 > F73: 色覚なしではリンクであることが視覚的にはっきりと分からない本書内容の複製転載目的外利用を禁じます 22

24 達成基準音声の制御適合レベル :A 利用者への通知なしに自動的に音を再生することはしない ( 操作案内 BGM も含む ) G171: 利用者の要求に応じてのみ音声を再生する本書内容の複製転載目的外利用を禁じます 23

25 達成基準コントラスト ( 最低限 ) 適合レベル :AA 太字でないテキストが 18 ポイント ( 日本語は 22 ポイント ) 未満太字のテキストが 14 ポイント ( 日本語は 18 ポイント ) 未満の場合テキスト ( 及び画像化された文字 ) と背景色は 4.5:1 以上のコントラスト比を確保する G18: テキスト ( 及び画像化された文字 ) とその背景の間に少なくとも 4.5:1 以上のコントラスト比をもたせる太字でないテキストが少なくとも 18 ポイント ( 日本語は 22 ポイント ) 以上太字のテキストが少なくとも 14 ポイント ( 日本語は 18 ポイント ) 以上の場合 : テキスト ( 及び画像化された文字 ) と背景色は 3:1 以上のコントラスト比を確保する G145: テキスト ( 及び画像化された文字 ) とその背景の間に少なくとも 3:1 以上のコントラスト比をもたせる色の組み合わせは色覚に障がいのある利用者も想定した上で見やすい組み合わせとするテキストを含む画像を作成する際は以下の手順に従ってコントラストや色の組み合わせを確認しながら作成するカラーコントラストアナライザー 2.2 日本語版を使用しコントラスト比が確保されていることを確認する ( 色覚アクセシビリティチェックツール ColorAccess を使用し第一色盲第二本書内容の複製転載目的外利用を禁じます 24

26 色盲のシミュレーションを行い画像内のテキストが読み取れるようにする ( 必ず 2 名以上で確認を行うが判断は確認者の主観にゆだねる ) ( Windows のユーザー補助のオプションで画面のハイコントラスト機能を使いハイコントラスト黒特大のフォントに設定した状態で画像内のテキストが読み取れるようにする ( 確認者の主観にゆだねる ) 他のサイトの製作元などから提供されるバナー画像など改変が不可能な画像については上記の基準の対象外とする本書内容の複製転載目的外利用を禁じます 25

27 達成基準テキストのサイズ変更適合レベル :AA 各ページのテキストサイズはユーザーが自由に変更できるようにするために以下のいずれかの相対単位で指定する em % xx-small,x-small,small,medium,large,x-large,xx-large smaller,larger 例 ) h1 { font-size: 2em; } 以下の単位は使用しない pt px C12: パーセントを用いてフォントサイズを指定する (CSS) C13: キーワードを用いてフォントサイズを指定する (CSS) C14: em 単位を用いてフォントサイズを指定する (CSS) ユーザーがブラウザの機能を用いて 200% に拡大した場合でも文字の内容が読み取れなかったりリンクの操作ができなかったりということが起きないようにする C14: em 単位を用いてフォントサイズを指定する (CSS) G146: リキッドレイアウトを用いる本書内容の複製転載目的外利用を禁じます 26

28 達成基準文字画像適合レベル :AA 視覚的なデザインに関し意図する表現がスタイルシートによって実現可能な場合はテキストを画像化せずスタイルシートによって実現する C22: CSS を用いてテキストの視覚的な表現を制御する (CSS) 本書内容の複製転載目的外利用を禁じます 27

29 達成基準キーボード適合レベル :A ホームページ内におけるメニューやリンクの選択情報の入力がマウスを使わずキーボード操作だけで利用可能であるように設計する Tab キーでリンクを移動する順序と文書の意味の順序の間に違いが生じないようにする入力フォームにおいて Tab キーで入力項目を移動する順序と入力項目の意味の順序の間に違いが生じないようにする JavaScript の onchange ondblclick ondragdrop などのイベントハンドラはキーボードによる操作を阻害するおそれが高いため使用しない Internet Explorer 最新版を使いメニューの選択情報の入力が以下のキー操作で行えることを確認する ( 確認の際はキーボードのみを使用しマウス操作は行わない ) Tab キー ( 選択候補を順々に移動させる ) Enter キー ( 選択する ) 上下左右の矢印キー ( ウィンドウをスクロールさせたり選択候補を変える ) 必要に応じてそのほかのキー上記の作業で選択候補の移動順序がページ内の情報の意味のつながりの順序と異なっていないことを確認する H91: HTML のフォームコントロール及びリンクを用いる (HTML) G90: キーボードがトリガーとなるイベントハンドラを提供する SCR2: キーボード及びマウスのイベントハンドラを両方とも用いる (Scripting) G202: すべての機能をキーボードだけでも操作可能にする本書内容の複製転載目的外利用を禁じます 28

30 達成基準キーボードトラップなし適合レベル :A ページ内の一部のコンテンツ内からキーボードのフォーカスが抜け出せないということが起きないようにする G21: ユーザーがコンテンツ内に閉じ込められないようにする本書内容の複製転載目的外利用を禁じます 29

31 達成基準キーボード ( 例外なし ) 適合レベル :AAA 達成基準キーボードの達成方法を参照本書内容の複製転載目的外利用を禁じます 30

32 達成基準タイミング調整可能適合レベル :A 利用者の入力や操作に時間制限を設けない本書内容の複製転載目的外利用を禁じます 31

33 達成基準一時停止停止及び非表示適合レベル :A 移動する画像テキスト表示されているテキストを移動させないテキストを含む画像を移動させない変化する画像テキスト内容が変化する画像 ( アニメーション GIF など ) を作成する場合には以下の基準に従う 5 秒以内に表示の変化を停止させるかあるいは一時停止する仕組みを提供する G4: コンテンツを一時停止させて一時停止させたところから再開できるようにする G11: 5 秒未満で点滅が終わるようにコンテンツを制作する G187: ユーザーエージェントによって点滅するコンテンツを停止できるウェブコンテンツ技術を用いる G152: 数回のループ後 (5 秒以内 ) に停止するようにアニメーション GIF を設定する SCR22: スクリプトを用いて点滅を制御し 5 秒以内に停止させる (Scripting) G186: 動きのあるコンテンツ点滅するコンテンツ又は自動更新されるコンテンツを停止させるコントロールを用いる本書内容の複製転載目的外利用を禁じます 32

34 達成基準タイミング非依存適合レベル :AAA 利用者の入力や操作に時間制限を設けない G5: 利用者が制限時間なしでタスクを完了できるようにする本書内容の複製転載目的外利用を禁じます 33

35 達成基準割り込み適合レベル :AAA ページに表示されている内容の一部あるいは全部を利用者の操作なく自動的に更新しない G76: 自動的に更新するのではなく利用者がコンテンツの更新を要求するメカニズムを提供する本書内容の複製転載目的外利用を禁じます 34

36 達成基準回の閃光又は閾値以下適合レベル :A 画面全体または画面の一部が 1 秒間に 3 回を超えて点滅する表現は行わない画面全体または画面の一部を占めるような縞模様渦巻き同心円などの規則的なパターン模様は使用しない G19: どの 1 秒間においてもコンテンツに 3 回よりも多く閃光を放つコンポーネントがないことを確認する本書内容の複製転載目的外利用を禁じます 35

37 達成基準回の閃光適合レベル :AAA 画面全体または画面の一部が 1 秒間に 3 回を超えて点滅する表現は行わない本書内容の複製転載目的外利用を禁じます 36

38 達成基準ブロックスキップ適合レベル :A ヘッダーに共通で配置されるリンクやグローバルナビゲーションを読み飛ばしページ本文の先頭へジャンプするリンクを全ページに配置するグローバルナビゲーションを読み飛ばすリンクは各ページにおいて一番初めのリンクとするグローバルナビゲーションを読み飛ばすリンクのリンクテキストはキーボードで操作している肢体不自由者の利用を考慮して見える形で本文へ移動と表記するコンテンツを適宜見出し分けして見出し要素でマークアップすることにより見出し部分を拾い読みした場合にヘッダーに共通で配置されるリンクやグローバルナビゲーションを読み飛ばすことができるようにするヘッダーに共通で配置されるリンクやグローバルナビゲーションについて箇条書き要素 (UL) でマークアップする G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する H69: コンテンツの各セクションの開始位置に見出し要素を提供する (HTML) H50: 構造を示す要素を用いてリンクをグループ化する (HTML) 本書内容の複製転載目的外利用を禁じます 37

39 達成基準ページタイトル適合レベル :A 各ページに必ず title 要素を指定する title 要素の内容は全ページ共通で以下の構成とする先頭に岩手県と記載し半角スペース半角ハイフン半角スペースを挟んだ後にページタイトルを記載する例 ) <title> 岩手県 - ページタイトル </title> 上記のページタイトルの部分には以下の配慮のある名称を指定する利用者がページの内容を想像できる利用者が他のページと閲覧中のページを識別できる複数のページで同じ内容のページタイトルを指定しない G88: ウェブページに対してコンテンツの内容が分かるページタイトルを提供する H25: title 要素を用いてページタイトルを提供する (HTML) 本書内容の複製転載目的外利用を禁じます 38

40 達成基準フォーカス順序適合レベル :A Tab キーでリンクを移動する順序と文書の意味の順序の間に違いが生じないように構成する G59: コンテンツ内の順番及び関係に従った順序でインタラクティブな要素を配置する H4: リンクフォームのコントロール及びオブジェクトには論理的なタブ移動順序を作成する (HTML) 本書内容の複製転載目的外利用を禁じます 39

41 達成基準リンクの目的 ( コンテキスト内 ) 適合レベル :A 達成基準リンクの目的 ( リンクのみ ) の達成方法を参照本書内容の複製転載目的外利用を禁じます 40

42 達成基準複数の手段適合レベル :AA サイト内の全ページに以下を設置するサイトマップへのリンクサイト内の全文検索機能 G63: サイトマップを提供する G161: 検索機能を提供して利用者がコンテンツを見つけるのを手助けする本書内容の複製転載目的外利用を禁じます 41

43 達成基準見出し及びラベル適合レベル :AA 見出しの内容は章や節などの内容を理解できるものとする入力フォームにおける項目名 ( ラベル ) はその項目の内容を表したものとする表示を拡大したり動画を再生するなどのコントロールを行う機能を提供する場合はその機能を的確に表した名称 ( ラベル ) を明示する G130: 内容が分かる見出しをつける G131: 目的や内容が分かるラベルを提供する本書内容の複製転載目的外利用を禁じます 42

44 達成基準フォーカスの可視化適合レベル :AA Internet Explorer 最新版を用いて TAB キーで操作した場合にページ内のリンクテキストやリンク画像フォーム等の選択候補を視覚的に認識可能であることを確認するスタイルシートを用い Tab キーで選択候補を変更した際にリンクを反転表示するなど視覚的に分かりやすく変化するよう設定する G149: フォーカスを受け取った際にユーザーエージェントによって強調されるユーザーインタフェースコンポーネントを用いる C15: CSS を用いてユーザーインタフェースコンポーネントがフォーカスを受けとったときの表示を変更する (CSS) 本書内容の複製転載目的外利用を禁じます 43

45 達成基準現在位置適合レベル :AAA トップページを除く全てのページに現在位置を示した階層ナビゲーション ( いわゆるパンくずリスト ) を設置する全てのページにサイトマップへのリンクを設置するグローバルナビゲーションやサブナビゲーションにおいて現在表示しているページが属するメニューを反転表示するなど視覚的に現在位置を認識しやすいように設定する G65: パンくずリストを提供する G63: サイトマップを提供する G128: ナビゲーションバー内で現在位置を示す本書内容の複製転載目的外利用を禁じます 44

46 達成基準リンクの目的 ( リンクのみ ) 適合レベル :AAA リンクテキストには利用者がリンク先のページの内容を想像できるような言葉を用いる具体的には以下の対応を行うリンク先ページの title 要素の内容あるいは文書の主題などリンク先の内容を代表する言葉を用いるこちらやここなどの指示語だけにリンクを設定しない視覚的な分かりやすさを考慮し詳細全文など短いリンクを提供する必要がある場合は実装方法 G189 または C7 によってリンクに対する十分な説明を提供する HTML ではないファイル (PDF など ) へリンクしている場合には形式名とファイル容量をリンクテキストの最後にカッコ書きで加えるアプリケーションの種類を示すアイコン (alt="" とするかスタイルシートで読み込む ) を添える例 ) 活動報告 (PDF 版 :300KB) リンク画像の alt 属性には利用者がリンク先のページの内容を想像できる言葉を指定する具体的には以下の点に注意するリンク先ページのページタイトル (title 要素 ) や大見出し (h1 要素 ) の内容などリンク先ページの内容を代表するような言葉を用いる G91: リンクの目的を説明したリンクテキストを提供する H30: a 要素のリンクの目的を説明するテキストリンクを提供する (HTML) H24: イメージマップの area 要素に代替テキストを提供する (HTML) G189: ウェブページの先頭近くにリンクのラベルを変更するコントロールを提供する C7: CSS を用いてリンクテキストの一部を非表示にする (CSS) 本書内容の複製転載目的外利用を禁じます 45

47 達成基準セクション見出し適合レベル :AAA ページ内の文書について適宜見出し分けする見出しを適切に入れ子構造にする (h1 がページ内に複数存在しない h1 には h2 が続く h2 には h2 か h3 が続く等 ) G141: 見出しを用いてウェブページを構造化する本書内容の複製転載目的外利用を禁じます 46

48 達成基準ページの言語適合レベル :A 各ページの html 要素に lang 属性を指定する併せて xml:lang 属性を指定する例 ) 日本語の場合 : < xml:lang="ja" lang="ja"> meta 要素内で文字コード (charset) を指定する指定内容は UTF-8 とする文字コードの指定は title 要素の前に記述すること例 ) <meta http-equiv="content-type" content="text/html; charset="utf-8"> H57: html 要素の言語属性を用いる (HTML) 本書内容の複製転載目的外利用を禁じます 47

49 達成基準一部分の言語適合レベル :AA 本文中で日本語以外の言語が現れる場合にはそのつど lang 属性を用いて言語コードを指定する H58: 言語属性を用いて自然言語の変更を指定する (HTML) 本書内容の複製転載目的外利用を禁じます 48

50 達成基準一般的ではない用語適合レベル :AAA 一般的でない用語 ( 専門用語流行語俗語など ) を用いる場合にはページ内の初出箇所で以下の対応を行うその言葉の後ろにカッコ書きで言葉の意味を説明する G101: 一般的ではない又は限定された用法で用いられている単語や語句の定義を提供する本書内容の複製転載目的外利用を禁じます 49

51 達成基準略語適合レベル :AAA 略語を用いる場合にはページ内の初出箇所で以下の対応を行うその言葉の前か後ろにカッコ書きで正式名称を説明する G102: 略語の元の語又は説明を提供する G97: 略語の初出時にその直前か直後に元の語を提供する本書内容の複製転載目的外利用を禁じます 50

52 達成基準読解レベル適合レベル :AAA 分かりやすい文章表現構成を心がける難解な記事について分かりやすい ( 中学校教育レベルの読解力で理解可能を目安に ) 要約説明を提供する以下の情報についてはイラストや図表を用いて分かりやすく表現する説明のしかたについては岩手県と十分協議する地理情報や所在地など位置関係を説明する情報組織手順プロセスなど体系だった説明が可能な情報 G86: 中学校教育レベルを超えた読解力を必要としないテキストで要約を提供する G103: アイデア事象及びプロセスの説明を理解しやすくするために視覚的な図画写真及びシンボルを提供する G153: テキストを読みやすくする本書内容の複製転載目的外利用を禁じます 51

53 達成基準発音適合レベル :AAA 読みの難しい漢字を多用しない読みが難しいと思われる漢字を使用する場合はページ内の初出箇所で以下の対応を行うその言葉の後ろにカッコ書きで読みを記載する例 ) 越喜来 ( おきらい ) G120: 単語のすぐ後に発音 ( 読み ) を提供する本書内容の複製転載目的外利用を禁じます 52

54 達成基準フォーカス時適合レベル :A ページ内の全てのコンテンツについてキーボードフォーカスを受け取った際に自動的に状況の変化が起きないようにする入力フォームについて送信ボタンがキーボードフォーカスを受け取った際に自動的に送信されることがないようにするリンクやリンク画像などについてキーボードフォーカスを受け取った際に自動的にページが遷移したり新しいウィンドウが開いたりしないようにするプルダウンメニューなどについてフォーカスを受け取った際に自動的にページが遷移したり新しいウィンドウが開いたりしないようにする G107: 状況の変化に対するトリガーとして "focus" ではなく "activate" を用いる G200: 必要なときにだけリンク先を新しいウィンドウおよびタブで開く G201: 新しいウィンドウを開くときにはユーザーに事前に知らせる本書内容の複製転載目的外利用を禁じます 53

55 達成基準入力時適合レベル :A 利用者が意図的に実行操作することなしにフォーム入力内容の送信がされたり新しいウィンドウが開かれたりすることがないようにする G80: 状況の変化を開始する実行ボタンを提供する H32: 実行ボタンを提供する (HTML) H84: select 要素とボタンを併用してアクションを実行するようにする (HTML) 本書内容の複製転載目的外利用を禁じます 54

56 達成基準一貫したナビゲーション適合レベル :AA システム要件などでやむを得ない場合を除きすべてのページに共通のグローバルナビゲーションを配置するヘッダー及びフッターグローバルナビゲーションなどサイト全体で共通に提供するナビゲーションのリンクはページの中での配置位置リンクの表示順序を同じとする G61: 繰り返されるコンポーネントが表示されるたびにそれを相対的に同じ順序で提示する本書内容の複製転載目的外利用を禁じます 55

57 達成基準一貫した識別性適合レベル :AA 同じ機能を持ったコンテンツについて名称 ( ラベル ) 視覚的な表現をサイト全体で同一とする多くのページで提供されるリンク ( サイトマップへのリンクトップページへ戻るリンクページの上端へ移動するリンクなど ) リンク画像リンクに添えられるアイコン画像箇条書きの先頭などに用いられる画像 G197: 同じ機能を有するコンテンツに対して一貫したラベル識別名及び代替テキストを用いる本書内容の複製転載目的外利用を禁じます 56

58 達成基準要求による変化適合レベル :AAA ページの表示内容の全体あるいは一部の自動更新を行わないリダイレクトを行わない原則としてリンク先のページを新しいウィンドウで開く設定としない G76: 自動的に更新するのではなく利用者がコンテンツの更新を要求するメカニズムを提供する H83: target 属性を用いて利用者の要求に応じて新しいウィンドウを開きそのことをリンクテキストで明示する G200: 必要なときにだけリンク先を新しいウィンドウおよびタブで開く G201: 新しいウィンドウを開くときにはユーザーに事前に知らせる本書内容の複製転載目的外利用を禁じます 57

59 達成基準エラーの特定適合レベル :A 必須の入力項目に入力が行われていない場合その箇所を通知する説明文を提供する特定の形式や値の入力が求められる項目に誤った入力が行われた場合そのことを通知する説明文を提供する G83: 入力が完了していない必須項目を特定するためにテキストの説明文を提供する G84: 利用者が認められた値以外の情報を提供した際にテキストの説明文を提供する G85: 利用者の入力が要求されたフォーマット又は値ではなかった際にテキストの説明文を提供する本書内容の複製転載目的外利用を禁じます 58

60 達成基準ラベル又は説明適合レベル :A ラベルコントロール ( テキストボックスやラジオボタンなど ) の目的を的確に表すラベルを提供するフォームのラベルと対応するコントロール ( テキストボックスやラジオボタンなど ) を id 属性と label 要素内の for 属性により関連付けを行う input type="checkbox" または input type="radio" の場合は label 要素は input の後に配置する例 )<p> <input type= radio name= sex value= ma id= male > <label for= male > 男性 </label> <input type= radio name= sex value= fe id= female > <label for= female > 女性 </label> </p> G131: 目的や内容が分かるラベルを提供する H44: label 要素を用いてテキストのラベルとフォームコントロールを関連付ける (HTML) 複数のコントロール ( テキストボックスやラジオボタンなど ) が並列の関係で提供される場合は fieldset 要素及び legend 要素を用いて複数のコントロールがひとまとまりのグループであることを示すとともにそのグループの名称あるいは説明を提供する H71: fieldset 要素及び legend 要素を用いてフォームコントロールのグループに関する説明を提供する (HTML) キーワード検索の入力ボックスのように視覚的に入力欄の目的が明確でラベル本書内容の複製転載目的外利用を禁じます 59

61 を画面に表示することによりかえって視覚的なデザインが阻害され分かりにくくなることが想定される場合は label 要素を用いず title 属性を用いてコントロール ( テキストボックスやラジオボタンなど ) の目的を説明する H65: label 要素を用いることができないとき title 属性を用いてフォームコントロールを特定する (HTML) G167: 隣接するボタンを用いてテキストフィールドの目的をラベル付けする入力に関する説明入力方法や入力の制約がある場合は必ず入力欄の前に説明を配置する特に以下のような制約事項がある場合は明記する入力の必須 / 未必須入力文字数カタカナ / ひらがな全角 / 半角大文字 / 小文字ハイフン (-) の必要 / 不要 G89: 求められるデータ形式及び入力例を提供する G184: フォーム又はテキストフィールド一式の先頭に必要とされる入力フォーマットを説明するテキストの説明文を提供する G162: ラベルを配置して関係性を最大限に予測できるようにする G83: 入力が完了していない必須項目を特定するためにテキストの説明文を提供する H90: label 要素または legend 要素を用いて必須項目のフォームコントロールを特定する本書内容の複製転載目的外利用を禁じます 60

62 達成基準エラー修正の提案適合レベル :AA 修正候補を提示可能な入力項目については入力エラーが起きた際に修正候補を提示する G83: 入力が完了していない必須項目を特定するためにテキストの説明文を提供する G85: 利用者の入力が要求されたフォーマット又は値ではなかった際にテキストの説明文を提供する G84: 利用者が認められた値以外の情報を提供した際にテキストの説明文を提供する G177: テキストの修正候補を提示する本書内容の複製転載目的外利用を禁じます 61

63 達成基準エラー回避 ( 法的金融データ ) 適合レベル :AA 達成基準エラー回避 ( すべて ) の達成方法を参照本書内容の複製転載目的外利用を禁じます 62

64 達成基準ヘルプ適合レベル :AAA 入力方法や入力の制約がある場合は必ず入力欄の前に説明を配置する特に以下のような制約事項がある場合は明記する入力の必須 / 未必須入力文字数カタカナ / ひらがな全角 / 半角大文字 / 小文字ハイフン (-) の必要 / 不要 G184: フォーム又はテキストフィールド一式の先頭に必要とされる入力フォーマットを説明するテキストの説明文を提供する本書内容の複製転載目的外利用を禁じます 63

65 達成基準エラー回避 ( すべて ) 適合レベル :AAA 送信前にフォーム入力内容の確認画面を提示する利用者が必要に応じて送信前に修正を行えるようにする ( 入力画面へ戻るリンクを用意するなど ) G98: 送信する前に利用者が回答を確認及び修正できるようにする本書内容の複製転載目的外利用を禁じます 64

66 達成基準構文解析適合レベル :A 1. 基本要件 1.1 構築に用いる技術の内容を参照本書内容の複製転載目的外利用を禁じます 65

67 達成基準名前 (name) 役割 (role) 及び値 (value) 適合レベル :A 1. 基本要件 1.1 構築に用いる技術の内容を参照本書内容の複製転載目的外利用を禁じます 66

本書の位置づけ本書の位置づけ福岡市ホームページは提供する情報やサービスを高齢者や障がい者を含めた誰もが支障なく利用できるようウェブアクセシビリティに十分配慮しなければならない 2004 年 6 月にウェブアクセシビリティの JIS 規格 JIS X :2004 高齢者障害者等配

本書の位置づけ本書の位置づけ福岡市ホームページは提供する情報やサービスを高齢者や障がい者を含めた誰もが支障なく利用できるようウェブアクセシビリティに十分配慮しなければならない 2004 年 6 月にウェブアクセシビリティの JIS 規格 JIS X :2004 高齢者障害者等配 ( 資料 2 ) 福岡市ホームページアクセシビリティ対応基準書 ( 外部発注用 ) 平成 28 年 3 月本書の位置づけ本書の位置づけ福岡市ホームページは提供する情報やサービスを高齢者や障がい者を含めた誰もが支障なく利用できるようウェブアクセシビリティに十分配慮しなければならない 2004 年 6 月にウェブアクセシビリティの JIS 規格 JIS X 8341-3:2004 高齢者障害者等配慮設計指針