Webアクセシビリティのチェック項目と方法は?役立つツールも紹介

Webサイトの閲覧が身近になった今、Webサイトを運用する側には、障がいの有無に関わらず全てのユーザーが使いやすいWebサイトの提供を心掛ける必要があります。そこで、Webアクセシビリティのチェック項目や方法、お役立ちツールなどを紹介します。

アクセシビリティの基礎知識

『誰もが簡単に情報にアクセスできること』を、アクセシビリティといいます。近年、デジタル活用において重要視されているアクセシビリティについて、その意義や有効性について理解を深めていきましょう。

全ての人が使えるかどうか

Webアクセシビリティを考えるとき、『全ての人が使えるかどうか』という視点に立つことが、とても大切です。

例えば、画面の小さなスマートフォンなどで閲覧する際、画像の内容を示すテキストがあれば、画像のサイズに関わらず内容を把握できます。

Web技術の標準化を行う非営利団体W3Cは『障害のある人がWebを使えるようにすることを指す』としており、このことから、障がいのある人だけを対象とするとの誤解もあります。

しかし、アクセシビリティの向上は健常者にとっても、有益なものであるのです。

なぜアクセシビリティが大切なのか

公共交通機関や行政情報などの重要な情報は、いつでも・誰にでも、Webサイトを通して確実に情報を得られることが理想です。身体的な特徴やアクセス環境などによって情報が得られないことがあってはなりません。

また、ビジネスにおいては、アクセシビリティが障がい者だけでなく健常者にとっても最適化されていることを理解することがより重要になります。検索エンジン最適化がもたらされ、大手の検索エンジンからやってくるユーザーを確保し、機会損失の回避につながるといえるでしょう。

出典:アクセシビリティとは | ウェブアクセシビリティ基盤委員会(WAIC)

アクセシビリティ向上のためにすべきこと

具体的に、Webアクセシビリティ向上のためには、どのような取り組みをする必要があるのでしょうか。

まずは基準となる指標について理解しよう

「何を基準にしてWebアクセシビリティに取り組むべきか分からない」と言う人もいるでしょう。

そのような場合は、日本の各省庁をはじめ、日本企業の多くが準拠を目指している基準『JIS X 8341-3』の理解から始めてみましょう。

この規定が求める要件や意図、実装方法、メリットなどを理解することで、その後のWebアクセシビリティ対応の指標として活用できます。

達成すべき項目のチェックリストを作ろう

『JIS X 8341-3』に対応するには、Webコンテンツが規格の要件を満たしているかどうかをチェックする必要があります。そこで、達成すべき項目のチェックリストを作りましょう。

一つの例として、『ウェブアクセシビリティ基盤委員会』が例示するリストを紹介します。

JIS X 8341-3:2016 試験実施ガイドライン(達成基準チェックリストの例)

この達成基準チェックリストには、A・AA・AAAの適合レベルすべてが含まれています。目標とする適合レベルに合わせて、必要無いものは削除して利用可能です。

日本アクセシビリティ普及ネットワークが運営する『情報バリアフリーポータルサイト』の例示する『実装チェックリスト 等級A』も参考になります。項目が多岐に渡りますが、分かるところから着手していきましょう。

実装チェックリスト 等級A(HTML版) - 情報バリアフリーポータルサイト

具体的には何から手をつければいいのか?

Webアクセシビリティに対応させるために、具体的に何から手を付ければよいのでしょうか?そこで、取り組むべきアクセシビリティについて解説します。

文字サイズに関しては、可視性を向上させるために、文字サイズの拡大機能を付けましょう。目を凝らして文章を確認していくことは、とても疲れるものです。

ページについては、それぞれのページにその内容が想像できるような適切なタイトルを付けておきます。特に音声読み上げなどでは、ページタイトルが適切に設定されていないと、閲覧者がタイトルから連想できません。

ヘルプページを設けることも有効です。探している情報が見つけやすくなり、WEBサイトに対する安心感がより高まるでしょう。

おすすめのアクセシビリティチェックツール

インターネット上には、アクセシビリティチェックに役立つツールが、無償で配布されています。その中からいくつか紹介しましょう。

総務省が開発 miChecker

総務省が開発し、無償で提供している『miChecker』は、JIS X 8341-3の検証を網羅的に実施する際に必要な評価ツールです。行政庁などのホームページが誰にとっても利用しやすいかどうかのチェックができます。

miCheckerでは、大きく分けて、次の三つを行うことが可能です。

  • アクセシビリティ検証・音声ユーザビリティ可視化
  • ロービジョン シミュレーション
  • JIS X 8341-3:2016 達成基準チェックリスト作成サポート

総務省|情報バリアフリー環境の整備|みんなのアクセシビリティ評価ツール:miChecker (エムアイチェッカー)Ver.2.0

alt属性確認に Alt&Meta viewer

『Alt&Meta viewer』は、画像に設定されたalt属性を、ツールチップで表示することが可能です。ヘッダのTitle・Meta情報を一覧で表示できます。

alt属性とは、画像など非テキストコンテンツに対して、ユーザーにそれと同様の情報を提供するテキストのことです。alt属性には、次のようなメリットがあります。

  • 画像が表示されない時に、代わりにテキストが表示される
  • 視覚障がい者への補助テキスト
  • SEO効果も期待

Alt & Meta viewer – Chrome ウェブストア

色のコンストラスト比を確認 ColorTester

2色のコントラスト比を計算し、評価するツールが『ColorTester』です。視覚に障がいがあったり視力が低かったりする人にも見やすくするには、コントラスト比が適切かどうかをしっかり確認することが重要になります。

また、このツールを使うことで、Webサイトの制作者自身が、よりユーザーの情報の受け止め方を考察する機会にもつながり、適切に情報を伝達させる感覚が養われるでしょう。

ColorTester - JIS X 8341-3:2010 (WCAG 2.0)の達成基準に基づき背景色と前景色のコントラストのチェックを行うソフトウェア - アルファサード株式会社

まとめ

Webアクセシビリティは、デジタルマーケティング時代において、もはや取り組むべきものと言えるでしょう。公共的な情報であれ、民間企業の情報であれ、ユーザーの使いやすさへの配慮は不可欠です。

Webサイトに関わりながらもまだ取り組んだ経験が無いという人は、ぜひアクセシビリティへの重要性を理解しましょう。そして、誰もが使いやすいやさしいホームページ作りを目指してみてはいかがでしょうか。


Offersエージェント」では、業界で活躍するプロフェッショナルがあなたの転職を徹底サポート。CxO経験者を含む現役エンジニア・デザイナー・プロダクトマネージャーが在籍し、職種に特化した専門的なアドバイスをご提供・非公開求人の紹介も可能です


この記事をシェア

関連記事


副業・フリーランス

プログラミング

デザイン

インタビュー

お金

採用・組織

転職

イベントレポート