アクセシビリティチェックの具体例「企業キャラクター・イメージソング紹介サイト」
【チェック対象】
企業のイメージキャラクターやイメージソングなどが掲載され、アニメーションで動くキャラクター画像や背景が設定されたウェブページのアクセシビリティチェックです。
【チェック内容・結果・改善策】
WCAG2.1の各項目とともに行ったチェック内容・チェック結果・改善策をご紹介します。
※実際は本記事で紹介した項目以外のチェックも行っております。また、「ウェブアクセシビリティの具体的なチェック方法とは?事例をもとに徹底解説!(製品紹介・問い合わせページ編)」で解説したチェック方法や改善策においては、本記事では割愛しています。
チェック内容)
ページ上に埋め込まれているイメージソング動画について、何らかの理由で動画を再生できないユーザーに動画内の情報が伝わるかをチェックしました。
チェック結果)
動画の内容をテキストに起こした代替テキストが存在しませんでした。
改善策)
イメージソングの歌詞などを記載したページを別途作成し、そのページへのリンクを動画の近くに設置しました。尚、動画の代替テキストは歌詞などの音声情報だけでなく、イメージキャラに扮した歌手が歌っているなどの視覚的に得られる情報もテキストに起こす必要があります。
チェック内容)
ページ上に埋め込まれているイメージソング動画について、何らかの理由で映像は再生できるが音声を聞くことが出来ないユーザーに動画内の情報が伝わるかチェックしました。
チェック結果)
映像上にキャプションが存在しませんでした。キャプションは、歌詞などのメイン音声だけでなく、「軽快な曲が流れている」など、その動画の内容を理解するために必要な音声情報を全てテキスト化する必要があります。
改善策)
音声で得られる情報を全てテキスト化したキャプションを動画内に設けました。ちなみに、Youtube YouTube などでは、動画上の音声を自動的に字幕化する機能がありますが、正確なキャプションが生成されるとは限らない為、この機能に頼ることは推奨していません。
チェック内容)
イメージキャラクターの説明が書かれている部分について、複数のキャラクターとキャラクター名、それぞれのキャラクター説明文が並んでいる部分をスクリーンリーダーで順に読み上げ、キャラクター名と説明文の結びつきが読み上げ内容から判断できるかチェックしました。
チェック結果)
キャラクター名を一通り読み上げた後、各説明文を読み上げるという順序となっており、キャラクター名と説明文の結びつきが分かりづらい表現になっていました。
改善策)
キャラクター名⇒そのキャラクターの説明文という順序で読み上げるように修正しました。スクリーンリーダーによる読み上げは基本的にソースコードの記述順序に従って読み上げます。その為、今回はキャラクター名⇒そのキャラクターの説明文の順で記述することで解決しました。
チェック内容)
背景画像の上に白抜きのテキストを記載していた箇所において、視力が弱いユーザーや画面に光が入るといった環境においてもそれが読めるかどうかを、画面上のコントラスト比を測る「カラーコントラストアナライザー」を使用してテキストと周囲の色とのコントラスト比をチェックしました。
チェック結果)
コントラスト比が場所によっては「1.68:1」と非常に低い値となっていました。
改善策)
コントラスト比が「4.5:1」以上となるように配色を変更する必要があります。

チェック内容)
キャラクターが手を振るアニメーションの画像が用いられていましたが、ADHD※を患うユーザーがアニメーションに気を取られて、それ以外の箇所の閲覧が困難になる恐れがないかをチェックしました。
※ADHDとは、注意欠如・多動症。年齢あるいは発達に比べて注意力が足りない・衝動的で落ち着きがないといった特性があるために日常生活に支障をきたしている状態を指します。時計の秒針の動きに気を取られて、1時間以上その場から動けなくなるという事例もあります。[大夕1]
チェック結果)
アニメーションを止める手段がありませんでした。
改善策)
アニメーションする画像の近くに動作を止める為の一時停止ボタンを設ける必要があります。
チェック内容)
イメージソングの映像中にスポットライトや演出のレーザーなど、激しい明滅を伴うシーンがありました。視聴するユーザーの光過敏性発作を誘発させる恐れがないかをチェックしました。
チェック結果)
1秒間に明滅や閃光が何回発生しているかを計測するツール※で測ったところ1秒間に3回以上の明滅が行われていました。[大夕2]
※計測するツール・・・無償のものであれば「PEAT」というツールが存在します。
https://trace.umd.edu/peat/
改善策)
問題のシーンの明滅回数を少なくする、光量を落とすなどの対応を行う必要があります。

ウェブアクセシビリティチェックを正しく行うためのポイント
適切なウェブアクセシビリティチェックを行うには、以下を意識する必要があります。
【1】全てのユーザーを対象としたチェック
アクセシビリティというと、高齢者や心身にハンデを抱えている方への対応というイメージを持たれがちですが、実際にはそれだけでなく、例えばマウスが壊れていてキーボードで操作するしかないユーザーや、屋外で端末を操作している為に画面に光が入って見難くなっているユーザーなど、健常者も含めた全てのユーザーがウェブアクセシビリティの対象となります。
特定のユーザーにとっての使いやすさにばかり目を向けていると、それ以外のユーザーにとって使い難くなったり、チェックの効率が悪くなったりすることがあるため、あくまでWCAGの定める達成基準を満たしているかどうかをチェックするように心がける必要があります。
例えば、スクリーンリーダーによる読み上げの場合、使用するスクリーンリーダーによっては、漢字や英単語の読み間違えが発生することもあります。スクリーンリーダーを使用すると、スクリーンリーダーを使用しないユーザーにとって、読みにくい文章となってしまいます。このような場合はWCAGの基準に違反していない限り、指摘することはありません。

【2】サイト制作者への具体的な対応方法の提示
ウェブサイト制作の担当者によっては、アクセシビリティについての知識が不足していることがあります。
問題点を指摘するだけでは修正できないこともありますので、そのような場合には、具体的な修正案を提供できるように、アクセシビリティに加えてHTMLやCSSなどの知識も一定程度持つことで、修正が必要な箇所や変更方法などをお伝えする伝えることができます。

【3】開発上流工程でのチェック実施
ウェブアクセシビリティのチェックで問題が見つかると、修正には非常に多くの時間と作業が発生することがあります。場合によっては、ウェブサイトを根本的に再設計しなければならないこともあります。
修正が遅れると、ウェブページのリリース予定に間に合わないこともあるため、要件定義や設計、パーツ作成の段階で早めにアクセシビリティの対応を考慮することが重要です。

まとめ
ウェブアクセシビリティチェックは、ウェブサイトの使いやすさとアクセスの向上に不可欠なプロセスです。アクセシビリティに焦点を当てることで、ユーザーエクスペリエンスが向上し、企業やブランドの信頼性も高まります。
当社では、最新のアクセシビリティガイドラインに基づいて厳格なチェックを行い、視覚的な制約を抱えるユーザーやモバイルデバイスを利用するユーザー、キーボードだけで操作するユーザーなど、多様なニーズに応えられるウェブデザインとコンテンツ制作をサポートします。当社のソフトウェアテスト・第三者検証サービスについて詳しく知りたい方は、下記ページをご覧いただき、お気軽にお問い合わせください。

この記事の執筆者 :G・T (ポールトゥウィン株式会社 ソフトウェア検証部門所属)
日頃から「調べること」が好きで、気になることは直ぐにググってしまいます。本記事の「ウェブアクセシビリティテスト」でも、調べもの好きな性格が活かされました。