ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版

第２章 アクセシビリティ点検を行なう

29

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版

６

みなさんのホームページを点検してみましょう

みなさんのホームページは、高齢者や障害者の方も利用しています。みなさんのホームページで提供している情報が、誰にでも問題なくアクセスし、利用することができるかど
うか、ウェブヘルパーVer2.0 を使って早速点検してみましょう。

みなさんのホームページが、すでにインターネット上に公開されている場合について、説明します。まず、ホームページを訪れる人が、最初に訪問するトップページのアクセシビリティを点検してみましょう。ウェブヘルパーVer2.0 の「アクセシビリティ点検機能」で、トップページの URL（例えば、http://www.jwas.gr.jp/index.html）を入力し、点検を開始します。
トップページの点検が終わったら、次は、トップページからリンクされている各ページも点検してみましょう。各ページの URL をいちいち入力するのは大変です。ウェブヘルパーVer2.0 では、先に点検した HTML コンテンツに含まれていたリンク先を、次の点検候補として表示できます。その中から次に点検したいコンテンツを選んで引き続き点検作業を行なうことができます。

また、みなさんのホームページの HTML ファイルが、自分のパソコンやローカルネットワーク上にあり、ホームページを作成中、または更新作業中という場合も、同じように「アクセシビリティ点検機能」を使って点検することができます。一つ一つのファイルを点検するのがめんどうな時、「フォルダ一括簡易チェック」機能を使えば、おおまかな結果を知ることもできます。
点検が終わったら、修正にも取組んでみましょう。「タイトルエディタ」や「ALT エディタ」機能を使って、画像ファイルの代替テキストや、ページのタイトルを適切につけるだ
けでも、アクセシビリティは高まります*1。

では、次ページから、早速「アクセシビリティ点検機能」についてご説明します。

*1「タイトルエディタ」や「ALT エディタ」機能で修正できる項目は限られています。詳
しい修正作業については、２章 41 ページ、「（ア）修正作業」を参照してください。

30

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版

７【アクセシビリティ点検】全体の手順

ウェブヘルパー Ver2.0 を使った HTML コンテンツの「アクセシビリティ点検」は、以下のような手順で行います。１つのファイル（１ページ）毎にこの手順を繰り返します。

①

点検対象のファイル（URL かファイル名）を指定します。

②

点検の条件（点検レベルや点検項目）を設定します。

③

テーブル要素の利用目的を分類するためにテーブル確認を行います。
テーブル要素（table タグ）を使っている目的（データ表かレイアウトか）によって点検方法が異なりますので、最初に分類が必要となります。

④

点検を開始します。

⑤

自動点検の点検結果が表示されます。
ここまでで自動点検は終了です。

⑥？マークの項目を個別に判定します。
自動点検だけでは判断しきれない項目が？項目として残ります。ウェブヘルパーからの問い合わせに回答しながら？マークを自ら判定してください。

⑦

最終点検結果を確認し、問題点を把握します。
以上で点検は全て完了です。もし×が出てしまったら、どこの部分が、なぜ問題点と指摘されたのかを確認してください。

⑧

点検処理の次の手順に進みます。
次に、1）エディタを使って×の部分を修正する、2）点検結果のレポートを出力する、3）次候補 URL（リンク指定先）の点検、などに進んでください。

31

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版

８

アクセシビリティ自動点検を行なうまで①

点検対象のファイル（URL かファイル名）を指定します。

アクセシビリティを点検したいHTML ファイルを指定します。
ウェブヘルパー Ver2.0 では、インターネット上の HTML コンテンツのほか、自分のパソコンのハードディスク内などローカルネットワーク環境でアクセスできる HTML ファイルも点検することができるようになりました。
点検対象を指定する枠内に、URL（ http://www.jwas.gr.jp/index.html 等 ） か 、 も し く は フ ァ イ ル 名 （ C:/WINDOWS/MyDocuments/index.html など）を入力してください。ファイル名を指定する場合には、【参照】
ボタンを使ってファイルを探し出すこともできます。

重要！

※ フレームを使っている場合は、フレームセットを定義した HTML ページとは別に、各フレームを構成する全てのページを個別に点検してください。

