アクセシビリティ試験支援ツール COB-CHAの使い方
2023年11月06日 更新 | タグ: アクセシビリティ
変更のお知らせ
バージョン41(2023年10月ごろ)にはウェブページと問題点の画像をGoogleドライブにアップする機能がありましたが、現在のバージョンではこの機能は削除されています。なにかの間違いでCOB-CHAが利用者のGoogleドライブに影響を与えない方が好ましいと考えた結果です。画像類の整理については、なにかしらの運用解決を行なってください。
バージョン41以前に作成したCOB-CHAのシートに対してバージョン42での集計をかけると、集計結果においてURLとページタイトルの値が正しく参照されません。いま、対応を考えていますので、バージョン41で作成した集計結果はバックアップをしておいて下さい。
COB-CHA(コブチャ)とは
COB-CHA (COllaBorative CHeck tool for Accessibility) は、ウェブアクセシビリティ確保のプロセスの中にある試験・検証に用いることができる、Google Spreadsheet向けのアドオンです。JIS X 8341-3:2016(WCAG 2.0)、WCAG 2.1、Trusted Testerの達成状況を記録し、集計することを助けます。
- Google Spreadsheetなので、複数の担当者が同時に記録を行うことができ、試験・検証を分担している際、便利が良いです。
- 試験対象の全てのページを1つのブックで管理するため、整理がつけやすいです。
- 最終成果物として、Excelの形式でエクスポートすれば、1ファイルをウェブサイトに置いておくだけで、試験結果の表示として、用いることができます(あるいはGoogle Spreadsheetにそのままリンクする手もあるかもしれません)。
- 問題点管理もできるようにしているので、検証の際、便利です。
- 無料で誰でも使えます。ソースコードはGitHub - COB-CHAで公開しています。
インストールまで
新規Google Spreadsheet文書を作成します。
メニューの「アドオン」から「アドオンの取得」を選択します。
Google Workspace Marketplaceの検索で「cob-cha」を検索します。
「インストール」します。
「COB-CHA のインストールを開始するには権限が必要です。」で「続行」してください。ここでうまくいかないときには、いちどGoogleからサインアウトし、Google Chromeを再起動してみてください。
COB-CHAを使うアカウントを選択します。
「COB-CHAがGoogleアカウントへのアクセスをリクエストしています」で「許可」をしてください。ここで求めていることは、COB-CHAに、以下の挙動を許すことになります。
- Googleドライブのすべてのファイルの表示、作成、削除:
COB-CHAで操作しているGoogle Spreadsheetのある階層に、COB-CHAが用いるフォルダを作成し、その中に試験対象の画面のスクリーンショットや試験時点のHTMLの保存を行います。
- Googleドライブのスプレッドシートの表示、編集、作成、削除:
Google Spreadsheetを操作します。
- 外部サービスへの接続:
試験対象のHTMLを取得します。
- Googleアプリケーション内のプロンプトとサイドバーで、サードパーティのウェブコンテンツを表示、実行します:
専用のサイドバーを表示します。
「COB-CHAをインストールしました」と出たら、完了です。メニューの「アドオン」「COB-CHA」で「Getting Started」あるいは「コントロールパネルを表示」を選んでください(「Getting Started」と表示されている場合、有効化ののち、再読み込みが必要な場合があります)。
試験・検証の準備
ヘルプを見てみる
「アドオン」「COB-CHA」「COB-CHAヘルプ」を見てみましょう。基本的な流れを確認できます。
シートの名前
COB-CHAが扱うシートは2種類あります。シート名の先頭に「*」があるシートは、集計結果であったり、一覧のシートです。
試験・検証を行う
コントロールパネルを表示
「アドオン」「COB-CHA」「コントロールパネルを表示」で、「COB-CHAコントロールパネル」が表示されます。
コントロールパネルは7つの領域に分かれています。各項目はおおむね手順の並びになっています。
- 1. 試験の方法を決定
- 2. 試験対象の設定
- 3. テンプレートを設定
- 4. 値の編集
- 5. 問題点管理
- 6. 集計
- その他
1. 試験の方法を決定
ここで設定した内容によって、記録用紙の作成や集計が行われます。
Google Spreadsheetの言語を「ja(日本語)」と「en(英語)」から選択します。デフォルトでは、ブラウザの言語が選択されることになっています。
試験で使う規格(試験方法)として、「WCAG 2.0(JIS X 8341-3:2016)」「WCAG 2.1」「Trusted Tester」から選択できます。
レベルは「A」「AA」「AAA」から選択できます。「Trusted Tester」を選ぶと、現状では「AA」固定になります。
記録する記号を選びます。「T/F/DNA式」と「o/x/-式」です。「T/F/DNA」は「True/False/Does Not Apply」の頭文字です。「o/x/-」は、「o(小文字のオー)」をマルと見做し、「x(小文字のエックス)」をバツとみなしています。
ここまで設定したら、「設定シートを生成」で、試験方法を記録しておきます。このシート(「*Config」)を作っておかないと、試験・検証の途中でブラウザを落としたり、Googleからサインアウトしたときに、同じ設定で試験・検証を続けられなくなります。
「追加の達成基準」を用いる場合は、「追加の達成基準を設定」してください。目標としている適合レベルより上の達成基準の一覧が表示されるので、選択をすると、「設定シート」に記録されます。
ここまでの作業を一番最初に行ってください。「追加の達成基準」をあとから足すのはたいへん面倒くさい作業になります。
2. 試験対象の設定
URL一覧のシートを生成
まず「URL一覧のシートを生成」をしてください。「*URLs」というシートが作成されます。あらかじめ40までの番号が入っていますが、41以上の試験対象も設定可能です。41以降の番号については、自分でナンバリングしてください。ただし、Google Spreadsheetの仕様上100シートまでしか扱えないので、ご注意ください。
一覧シートを作成したら、B列に試験対象のURLを記入します。
URLごとの記録シートを生成
一覧シートにURLを入力したら、「URLごとの記録シートを生成」をします。この機能を実行すると、指定されたURLからtitleを取得し、それぞれのシートを作成します。このtitleの取得にそれなりに時間がかかります。また、titleの取得と同時にHTMLもGoogle Driveに保管しています。このHTMLとtitleの取得が不要な場合は、URL一覧に記入の際、http/httpsスキーム部分をttp/ttpsというようにしてもらうと、取得をスキップします。
URLごとの記録シートができると、試験・検証の準備完了です。
3. テンプレートを設定
一般的なウェブサイトには、ヘッダやフッタなど、しばしば共通の箇所があります。こういった共通の箇所についての試験を先に行い、記録しておくと、サイト内で一貫した記録を残すことができます。そういった記録をするのに、「テンプレート」が便利です。「テンプレート」の「対象シートに反映」を使うことで、試験・検証対象の全てのページの記録を一括でテンプレートと同じにすることができます。
テンプレート(達成基準)シートを作成
「1. 試験の方法を決定」で決定した内容でテンプレート(「*SC Template」)が作成されます。「追加の達成基準」も含まれています。
テンプレート(実装)シートを作成
「1. 試験の方法を決定」で決定した内容で、実装チェックリストのテンプレート(「*ICL Template」)を作ります。
現時点では3種類のテンプレートを利用できます。
- WAIC式
WAIC(ウェブアクセシビリティ基盤委員会)が「JIS X 8341-3:2016 試験実施ガイドライン」において例示している実装チェックリストと似た内容になっています。
- アイコラボレーション神戸式
アイ・コラボレーション神戸で使っている実装チェックリストです
- COB-CHA式
COB-CHAオリジナルの実装チェックリストです
- COB-CHA式(簡易)
COB-CHAオリジナルの実装チェックリストです。初学者が試験の練習をする想定で作ってあります
採用する達成方法を検討し、「除外」するか、行を削除するなどして実装チェックリストをカスタマイズしてください。独自の実装チェック方法を追加する場合は、既存の行を参考に、2列目に合否判定、3列目に除外チェックが来るようにしてもらうと、あとの集計がスムーズになります。
この実装チェックリストでも、達成基準のテンプレートと同様に、共通箇所の試験・検証結果をあらかじめ入力しておくことで、各ページに反映できます。
4. 値の編集
すべて適合にする
「テンプレート(達成基準)」「テンプレート(実装)」「URLごとの記録シート」で、すべての達成基準を「適合(合格)」の状態にします。
複数シート一括編集
Microsoft Excelだと、複数シートを選択した状態で同一のセルを編集できますが、そのGoogle Spreadsheet版の機能のようなものです。なにか値の入力されているセルに移動し、「現在位置取得」してください。このとき、1つのまとまりであれば、複数行複数列の一括取得が可能です。一括編集の「行」「列」「値」の欄が埋まります。「全シートに反映」すると、当該セルの値が同じになります。表現を整えるときなどにお使いください、
5. 問題点管理
問題点を新規作成/編集
対象のサイト(アプリケーション)に問題点がある場合、この問題点を登録するシート(「*Issue」)を作成できます。いくつかの入力項目がありますが、それぞれの入力による機能的な作用はほとんどありません。自由に使ってもらって構いません。ただし「ページ」だけは、「どのページの問題か」を記録しているため、「このページの問題点一覧」で用いられます。
このページの問題点一覧
「URLごとの記録シート」をアクティブにしている状態で、「このページの問題点一覧」を見ることができます。各問題点に「ページ」が登録されている必要があります。
6. 集計
対象ページごとの実装チェックを集計
各ページで実装チェックを行った後、この操作を行うと、実装チェックリストの結果から達成基準の達成状況を集計します。
達成基準チェックを集計する
全ページの達成基準を集計します。「1. 試験の方法を決定」で設定した目標とする適合レベルに対して、満たしているかどうかを判定します。目標とする適合レベルがAAである状態で、Aを満たしている時には、「AA-(ダブルエーマイナス)」。AAを満たしていれば、「AA」と表示されます。
全ページの達成基準を一覧にした「*Result」シートと、合算をした「*Total」シートが生成されます。
実装チェックを集計する
全ページの実装チェックを一覧にしたシート(「*ICL Result」)を生成します。一覧にしているだけで、とくに集計などは行いません。
その他
「『試験結果の表示』シートを生成」では、JIS X 8341-3:2016の附属書で求められている記載事項のテンプレートです。必要に応じて作成してください。
削除では「記録シート」のみか「*Config」まで含めた「全シート」を削除します。復活できないので、気をつけて扱ってください。
試験結果の公開
Google Spreadsheetの「ファイル」「ダウンロード」で「Microsoft Excel (xlsx)」あるいは「OpenDocument形式 (ods)」あたりでダウンロードすると扱いやすいと思われます。
「*Results」「*URLs」のシート間のリンクや、記録シートやテンプレートにのこっているWCAGの達成基準へのリンクは、Google Spreadsheet以外では無効になるようなので、適宜、微調整を行ってください。
「試験結果の公開」として最低限必要なのは、「*Report(試験について)」「*Total(達成基準チェックリスト)」「*URLs(試験対象のページ)」です。これらのシート以外については、より詳細な試験結果として公開したいという場合に、適宜残すようにしてください(「*Report」の内容は自分で埋めてください)。また「*xxx Template」は削除した方が良いでしょう。
以上