2021年07月08日Webアクセシビリティ対応の基礎まとめ

障害者差別解消法の概要

日本では、「障害者の権利に関する条約」批准後、国内法「障害を理由とする差別の解消の推進に関する法律」(障害者差別解消法)が2013年に成立、2016年に施行されました。また、2021年6月に、民間事業者の義務を公共機関と同等に格上げする改正が行われました。施行日は2024年(令和6年)4月1日の予定です。

障害者差別解消法は、障害を理由としてサービスの提供を正当な理由なく拒否・制限することを禁止しています。また、障害者が対応を求めた場合、公的機関や事業者は、過重な負担が要求されない限りこれに対応する(合理的配慮)義務が課せられます。適用範囲は多岐にわたり、WebサイトやSNS等を通じた情報提供も含まれます。

違反時の罰則

義務の遵守に関して主務大臣から求められた報告をしなかったり、虚偽の報告をしたりした場合、20万円以下の過料が課せられます(第26条)。

対応目標・自己評価形式等

2016年の施行後、総務省では、「みんなの公共サイト運用ガイドライン」を2016年に策定し、国や地方自治体の各機関のサイトに対して、「2017年度末までにJIS X 8341-3 適合レベルAAに準拠」するよう要求しました。

民間事業者の場合、適合レベルの具体的目標を定めた公的ガイドラインは、その後2023年時点でも公開されていません。が、今後具体化される可能性が消えたわけでもありません。ガイドラインが定められた場合、サイトの状況によっては、リニューアルや大規模改修が必要になる可能性もあります。今後の動きに注意しつつ、まずはサイトの現状を把握することが重要です。

総務省のサイトでは「情報アクセシビリティ自己評価様式」として、企業等が自サイトの自己評価結果を公開するための国内標準雛型を提供しています。サイトの現状把握や改善の結果を広く公開したい場合に活用できます。内容的には、主に視覚・聴覚・発話能力・手の動作等に障害があってもサイトを使用できるかの評価に主眼が置かれています。

miChecker

「みんなのアクセシビリティ評価ツール：miChecker」は、総務省が提供するアクセシビリティチェックツールです。WCAG 2.0やJIS X 8341-3:2016に準拠したコード検証のほか、視覚障害対応向けのシミュレーション機能が充実しており、国内標準とも呼べる地位を確立しています。BASIC認証付きのサイトでも利用可能です。

設定で対象規格(WCAG 2.0やJIS X 8341-3:2016)とレベル(A～AAA)を指定し、メニューやツールバーからチェックを実行すると、検証結果と概要レポート・詳細レポートが表示されます。

miCheckerは2023年4月に、Microsoft Edgeをベースとする最新版(3.x)が公開されました。以前は長らくInternet Explorer 11ベースのバージョン(2.x)で公開されており、他のブラウザを基準とするサイトからすると表示検証環境の違いがネックになっていましたが、現在その問題はほぼ解消されています。

○長所

• 日本語に対応しており、英語が苦手な人でも苦労せず利用できます。
• 視力低下・色覚異常のシミュレーションでは、細かい設定に基づいて実際に画面を加工し、障害の程度に応じた見えづらさが健常者でも容易にチェックできます。
• 検証結果の情報が加工・再利用に適しています。アクセシビリティ詳細レポートの結果全体をCSVで保存できるほか、任意の選択行をタブ区切りテキストとしてコピーできます。Excelでレポートに整形したり、独自のシステムでCSVを処理したりと、幅広い用途に活用できます。

×短所

• 企業のセキュリティポリシー等の都合によっては、Java実行環境の導入が支障となる場合があります。
• Windows専用です。macOSやLinux等他OS搭載機の利用者は、別途Windows環境を用意する必要があります。
• JIS X 8341-3:2016 / WCAG 2.0よりもあとの世代の基準(WCAG 2.1以降等)はカバーしていません。ただ逆に「WCAG 2.1以降はJIS規格化未対応なので今は考慮しない」という場合には向いています。

a. 音声ユーザビリティ視覚化

スクリーンリーダー(音声読み上げブラウザ)使用時のユーザビリティを検証する機能です。主に文章の各セクションに素早く移動・読み上げ可能であるかを検証します。

各要素読み上げまでの最短所要時間を色の濃さで表しつつ、マウスカーソルのある箇所の最短時間を秒数で表示します。色の薄い領域が多いほど、訪問者が必要な部分を自由に選んで短時間でアクセスできることになります。

[詳細レポート]では、WCAG 2.0やJIS X 8341-3:2016のカテゴリ・番号別に、「問題あり」「問題の可能性大」「要判断箇所」「手動確認」の4レベルで問題の有無が表示されます。問題のある箇所は、詳細レポートのリスト内に、達成基準と達成方法の番号、HTMLソースの行番号、対応内容の詳細が表示されます。レポート内各行で右ボタンメニューを開くと、達成基準や達成方法の解説ページをブラウザ表示できます。

音声ユーザビリティ視覚化検証中の画面。左に元ページ、右に検証結果、下に詳細レポートを表示

b.ロービジョンシミュレーション

視力低下・色覚異常・水晶体透過率低下状態での見えにくさをシミュレートする機能です。

設定に基づいて、特定の色が表示されなくなったり、コントラストが低下したり、文字がぼけたりします。要素の識別を色だけに頼っていたり、フォントが極度に細かったりすると、ロービジョン時の視認性の問題が可視化されます。

[詳細レポート]では、WCAG 2.0やJIS X 8341-3:2016のカテゴリ・番号別に、「深刻度」もしくは前景色・背景色(RGB値)が表示されます。こちらも問題の有無が4段階で表示され、レポート内各行で右ボタンメニューを開くと、達成基準や達成方法の解説ページをブラウザ表示できます。

