デジタルマーケティングTips

Webアクセシビリティ対応の基礎まとめ

記事タイトル画像:Webアクセシビリティ対応の基礎まとめ

民間事業者等のWebサイトのアクセシビリティ対応(バリアフリー化)の義務化に関する法改正が、2021年5月に可決成立、6月に公布されました。そこで、Webアクセシビリティが求められる背景と、まず対応を検討すべき内容、おすすめツール等についてまとめました。

要点

Webアクセシビリティ関連の各種基礎知識まとめ

  1. Webアクセシビリティ=Webのバリアフリー化
  2. 障害者差別解消法の2021年改正で、民間事業者も対応が義務化
  3. 国内規格「JIS X 8341-3:2016」に沿って現状把握と対応を進めるとよい
  4. 便利なチェックツールを活用すれば初心者でも現状が把握できる
  5. 重要対応項目の例

メルマガでも情報を配信中です! ぜひご登録ください。

Webアクセシビリティ=Webのバリアフリー化

Webアクセシビリティとは、視聴覚や手・腕の動きに障害があったり、加齢により機能が低下したりしても、何らかの代替手段によって健常者・若者と同様にWebサイトの閲覧・操作等ができることを指します。

日本国内の視覚・聴覚・上肢運動機能障害者は約128万人で、そのうち8~9割がインターネットを利用しています。つまり日本の総人口の1%弱に相当する人たちが、障害を代替手段で補いながらWeb等を利用しています。

また、現在の日本は急速に高齢化が進んでいます。65歳以上の人口(推計値)は2020年時点で全体の28.8%で、これが2050年には37.7%に増加する見込みです。

障害や加齢により視力・聴力・運動能力が低下しても使えるWebサイトであるかどうかは、Webサイト運営者にとって年々重要な要素となりつつあります。

障害者差別解消法の2021年改正で、民間事業者も対応が義務化

Webアクセシビリティは、障害者差別防止の観点から、法整備による義務化が進んでいます。

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

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

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

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

民間事業者に要求されるレベルや、改正法の施行時期は、2021年6月時点では未定です。サイトの状況によっては、リニューアルや大規模改修が必要になる可能性もあります。今後の動きに注意しつつ、まずはサイトの現状を把握することが重要です。

地方自治体の条例も要チェック

地方自治体によっては、条例等により、既に事業者等の合理的配慮を「努力義務」から「義務」に昇格させているところもあります。(例:東京都新しいウィンドウで開きます)

各条例によって罰則の有無や内容はさまざまなので、自社・自団体の所属する都道府県の条例を確認しておくことも重要です。

Webアクセシビリティの規格

Webアクセシビリティのレベルは、国内規格「JIS X 8341-3:2016」や、元になった国際標準「Webコンテンツ・アクセシビリティ・ガイドライン(WCAG) 2.0」への準拠度によって示すことができます。達成項目の種類により、「適合レベル」がA(シングルエー)・AA(ダブルエー)・AAA(トリプルエー)の3段階で定められています。(AAAが最高位)

大まかには以下の4カテゴリーに分かれ、その中に個別の適合項目が列挙されています。

  1. 知覚可能:情報が、利用者が知覚できる方法で提示可能であること
  2. 操作可能:UIが問題なく操作可能であること
  3. 理解可能:情報及びUIの操作が理解可能であること
  4. 堅牢性:支援技術を含むUAが確実に解釈できるよう堅牢であること

条件を満たし、専門家による適合試験を通過すると、「JIS X 8341-3:2016 適合レベルAA準拠」のように端的な記載が可能になります。レベルAやAAについては、ウェブアクセシビリティ基盤委員会の早見表や解説サイトを見ると、対応内容や背景が詳しく記載されています。

全ページ全項目で該当レベルの「準拠」が難しい場合は、範囲や条件を限定する記載も可能です。

  1. 項目を制限する
    ・一部項目が試験を通過しなかった場合、今後の対応方針を記述のうえで、試験通過項目を列挙し「一部準拠」と記載する
    ・試験実施の有無・結果を問わず『JIS X 8341-3:2016』を使用して制作したことを示す場合、目標適合レベルと対応項目を自己申告し「配慮」と記載する
  2. 範囲を制限する
    ・特定のドメイン・ディレクトリのみを範囲として定義する
    ・特定のドメイン・ディレクトリを例外範囲として除外する

