Webアクセシビリティ：チェック（検証）方法とレポート記載（報告）について、ガイドラインと実例集

2019年12月7日

Webアクセシビリティという言葉を知っている方、実際に取り組もうとされている方でも、そのチェック（検証）方法やチェック（検証）した結果の報告方法については「知らない」「よくわかっていない」ことが多いかと思います。この記事では「JIS X 8341-3:2016規格」や「ウエブアクセシビリティ基盤委員会のサイト」を参照しながら、一般的なチェック（検証）作業から、その結果報告の仕方までを紹介していきます。
　個人レベルのサイト（ブログ）での作業としてはこのようなチェック（検証）は必ずしも必要ではないかもしれませんが、Webアクセシビリティに取り組もうとしているのであれば、一読いただきその概要を認識（知っておくだけでも）していただければ嬉しいです。
この記事があなたのサイトのバリアフリー化の助けになれば幸いです。

 

Webアクセシビリティチェック（検証）とは

Webアクセシビリティチェック（検証）とはサイト（ブログ）がWebアクセシビリティなサイトであるかのチェックです。言葉通り取れば、「アクセシビリティ確保の基本の「キ」10項目」を満たしているかをチェックすることでもありますが、ここでは「JIS X 8341-3:2016規格」やその達成基準を満たしているかのチェック（検証）方法や、その結果の報告事例を「ウエブアクセシビリティ基盤委員会のサイト」を参照しながら紹介していきます。

なのでチェク（検証）とは「JIS X 8341-3:2016」のレベルを満たしてるか、つまり設定されたレベルの各項目がクリアーできているか否か（具体的にはその項目が「◯」となるか「×」となるか）を判定することです。

＊「JIS X 8341-3:2016規格」や「ウエブアクセシビリティ基盤委員会のサイト」については以下の記事を参照ください
↓↓↓↓↓↓↓
■Webアクセシビリティのガイドライン「JIS X 8341-3:2016」って何？「ウェブアクセシビリティ基盤委員会」とは

 

では、実際のチェック（検証）を始める前にその元となるチェック表について解説します、これら「JIS X 8341-3:2016」の構成や「レベル」については読み飛ばしていただいても構いませんが、チェック表の元となる情報と意味について理解いただくために記載しています。

「JIS X 8341-3:2016」の構成

＊以下の内容はウェブアクセシビリティ基盤委員会 のサイトより転記しています。
＊JIS X 8341-3:2016には項目番号が振られています、この番号はチェク表のみならず今後の達成基準チェックを表記する時にも使われる項目番号になります。

『JIS X 8341-3:2016』の規格票は、次のような構成になっています。このうち、冒頭の「序文」と「0A 適用範囲」は、対応国際規格の『ISO/IEC 40500:2012』や『WCAG 2.0」には記載されていませんが、この規格の理解を促進するために箇条0Aとして追加したものです。また、「イントロダクション」については、対応国際規格では箇条番号が付与されていないが、分かりやすくするために箇条0Bとして箇条番号を付与してます。

  • 序文
  • 0A 適用範囲
  • 0B イントロダクション
    • 0B.1 WCAG 2.0 ガイダンスのレイヤー
    • 0B.2 WCAG 2.0 関連文書
    • 0B.3 WCAG 2.0 における重要な用語
  • 1 知覚可能の原則
    • 1.1 代替テキストのガイドライン
    • 1.2 時間依存メディアのガイドライン
    • 1.3 適応可能のガイドライン
    • 1.4 判別可能のガイドライン
  • 2 操作可能の原則
    • 2.1 キーボード操作可能のガイドライン
    • 2.2 十分な時間のガイドライン
    • 2.3 発作の防止のガイドライン
    • 2.4 ナビゲーション可能のガイドライン
  • 3 理解可能の原則
    • 3.1 読みやすさのガイドライン
    • 3.2 予測可能のガイドライン
    • 3.3 入力支援のガイドライン
  • 4 堅ろう（牢）（Robust）の原則
    • 4.1 互換性のガイドライン
  • 5 適合
    • 5.1 適合要件
    • 5.2 適合表明（任意）
    • 5.3 部分適合に関する記述－第三者によるコンテンツ
    • 5.4 部分適合に関する記述－言語
  • 附属書A（規定）用語集
  • 附属書B（参考）謝辞
  • 附属書C（参考）参考文献

 

「JIS X 8341-3:2016」には達成レベルが設けられている

「JIS X 8341-3:2016規格」には達成基準に応じたレベルがもうけられています。

レベルの決め方は、上記の構成を元に　「全部で61項目の達成基準」を作成し、その項目をレベルで分けています。レベルは「A」「AA」「AAA」と表記され、各レベルの基準は以下のようになっています。