注意！
※ ウェブヘルパー Ver2.0 は、HTML と compact-HTML に対応しています。
※ XML は、一部の点検項目を除くと点検することは可能です。
※ 携帯電話用は i-mode 向けコンテンツの点検ができます。ez-web や J-sky など向けコンテンツには対応していません。
※ URL が https から始まるページの点検は行えない場合があります。
※ cgi で動的に生成されるページを点検することはできません。

32

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版

点検対象のファイルを指定したら、次にそのファイルの HTML 形式を選択してください。
HTML か compact-HTML（i-mode 向けコンテンツの場合）を選ぶことができます。
通常のホームページを点検する場合には、HTML を選んでください。

②

点検の条件（点検レベルや点検項目）を設定します。

点検の条件として、点検レベルを選ぶか、点検項目を個別に指定します。
ウェブヘルパーの点検レベルは、シングルＡからトリプルＡ（AAA）までの３段階に分かれています。この点検レベルは、WCAG1.0 のチェックポイントの優先度と適合度に準じています。ウェブヘルパーでは、希望する適合度に合わせて、チェックポイントをまとめて点検することができます。目標とする点検レベルを３段階の中から選んでください。

【参考】WCAG1.0 チェックポイントの優先度と適合度について
WCAG1.0 では、14 個のガイドラインごとに複数のチェックポイントが挙げられており、合計 65 個のチェックポイントがあります。それぞれのチェックポイントは、アクセシビリティに与える影響に基づく「優先度」が指定してあり、［優先度１］から［優先度３］までの３種類があります。
優先度

重要性

WCAG1.0 での位置づけ

優先度１

高い

優先度２

やや高い

コンテンツ制作者が満たすべき優先度

優先度３

やや低い

コンテンツ制作者が満たすべき事を望まれる優先度

コンテンツ制作者が満たさねばならない優先度

そのうえで WCAG1.0 では、それぞれの優先度を満たしているコンテンツに対して、３段階の「適合度」を規定しています。
適合度
Ａ（A）

WCAG1.0 での位置づけ
優先度１のすべてのチェックポイントに適合

ダブルＡ（AA）

優先度１と２のすべてのチェックポイントに適合

トリプルＡ（AAA）

優先度１〜３のすべてのチェックポイントに適合

33

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版

点検レベルを選択する以外に、個別に点検項目を指定して点検することもできます。例
えば、「全ての画像（img 要素）に代替テキスト（ALT 属性）が指定されているかだけを確認したい」といった場合に便利です。
点検レベルが選択されている場合、【個別指定】ボタンは使えない状態になっていますが、個別指定の○をチェックすると【個別指定】ボタンを押すことができるようになり、それをクリックすると点検項目を選択する次のページに移動します。

ここでは、点検したい項目を個別にチェックします。一つだけでなく、複数の点検項目を選ぶことができます。
上に並んだ【テーブル】【画像】【マルチメディア】【文書構造】をそれぞれ選択（クリック）することで、それぞれのテーマに関連した点検項目をまとめて選択することができます。複数のテーマを併せて選択することも可能です。
【全選択】をクリックすると、全ての点検項目が選択されます（トリプルＡの点検と同じ）。【全削除】をクリックすると、既に選択した点検項目がクリアされます。
設定が終わりましたら、最下段にある【設定終了】をクリックしてください。もし何も選択せず、前の画面に戻りたい場合は、【キャンセル】をクリックしてください。

34

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版③

テーブル要素の利用目的を分類するためにテーブル確認を行います。

テーブル関連の点検をおこなう場合（点検レベル A、ダブル A、トリプル A、および個別指定でテーブル関連の点検項目が選択されている場合）には、点検を開始する前に、テーブル要素（table タグ）を使っている目的が「データ表」か「レイアウト」かによって点検方法が異なるため、分類しておく必要があります。
「点検対象」「HTML 形式」「点検レベル」の３項目の入力と選択が済んだら、【テーブル確認開始】ボタンをクリックしてください。

注意！

※ 点検レベルを個別指定して、テーブル関連の点検項目を選択しなかった場合は、【テーブル確認開始】ボタンは選択できません。点検開始に進んでください。

テーブルの点検が終了すると、テーブル要素（table タグ）が使われていた場合、テーブル要素ごとに一覧が左側の枠内にリストで表示されます。もしテーブル要素が使われていなければ、何も表示されません。