ロービジョンシミュレーション中の画面。左に元ページ、右にシミュレーション結果、下に詳細レポートを表示

ロービジョンシミュレーションの設定。視力(0.1～1.0)・色覚異常(赤/緑/青)・水晶体透過率(20～60)が選択でき、視力・水晶体透過率を最低にすると相当見づらくなる

※参照：
みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.3.0
https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html
みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0 ※旧版。2024年3月まで移行期間として公開し、その後公開終了予定
https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker2.html

Accessibility Insights

Accessibility Insightsは、マイクロソフトが提供するアクセシビリティ検証ツールです。Windows版単体アプリのほか、Google Chromeや新Microsoft Edge用のプラグインも利用できます。

メニューは大きく「Fast Pass(簡易自動検証)」「Assessment(詳細手動検証)」「Ad hoc tools(個別ツール)」に分かれます。全自動で手早く検証したい場合や、手順書に沿って項目別にしっかり検証したい場合など、様々な用途に対応します。

個別ツールの中で要注目なのが、「Tab Stops」です。これはTabキーによるフォーカス移動の検証結果をビジュアル化できるツールで、起動後Tabキーを打っていくと、フォーカスが移動するたびに移動順に番号が表示されていきます。

フォーカスの移動順に不自然な流れがあったり、メニュー/アコーディオン/タブ等の開閉部/選択部などにフォーカスが当たらなかったりする場合の情報共有に役立ちます。

○長所

• Chromeプラグイン版があり、Windows以外にmacOS・Linuxでも利用可能です。
• Tabキーでのフォーカス順可視化(⇒番号指定での修正指示も可能)等、キーボード操作に関する検証ツールが充実しています。
• 検証項目の可視化機能([Visual helper]をオン)を使用する際、該当項目に関する部分のみがハイライトされます。これにより、マーカーが雑多にならず見やすい表示になります。
• 項目ごとに手動検証の手順が(英語ですが)細かく記載されており、初心者が手順に沿って作業を覚えたい場合に向いています。
• 検証メニューは別ウィンドウで開かれるため、検証対象ページをウィンドウ最大化/全画面状態で表示しながらでも検証できます。
• 参考資料のリンク先がWCAG 2.1に対応しています。JIS X 8341-3:2016(WCAG 2.0)より新世代の基準への適合を目指す場合に適しています。
• 一部の検証方式では結果(英語)をJSON形式で出力可能です。

×短所

• メニューやメッセージはすべて英語です。高校程度の英文を読めることが事実上の条件となります。
  英語が苦手な場合は、必要に応じてChromeのテキスト翻訳機能等で一時的に日本語化することも可能ですが、原則として英語に戻さないとチェックリスト等が機能しません。項目を移動するごとに都度日本語・英語を切り替えていると、作業効率が低下します。
  利用を厳しいと感じるようであれば他ツールの代用がおすすめです。

※参照：
Accessibility Insights
https://accessibilityinsights.io/
Accessibility Insights for Web - Microsoft Edge Addons
https://microsoftedge.microsoft.com/addons/detail/accessibility-insights-fo/ghbhpcookfemncgoinjblecnilppimih
Accessibility Insights for Web - Chrome ウェブストア
https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni

WAVE

WAVEは、ユタ州立大学障害者センターに本拠を持つ非営利組織「WebAIM (Web Accessibility In Mind)」が提供するチェックツールです。

サイト上で診断したいページのURLを入れると、エラーや警告を表示します。参照アイコンをクリックすると、エラーや警告の説明(英語)と、WCAGの該当項目の解説ページ(英語)へのリンクが表示されます。

ChromeやFirefox用の拡張機能版では、表示中のページであれば、サイト公開前であっても検証可能です。

WAVE(ブラウザ版)利用中の画面。左側に検証項目、右側に元ページ＋要素確認用アイコンを表示

○長所

• コントラスト調整に便利です。低コントラスト警告部分をクリックでハイライトしたのち、[Contrast]タブをクリックすると、前景色(文字色)・背景色が16進数指定(#RRGGBB)で表示されます。そのまま数値入力・スライダー・カラーピッカーで色を修正すると、コントラスト比やレベルAA/AAA適否がリアルタイムで確認できます。
• WAVE Webサイトでの検証は、URLが定型化されています(https://wave.webaim.org/report#/＋検証ページURL)。このため
  • 結果を画像化しなくてもURLテキストだけで共有できる
  • ExcelでサイトのURL一覧からWAVE検証用URLの一覧を生成して検証を効率化できる(URLコピペの手間が省ける)
  といったメリットがあり、他のツールにはない形での業務効率化が可能です。
• Firefoxでもプラグイン版が利用できます。

×短所

• メニューやメッセージはすべて英語です。英語が苦手な場合は、必要に応じてChromeのテキスト翻訳機能等でカバーする必要があります。
• 見出し・画像・代替テキスト等を示すマーカーが挿入される分、ページ表示のレイアウトが崩れます。必要な種類だけマーカー表示を絞り込む([Datails]タブでチェックを外す)ことで、無駄な表示崩れを軽減できます。
• ウィンドウ最大化状態での検証が困難です。ブラウザ内の画面左側(380px程度)がWAVEの結果表示用に占有されるため、最大化幅相当での検証を行う場合は、表示倍率を調整する等の工夫が必要になります。
• 検証結果のエクスポート機能がないため、レポート表作成の自動化・省力化効果は見込み薄です。

※参照：
WAVE Web Accessibility Evaluation Tool
https://wave.webaim.org/
WAVE Evaluation Tool - Chrome ウェブストア
https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
WAVE Accessibility Extension - Firefox Browser Add-ons
https://addons.mozilla.org/ja/firefox/addon/wave-accessibility-tool/