これらは、サイト内に「Webアクセシビリティポリシー」のページを設置し、現在の状況や将来の達成目標を記載することで、訪問者にわかりやすく示すことが可能です。また、試験結果を検証企業が証明書として提供している場合は、アクセシビリティポリシーのページからリンクして掲載するのがおすすめです。

おすすめチェックツールの紹介

Webアクセシビリティの分野では、無料で利用できるチェックツールが数多く提供されています。単体ソフトやブラウザの拡張機能など、提供形態も様々です。ここでは比較的有名なツールをピックアップしてご紹介します。

miChecker

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

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

なお、レンダリングは基本的にInternet Explorer 11ベースです。IE11非対応の表示要素がある場合、別の検証ブラウザで使えるツールを併用するのがおすすめです。

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

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

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

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

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

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

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

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

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

図:miChecker 音声ユーザビリティ視覚化
ロービジョンシミュレーション中の画面。左に元ページ、右にシミュレーション結果、下に詳細レポートを表示

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

注意:利用にはJava実行環境が必要

miCheckerは単体では動作しません。利用するには、Java 32bit版 Version 8の実行環境のインストールが必要です。

Oracle社の提供するJava実行環境新しいウィンドウで開きますは、2019年4月にライセンスが変更になり、現在は企業・事業者が使用する場合利用料新しいウィンドウで開きますが必要です。

無料の代替環境としては、AdoptOpenJDK新しいウィンドウで開きますmiChecker利用ガイド新しいウィンドウで開きます内で紹介されています。

Accessibility Insights

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

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

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

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

WAVE

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

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

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

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

重要対応項目の例

コントラスト比の確保

レベルAAを達成するには、文字(前景)と背景のコントラスト比を4.5倍以上(AAAの場合7倍以上)にする必要があります。配色の調整は多くの場合サイト全体のデザイン時に決まるので、サイトの新規構築・リニューアル時に対応するのがベターです。

チェックツールにはコントラスト計算機能があるものも多く、RGB値からの計算方法が覚えられなくても手軽にコントラスト比を確認・調整できます。

キーボード操作対応

キーボード操作対応は、マウス/タッチパネル操作を一切排した状態でもキーボードだけで全機能を使えることが要件です。以下の点に注意が必要です。

  • キーボード操作時にフォーカスインジケーターを消す設定になっていないか(非表示設定だと現在位置が視認できない)
  • ハンバーガーメニューやアコーディオン等の開閉部について、キー操作でフォーカスを受け付ける要素を使用しているか(aやbuttonなど)
  • タブレット(やスマートフォン)用のデザインでもハードウェアキーボードでの操作を受け付けるか
  • 動画プレーヤーが独自開発の場合、キー操作で全機能使える設計になっているか

動画の字幕作成

動画掲載ページでは字幕(状況説明用テキストを含む)の作成がほぼ必須となります。方法は、(1)動画再生中にテキスト字幕を別途表示する、(2)動画編集で動画内に情報を埋め込む、の2種類に大きく分かれます。

  1. テキスト字幕を別ファイルとして作る
    ○メリット:
    ・技術的/環境的ハードルが低く、テキストエディタがあれば字幕ファイルが作成できる
    ・字幕の非表示化・多言語化など切り替えが容易
    ×デメリット:フォント・色・文字サイズの自由度が低い(スタイル情報をマークアップしても有効にならないことがある)
  2. 動画編集で映像内に字幕を入れる
    ○メリット:
    ・フォント・色・文字サイズの自由度・確実性が高い
    ×デメリット:
    ・動画編集の技術や環境が必要
    ・字幕の表示切り替えができない

テキスト字幕ファイルは、WebVTT(*.vtt)やSubRip Text(*.srt)など、表示開始・終了時刻と表示文字列をセットで記述するものが主流です。

短い簡単な動画であれば、動画をプレーヤーや編集ソフトでシーク表示しながら、テキストエディターで容易に字幕ファイルを作成できます。量が多い場合は、音声認識による文字起こしソフト/クラウドサービス等の検討がおすすめです。

まとめ

Webアクセシビリティは、バリアフリー化の法改正や高齢者の増加により、年々重要度が増しつつあります。既にできている対応項目とこれから対応すべき項目を確認し、早いうちから対応策を決めて進めていくことをお勧めします。

関連ページ

関連事例紹介

詳細はリンク先の事例紹介ページをご覧ください。

マックスマウスからのお知らせ

Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け!

WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。

いますぐご登録ください!