左枠内にテーブル確認用の一覧が表示された場合、表示されているテーブル番号を選択すると、右側には該当テーブルの HTML ソースが表示されます。また HTML ソースを見ただけではどのテーブルか分からない場合は、【ブラウザで表示】ボタンをクリックするとブラウザが起動し、該当箇所のテーブルに？マークが付いて表示されます。

35

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版

左側の枠内に表示されたテーブル要素の全リストを順番に選択しながら、そのテーブル要素の利用目的が「レイアウト用」か「データ表」かを指定してください。

重要！

※ 最初は、全てレイアウト用に指定されます。
※ もし、データ表が一つも使われていない場合（全部がレイアウト用の場合）は、そのまま何も設定せず、先に進むことができます。データ表がある場合には、必ずどれがデータ表かを探し出して、それをデータ表に指定し直してください。

【参考】テーブル確認の省略方法についてデータ表を使っているコンテンツを点検する場合には、このテーブル確認の作業がとてもたいへんになります。そこで、テーブル要素のサマリー属性に以下のような工夫をしていただくことで、この確認作業を簡便にすますことができます。

1）テーブルをデータ表として指定する場合
テーブル要素（table タグ）のサマリー属性（summary）に、「データ」（全角カタカナ）か「data」（大文字・小文字どちらでも可）の文字列を入れるようにしてください。そうすると、ウェブヘルパー Ver2.0 はその表がデータ表だと判断します。
例：<table summary="アクセス回数のデータ表です">

2）テーブルをレイアウト用として指定する場合
テーブル要素のサマリー属性に、「レイアウト」（全角カタカナ）か「layout」（大文字・小文字どちらでも可）の文字列を入れるようにしてください。そうすると、ウェブヘルパー Ver2.0 はその表がレイアウト用だと判断します。
例：<table summary="この表はレイアウトを整える表です">※ただし、サマリー属性にデータ表だと判断する文字列（「データ」「data」）とレイアウ
ト用だと判断する文字列（「レイアウト」「layout」）が混在している場合は、自動的に判断できず確認の問い合せが発生します。

36

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版④

点検を開始します。

以上で、点検の準備が完了です。
最下段に表示された【点検開始】ボタンをクリックしてください。ウェブヘルパー Ver2.0が指定された HTML コンテンツのアクセシビリティを点検します。

点検開始！

37

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版⑤

自動点検の点検結果が表示されます。

点検開始を実行すると、ウェブヘルパー Ver2.0 は自動的に HTML のソースを解析し、WCAG1.0 に沿ってアクセシビリティを点検した後、その結果をレポートします。

×マークは、自動点検で発見された問題点を指摘しています。
？マークは、利用者による確認が必要な箇所を指摘しています。
同じ点検項目でも複数個の問題箇所が見つかった場合には、「○項目・△箇所の問題点」といった形でレポートされます。

自動点検結果の総評

WCAG1.0 に沿った優先度別の点検結果レポー
ト一覧※ 2.1.1 等 の 数 字 は 、WCAG1.0 のチェックポイントに相当※項目の後ろの括弧数
字は問題箇所の総数
重要！
※ ここまででウェブヘルパーの自動点検は終了です。
※ ここでの点検結果は自動点検のみの結果です。画面上部の結果コメント表示欄に、「注意！！

これは最終結果ではありません。まだ「？」で示された確認必要項目が残っています。」と表示された場合は、個別に確認が必要な項目が残っていることを示しています。
※ 最終的な点検結果は、これらの確認事項に全て答えた後に表示されます。

38

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版

９⑥

アクセシビリティ点検結果を確認する？マークの項目を個別に判定します。

自動点検結果のレポートで？マークが表示された項目全てについて、ウェブヘルパー
Ver2.0 の問い合わせに回答しながら、個別に確認を行います。

？マークが付いた項目をダブルクリックすると、「？項目確認画面」が表示されます。
？ マークの付いた項
目をダブルクリックしてください「内容の説明」をよく読み、問題には繋がらないか、あるいは問題に繋がる可能性があるかどうかをご自身で判定して、当てはまる選択肢にチェックを入れてください。
ウェブヘルパー Ver2.0 の自動点検では、疑わしいと判定された箇所に？マークが付きますので、問題無しか問題ありという二者択一の答えだけでなく、そもそも点検対象外という場合もあり得ます。その場合は「対象外」を選択してください。