■レベルA
25の達成基準
＊アクセシビリティ確保に最低限必要なレベル
■レベルAA
13の達成基準
＊諸外国で公的機関に求められるレベル
■レベルAAA
23の達成基準
＊レベルAAAを目標とすることは推奨しない

＊総務省では公的機関に対してレベルAA対応を推奨

なお、達成レベルの表記については全ての項目をクリアーしなくとも「一部準拠」といった記載で一部については達成していることを示すことができます。
＊達成レベルの表記について→JIS X 8341-3対応度表記ガイドライン

 

チェックのための「JIS X 8341-3:2016」の項目

では、実際にチェクするべき項目をみてみましょう。
＊達成基準の内容については解る範囲で省略して記載してあります
＊適合レベルはその項目がどのレベルに属する項目かを示しています
＊この表はウェブアクセシビリティ基盤委員会 のサイトより転記しています

達成基準チェックリスト
達成基準 適合レベル 適用 結果 注記
1.1.1　非テキストコンテンツの達成基準 A      
1.2.1　音声だけ及び映像だけ（収録済み）の達成基準 A      
1.2.2　キャプション（収録済み）の達成基準 A      
1.2.3　音声解説又はメディアに対する代替コンテンツ（収録済み）の達成基準 A      
1.2.4　キャプション（ライブ）の達成基準 AA      
1.2.5　音声解説（収録済み）の達成基準 AA      
1.2.6　手話（収録済み）の達成基準 AAA      
1.2.7　拡張音声解説（収録済み）の達成基準 AAA      
1.2.8　メディアに対する代替コンテンツ（収録済み）の達成基準 AAA      
1.2.9　音声だけ（ライブ）の達成基準 AAA      
1.3.1　情報及び関係性の達成基準 A      
1.3.2　意味のある順序の達成基準 A      
1.3.3　感覚的な特徴の達成基準 A      
1.4.1　色の使用の達成基準 A      
1.4.2　音声の制御の達成基準 A      
1.4.3　コントラスト（最低限レベル）の達成基準 AA      
1.4.4　テキストのサイズ変更の達成基準 AA      
1.4.5　文字画像の達成基準 AA      
1.4.6　コントラスト（高度レベル）の達成基準 AAA      
1.4.7　小さな背景音，又は背景音なしの達成基準 AAA      
1.4.8　視覚的提示の達成基準 AAA      
1.4.9　文字画像（例外なし）の達成基準 AAA      
2.1.1　キーボードの達成基準 A      
2.1.2　キーボードトラップなしの達成基準 A      
2.1.3　キーボード（例外なし）の達成基準 AAA      
2.2.1　タイミング調整可能の達成基準 A      
2.2.2　一時停止，停止及び非表示の達成基準 A      
2.2.3　タイミング非依存の達成基準 AAA      
2.2.4　割込みの達成基準 AAA      
2.2.5　再認証の達成基準 AAA      
2.3.1　3回のせん（閃）光，又はしきい（閾）値以下の達成基準 A      
2.3.2　3回のせん（閃）光の達成基準 AAA      
2.4.1　ブロックスキップの達成基準 A      
2.4.2　ページタイトルの達成基準 A      
2.4.3　フォーカス順序の達成基準 A      
2.4.4　リンクの目的（コンテキスト内）の達成基準 A      
2.4.5　複数の手段の達成基準 AA      
2.4.6　見出し及びラベルの達成基準 AA      
2.4.7　フォーカスの可視化の達成基準 AA      
2.4.8　現在位置の達成基準 AAA      
2.4.9　リンクの目的（リンクだけ）の達成基準 AAA      
2.4.10　セクション見出しの達成基準 AAA      
3.1.1　ページの言語の達成基準 A      
3.1.2　一部分の言語の達成基準 AA      
3.1.3　一般的ではない用語の達成基準 AAA      
3.1.4　略語の達成基準 AAA      
3.1.5　読解レベルの達成基準 AAA      
3.1.6　発音の達成基準 AAA      
3.2.1　フォーカス時の達成基準 A      
3.2.2　入力時の達成基準 A      
3.2.3　一貫したナビゲーションの達成基準 AA      
3.2.4　一貫した識別性の達成基準 AA      
3.2.5　要求による変化の達成基準 AAA      
3.3.1　エラーの特定の達成基準 A      
3.3.2　ラベル又は説明の達成基準 A      
3.3.3　エラー修正の提案の達成基準 AA      
3.3.4　エラー回避（法的，金融及びデータ）の達成基準 AA      
3.3.5　ヘルプの達成基準 AAA      
3.3.6　エラー回避（全て）の達成基準 AAA      
4.1.1　構文解析の達成基準 A      
4.1.2　名前（name），役割（role）及び値（value）の達成基準 A      

