情報通信のトップへ

インデックスへ 調査研究会

資料8−3−5


付録5 簡易点検ガイド

(111ページ)
付録5 簡易点検ガイド

これは、14枚のスライドをテキスト化したものです。

スライド0(表紙)
簡易点検ガイド

スライド1
■目次
・簡易点検ガイドの位置づけ
・簡易点検ガイドの使い方
・点検1.色について確認します
・点検2.ブラウザで点検対象ページを開き、目視で確認します
・点検3.操作について確認します(1)
・点検3.操作について確認します(2)
・点検4.音について確認します
・点検5.ブラウザの設定を変えて確認します(1)
・点検5.ブラウザの設定を変えて確認します(2)
・点検6.書式・体裁について確認します
・より詳細な点検 (1) 点検方法
・より詳細な点検 (2) 参考情報

スライド2
■簡易点検ガイドの位置づけ

・ウェブページ制作の際は、公開前に文法チェッカー、アクセシビリティ専用チェックツール、画面読み上げソフトや配色のシミュレーションソフト等のツールを用いて、各ページにアクセシビリティ上の問題がないかを点検し、必要に応じた修正を行うことが重要です。

・「簡易点検ガイド」の前半では、「基本検討シート」のレベル1、レベル2の検討項目のうち、ツールを用いずに点検できる方法を紹介します。

・ツールを用いずに点検できるのは、レベル1、レベル2の一部です。「簡易点検ガイド」の後半では、ツールを使った点検方法や、無償で提供されているツールの情報収集に役立つサイトを紹介します。

*検収時に、制作業者の持っているツールを用いて点検を実演してもらう方法もありますが、予算が増す可能性があります。
*1つのツールで全ての項目を自動的に点検・判断することはできません。複数のツールを組み合わせたり、最終的には人による判断が必要です。

スライド3
■簡易点検ガイドの使い方

・点検の結果は「簡易点検結果記入シート」を活用して記録して下さい。また、点検の際、ウェブページを白黒プリンターで印刷したものに問題箇所を記入すると、さらにわかりやすく記録できます。

・点検の結果、問題が発見された場合は、 各点検項目の後に明記された【詳細検討シート対応項目番号】を参照して下さい。これは、「詳細検討シート」の該当番号を表しています。「詳細検討シート」には問題があるとどのようなことが起きるのか解説されています。

・問題点の修正には「詳細検討シート」に記載された作成方法や対処策の例、「JIS X 8341-3 技術解説」等を参考にして下さい。

*参考) JIS X 8341-3「高齢者・障害者等配慮設計指針−情報通信における機器,ソフトウェア及びサービス− 第3部:ウェブコンテンツ」技術解説
http://www.jsa.or.jp/domestic/instac/index.htm

スライド4
■点検1.色について確認します

音声読み上げソフトの利用者や、色覚に特性のある利用者でも、色で表した情報を正しく取得できるかを点検します。

・白黒プリンターでページを印刷します。
印刷したページにはこのあとの点検の問題点も書き込んでおきましょう。

(以下スライド10まで、各点検項目に、対応するレベルと詳細検討シートの参照項目番号が用意されています)

 コンテンツの内容や操作方法を理解できない箇所はありませんか? 【レベル1 1-10】
 文字や画像で表現された文字が識別できない箇所はありませんか? 【レベル1 1-8】 【レベル2 2-11】

(例として、「赤字は入力必須項目」として表現されているの入力フォームを紹介。色だけに依存して情報提供している例では、名前、e-mail等が赤字で書かれている。色とテキストで情報提供している例では、名前、e-mail等が赤字で書かれているだけでなく、テキストでも(必須)と書かれている)

スライド5
■点検2.ブラウザで点検対象ページを開き、目視で確認します

画面読み上げソフトの利用者をはじめ、誰にでも情報が正しく、わかりやすく伝わるかを点検します。

ブラウザ(ホームページ閲覧ソフト)で点検対象ページを開き、目視で確認します。

 各ページに、利用者がページの内容を識別できるタイトルがついていますか?【レベル1 1-6 】


 

・ブラウザで点検対象ページを開き、目視で確認します。

 各ページに、利用者がページの内容を識別できるタイトルがついていますか?【レベル1 1-6 】
 文字化けや機種依存文字※の使用はありませんか?【レベル1 1-1 】
   ※機種依存文字については「詳細検討シート」の例示を参照して下さい
 文字や画像で表現された文字が小さくて読みづらくありませんか?【レベル2 2-12 】
 外国語や省略語、専門用語など、難しい言葉を使っていませんか?【レベル2 2-17、2-18、2-19 】
 PDFファイルやFLASHでしか表示できない動画だけで情報を提供していませんか?【レベル1 1-13、1-16 】
 単語の間にスペース又は改行が入っていませんか?【レベル1 1-11 】
   ※厳密には、HTMLソースの確認や画面読み上げソフトでの確認が必要です

スライド6
■点検3.操作について確認します(1)  

画面読み上げソフトでリンク部分のみを読み上げる機能を利用する場合でも、正しくリンク先の内容を理解できるかを点検します。

・リンク箇所のテキストだけを読んでみます。

 リンク箇所のテキストを読んだだけで、利用者はリンク先の内容を予測できますか? 【レベル1 1-7】

(リンク先を予測できない例として、「防災に関する情報はこちら」、「防犯に関する情報はこちら」の両方とも、「こちら」の部分だけがリンクになっている)

(リンク先を予測できる例として、「防災に関する情報はこちら」は「防災に関する情報はこちら」、「防犯に関する情報はこちら」は「防犯に関する情報はこちら」とテキストの全てがリンクになっている)