39

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版

選択肢にチェックしたら【決定】ボタンをクリックしてください。もしここで判定しない場合は、【キャンセル】ボタンをクリックしてください。なお、決定した選択肢も後から変更することは可能です。
この判定の後、問題ありと判断した？マークは、×マークに変わります。反対に問題なしと判断した？マークは○マークに変わります。
もし先の判定を変更したい場合は、再度その点検項目を選択した上で、下段に並んだ実行ボタンの中にある【要確認項目再設定】ボタンをクリックしてください。

ウェブヘルパーが指摘している問題点の場所が分からない場合には、以下の二つの手段で確認することができます。
確認したい項目を選択した上で、以下のいずれかのボタンをクリックしてください。

a.表示画面上で該当箇所を確認

b.ソースで該当箇所を確認

40

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版⑦

最終点検結果を確認し、問題点を把握します。

以上の自動点検と？マークの個別確認で、ウェブヘルパー Ver2.0 を使ったアクセシビリティ点検はひとまず完了です。
最終点検結果を確認しながら、問題点を把握しましょう。

（ア）問題点の内容や修正方法についての把握
×マークの付いた項目をダブルクリックしてください。
ブラウザが立ち上がり、その項目に関しての「１．アクセシビリティ上の問題点」と「２．
問題点の修正方法」についての解説を読むことができます。

× マークの付いた項目をダブルクリックしてください41

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版（イ）問題箇所の把握問題点として指摘されている箇所は、？マークの確認の時と同様に、表示画面上で該当箇所に×マークを表示させて確認するか、ソース上で該当箇所に×マークを表示させて確認することができます。
確認したい項目を選択した上で、以下のいずれかのボタンをクリックしてください。

a.表示画面上で該当箇所を確認

b.ソース上で該当箇所を確認

注意！
※ HTML 全体にわたる問題点や外部 CSS に関する問題点などの場合は、表示画面上やソース上でその位置を特定することができませんので、一番先頭に×マークを並べて表示します。
※ ×マーク内に表示されている数字は、優先度の数字です。
×1 ･･･ 優先度１の問題点
×2 ･･･ 優先度２の問題点
×3 ･･･ 優先度３の問題点

42

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版⑧

点検処理の次の手順に進みます。

最終点検結果を確認し、問題点が把握できたら、ウェブヘルパー Ver2.0 を使ったアクセシビリティ点検の作業は一段落です。しかし、問題点をそのままにしておいたら点検をした意味がありません。
次に、問題点を修正する作業に取り掛かりましょう。

（ア）修正作業
ウェブヘルパー Ver2.0 の点検結果表示画面の最下段に、【エディタ起動】【点検結果出力】【次候補 URL 一覧】の３つのボタンが並んでいます。

【エディタ起動】を実行すると、環境設定で指定したテキストエディタのプログラムが起動し、点検を実施した HTML ソースを直接修正する作業に移ることができます。

重要！

※ 修正を行ったら、再度ウェブヘルパーを使ってアクセシビリティ点検を実施し、目標のレベルが達成されているかどうかを確認しましょう。

（イ）点検結果の出力【点検結果出力】を実行すると、ウェブヘルパー Ver2.0 を使ったアクセシビリティ点検結果を、レポートとして CSV 形式のファイルに出力することができます。

【点検結果出力】ボタンをクリック（選択してEnter キーを押す）すると、ファイルの保存先を指定するダイアログが表示されるので、「保存先のフォルダ」と「保存するファイル名」を指定して、保存を実行してください。

43

ウェブヘルパー Ver2.0
活用マニュアル 2003.7.14 版

点検結果出力ファイル（CSV 形式）（ウ）次候補ＵＲＬの点検
修正が済んで、必要に応じて点検結果レポートの出力を終えたら、次の HTML コンテンツの点検に移りましょう。

【次候補 URL 一覧】ボタンをクリックすると、先に点検した HTML コンテンツの中でリンク先が指定されていた URL やファイル名の一覧が表示されます。その中から次に点検したい HTML コンテンツを選んで、引き続き点検作業を行うことができます。

44