作成者：ウェブアクセシビリティ基盤委員会

上記チェック表を元に、対象サイトをチェックしてレベル「A」の項目が全て満たされれば（チェックが◯になれば）そのサイトは「レベルAに準拠している」という結果になります。

＊この記事には、チェックをするための項目解釈の情報や判定するための各項目に対する考え方は記載していません、なぜならそれを記載すると１項目だけで１記事が書けるくらいの量になるからです。実際に上記のチェク表を埋めるにはそれなりの知識と経験が必要になります。（各項目の内容はこちらを参照： 情報バリアフリーポータルサイト）

実際のチェック（検証）方法

では、いよいよ、実際のチェック（検証）方法についてご紹介します。
＊以下の内容はJIS X 8341-3試験実施ガイドラインを参照しています。

チェックするウェブページについて

運営するサイトの全てのページをチェク（検証）するか否かは、ページ数によります。概ね100ページを超えるようなサイトについては以下のような方法が推奨されています（100ページ以下でも参考になります）

表1. 「b)ランダムに選択する場合」の試験対象ページ数の目安
選択するページ数 説明
10ページ以下 試行的な試験であり、合否を判定するのには少ない
11〜24ページ 合否判定に要する最低限のページ数
25〜39ページ 合否判定に要する標準的なページ数
40ページ以上 合否判定に十分なページ数

また全てをランダムに抽出（選ぶ）というよりは、以下のように組み合わせての抽出が推奨されています。

組み合わせの例：

  「b)ランダムに選択する場合」 「c) ウェブページ一式を代表するウェブページを選択する場合」
例1： 25ページ 15ページ
例2： 40ページ 10ページ

 