スライド7
■点検3.操作について確認します(2)

視覚障害や肢体不自由、加齢のためにマウスを使うことが難しい人でも、キーボードのみで全ての操作ができるかを点検します。

・上矢印、下矢印キーで画面をスクロールします。
 上矢印、下矢印キーで画面をスクロールできますか?【レベル1 1-4】

・「Tab」キーを使ってページ内のリンクを移動します。
 ページ内の全てのリンク及び入力項目に移動できますか?【レベル1 1-4】
 理にかなった順序でリンク及び入力項目を移動できますか?【レベル1 1-4】

(「Tab」キーで移動した後で)
・リンク先への移動やメニューの選択は「Enter」キーで実行します。
 「Enter」キーで実行することができますか?【レベル1 1-4】
 「Enter」キーを押すまで実行されませんか?【レベル1 1-4】

スライド8
■点検4.音について確認します

聴覚障害の利用者が気づかないうちに音が再生されないか、画面読み上げソフトの利用者が読み上げ音声と重なって聞き取りづらくなる可能性はないかを点検します。
また、音声が再生される場合、聴覚障害の利用者にも音声情報が正しく伝わるかを点検します。

・パソコンの音声出力をオンにしてページを表示します。
 自動的に音が再生されませんか? 【レベル2 2-13】

・音声が再生される場合、目視で確認します。
 音声を調整できますか? 【レベル2 2-13】

(音の再生や停止を制御できる例の図)

・パソコンの音声出力をオフにしてページを表示します。
 コンテンツの内容を理解・操作するために必要な情報が消えてしまいませんか? 【レベル1 1-14】

スライド9
■点検5.ブラウザの設定を変えて確認します(1)

画面読み上げソフトやテキストブラウザ等の利用者にも、画像情報が正しく伝わるかを点検します。

・全ての画像を非表示にします。(Internet Explorerの場合、「ツール」>「インターネットオプション」>「詳細設定」で「画像を表示する」のチェックを外す)
 全ての画像に代替テキストが入っていますか? 【レベル1 1-2】
 画像を表示しなくても全ての意味が通じますか? 【レベル1 1-2】
 画像にリンクが設定されている場合、画像を表示しなくても利用者はリンク先の内容が予測できますか? 【レベル1 1-3】

(例として、画像を表示した図、画像を非表示にした図を紹介)

スライド10
■点検5.ブラウザの設定を変えて確認します(2)

弱視や加齢により視力の衰えた人が、ウェブブラウザの表示文字の拡大、縮小機能を使って文字を大きく設定できるかを点検します。

・表示する文字のサイズを変更します。(Internet Explorerの場合、「表示」>「文字のサイズ」で変更)
 文字サイズを変更できますか? 【レベル1 1-9】
 文字サイズを最大にしても、情報が欠けていませんか? 【レベル1 1-9】

(例として、Internet Explorerで文字サイズを変更している画面を紹介)

スライド11
■点検6.書式・体裁について確認します

画面読み上げソフトの利用者にも、書式・体裁(位置やフォントなど)で示した情報が正しく伝わるかを点検します。

・ページのテキストを全て選択し、メモ帳などのテキストエディタにコピーします。
 内容や操作方法を理解できない箇所はありませんか? 【レベル2 2-10】

※文字装飾のみで情報提供をしている場合の悪い例と点検の手順を紹介。
<取扱い商品一覧>として1.ノートパソコン、2.デジタルカメラ、3.プリンタを掲載し、2.デジタルカメラの部分に取り消し線を引いて、完売であることを表示している。
このテキストを選択・コピーし、テキストエディタに貼り付けると、取り消し線が表示されなくなり、意味が通じなくなるという例。
あわせて良い例として、2.デジタルカメラに取り消し線を引き、その横に(完売)とテキストで表示している例を紹介。

スライド12
■より詳細な点検 (1) 点検方法
チェックツールの利用や、利用者の環境を再現してみることによって、より詳細な点検を行うことができます。

・文法チェッカー
HTMLやCSSの文法が妥当であるかを確認します。

・アクセシビリティ専用チェックツール
アクセシビリティ専用チェックツールにより、ウェブページにアクセシビリティ上の問題点がないかを点検します。

・複数ブラウザによる確認
複数のブラウザで点検対象ページを開き、表示が崩れてコンテンツの内容を理解できない箇所や、操作できない箇所がないかを確認します。

・利用者の環境を再現
画面読み上げソフトや配色のシミュレーションソフトを利用するなど、利用者の多様な環境を再現し、コンテンツの内容を理解できない箇所や操作できない箇所がないかを確認します。

スライド12
■より詳細な点検 (2) 参考情報

チェックツールや利用者の環境を再現できるソフトには、無償で提供されているものもあります。下記を参考に情報収集してみましょう。

・「JIS X 8341-3 技術解説」
http://www.jsa.or.jp/domestic/instac/index.htm
文法チェッカー (→5.1.a「ソリューション」参照)
アクセシビリティ専用チェックツール、人手による評価・検証手法 (→6.3「技術解説」参照)

・情報バリアフリーのための情報提供サイト「ウェブアクセシビリティ関連リンク集」
http://www2.nict.go.jp/ts/barrierfree/accessibility/links/link.html
アクセシビリティ検証、アクセシビリティ関連ブラウザサイト など

・こころWeb 「こころリソースブック」
http://www.kokoroweb.org/main.html
コンピュータ操作を補助する装置、Webアクセシビリティを向上させるために など

(付録5 簡易点検ガイドはここまで)



トップへ