チェック(検証）の方法

いくらページ数が少なくとも全てのページを目視や手動でチェックするのは大変です。そこでチェック（検証）のためのツールを使用するのが一般的です。

よく使われるチェック（検証）ツール：無料のもののみ

■みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0
総務省が開発し、提供するアクセシビリティ評価ツールです。

■スクリーンリーダ：NVDA
Windows専用の音声読み上げと点字出力で操作するためのソフトウェア（スクリーンリーダー）です。
（音声読み上げは、WindowsもMacも　OSのアクセシビリティ機能の中に装備されています）

＊その他コントラスト比等をチェックするツールなどがよく使われますが、現在ではパソコンやデバイスのアクセシビリティ機能の進歩により様々な支援機能が用意されています、なので実際に障害のある方が利用する環境にセッティング（設定）した状態で検証するサイトの再現状況をチェックすることができます。

以下のサイトで各チェックツールの使い方についてわかりやすく解説がされています

Webアクセシビリティチェックに役立つフリーツール（株式会社アーティス）

  • コントラスト比チェック「ColorTester」
  • alt属性チェック 「Alt & Meta viewer」（Chrome拡張機能）
  • CSS無効化チェック 「CSS無効化くん」（Chrome拡張機能）
  • ページタイトル・リンク切れチェック「Website Explorer」
  • みんなのアクセシビリティ評価ツール「miChecker」
  • スクリーンリーダー「NVDA日本語版」

 

検証ツールを使いつつ次の３パターンでチェックします。そのチェック結果を上記のチェック表に「◯」「×」で記載します。

  1. チェックツールが発見した対象をチェックツールが判断する (AC: Automated Check)
  2. チェックツールが発見した対象を人が判断する方法 (AF: Automated Find)
  3. チェックツールが発見することが不可能な場合で、対象を人が判断する方法 (HC: Human Check)

ということで、最終的には人が判断することになります、つまりチェックする人が「JIS X 8341-3:2016」の項目の意味するところとどのような状況（状態）であれば「◯」になるのか、「×」なのかの判断に対する正確な知識が必要になります。

 

チェック（検証）結果の報告

チェック（検証）した結果はできるだけレポート化し、サイトのなかで公表することが望ましいです。せっかく労力と時間をかけて検証するのですから、その取り組み具合をアピールすることは大切です。たとへ現状で評価「レベルA」を満たしていなくても、意識して頑張っている状況を示すことでサイトの評価に繋がります。

報告結果の記載方法については、JIS X 8341-3試験実施ガイドラインにも解説がありますが、わかりにくいかと思うので実際の報告例を探してみて、気に入ったサイトを参照しながら真似てみるのがお勧めです（丸パクリは絶対ダメですよ！）。

報告の例

■ウェブアクセシビリティ検証結果-内閣府

いちばん綺麗なお手本かなと（個人的）に思います、まずはこれをみながら作成してよいのではないでしょうか。

そのほか、ググる（検索）すると色々な報告サイトがあります、まずはお住まいの地域の行政機関や身近な会社を調べてみると親近感がもてるかもしれません。

■ウェブアクセシビリティ試験結果（平成29年度実施） – 仙台市水道局

こちらも綺麗です、真似できそうです（^^）

■ウェブアクセシビリティ方針 | 埼玉県「働くシニア応援サイト」

こちらのように方針を示すだけでも記載する価値はありそうです（意気込みは感じます）

 

最後に

Webアクセシビリティのチェック（検証）方法やチェック（検証）した結果の報告方法について「JIS X 8341-3:2016規格」に基づき「ウエブアクセシビリティ基盤委員会のサイト」を参照しながら紹介しましたが、いかがですか？
おそらく、「難しい」「大変」「できそうにない」という感想になったのではと想像しています。

最後にこんなことをいうのは「それはない！」と批判されそうですが、とりあえず上記の規格や検証の話はわすれて、以下の項目をできるところから取り組むのがおすすめです（^^）

ちょっと読んで欲しいりんご推しのサイトです
↓↓↓↓↓↓↓
https://webtan.impress.co.jp/e/2018/04/20/28538

 

「アクセシビリティ確保の基本の「キ」10項目」

Yahooこらむ記事より転記（説明は追記）

  1. ページの内容がわかるページタイトルを記述する
    ページタイトルの記述
  2. 見出しやリストなどの文書構造をマークアップする
    見出し機能をつかう、見出しは順番（H2→H３→H４と）に飛ばさず設置
  3. リンクテキストは、リンク先が分かる文言にする
    ここ、こちら等を使わない
  4. 情報を伝えている画像に代替テキストを提供する
    画像が想像できる代替テキスト（数字や空白にしない）
  5. 文字色と背景色のコントラストを確保する
    明暗や色味の強弱をで文字を見えやすく
  6. キーボードだけでも操作できるようにする
    Tab、矢印、Enterでページ移動や操作ができる
  7. 文字サイズや画面表示を変更できるようにする
    ブラウザの機能やスマフォの画面操作で拡大縮小ができる
  8. データテーブルの構造をマークアップする
    テーブルタグを正しく使用、結合や分割はタブ移動の順番に注意
  9. フォーム・コントロールのラベルをマークアップする
    入力フォームは項目名をわかりやすく設定する
  10. エラーメッセージではエラー箇所と修正方法を明示する
    入力エラーの場所と理由がわかるようにする

 

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで、非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。

このブログと連携して「ゆとりのシニアライフを実現させる」をテーマにメルマガを配信、シニア＆初心者向けにネットビジネスの魅力と取り組み方をお伝えしています。噛み砕いた解説がわかりやすいと好評です（^^）
経済的にも心にも「ゆとり」をもたらす収入をゲットしませんか！
ブログを作ったけどアクセスが無い！、アフィリエイトの成果が出ない！
そんなあなたは必見ですよ
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ﾉﾞ
↓↓↓↓↓↓↓↓↓↓ ＊詳細ページが表示されます、すぐにメルマガ申し込みはされません

よろしければ、この記事やブログに関する　感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です（^^）
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。

このブログでは、老後の「ゆとり」を生む資金作りのノウハウを配信しています。
今だけ無料で『資金づくりの種類や手法をわかりやすくまとめたレポート』をお渡し、無料で受け取りたい！ということであれば、今すぐ「りんごのメルマガ」にご登録ください。
登録後、特典の受け取り方法をご案内するメールをお送りいたします。
＊特典を受け取った後にメルマガを解除いただいても構いません。
＊解除に対しての手数料もかかりません。

ただ、メールを読み続けていただくと、シニアライフに嬉しい「お小遣い」を獲得できるノウハウを紹介。無理なくコツコツと老後の資金を増やしていくためのお得な情報をお届けします。

SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ﾉﾞ
↓↓↓↓↓↓↓↓↓↓ ＊クリックだけで登録はされません、表示された案内ページ内の申込フォームからご登録ください。

よろしければ、この記事やブログに関する　感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です（^^）
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ


お願い記事内の不具合や間違い等をお知らせください。 （キャプチャーの違い、古くなった情報、誤字脱字等些細なことでもかまいません）
↓↓↓↓↓↓↓↓
＊お知らせいただいた方にはりんごからささやかなお礼を送らせていただきます。

アクセシビリティアクセシビリティ

Posted by りんご