近年、デバイスの多様化や、利用者層の拡大により、ウェブサイトにおいてもアクセシビリティの向上が求められています。
そこで今回は、ウェブアクセシビリティ（webアクセシビリティ）とは何かをご説明したうえで、向上させる為のポイントをいくつかご紹介したいと思います。
ウェブアクセシビリティ（webアクセシビリティ）とは？
まず、“ウェブアクセシビリティとは何なのか？”という事を考えてみたいと思います。
日本のウェブアクセシビリティを前進させる基盤を造ることを活動目的としているウェブアクセシビリティ基盤委員会（WAIC）のウェブサイトでは、以下のように記されています。
ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを意味します。
さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェブコンテンツにとって、ウェブアクセシビリティは必要不可欠な品質と言えます。
（出典：アクセシビリティとは | ウェブアクセシビリティ基盤委員会（WAIC））
つまり、ウェブアクセシビリティが、“ウェブサイトの利用しやすさ”を表す品質基準であることが分かります。
“ウェブサイトの利用しやすさ？”と思われるかも知れませんが、ウェブアクセシビリティに関する法律の整備が進んでいる先進国では、“ウェブサイトが利用しにくい！”という理由で、訴訟問題に発展する事例も急増しています。
その為、海外に展開する日本企業はもとより、今後は日本国内でもウェブアクセシビリティの向上を求められることは、容易に予想されますので、知らないではすまされない状況になりつつあります。
それでは、品質基準となるガイドラインにはどのようなものがあるのでしょうか？
品質基準となるウェブアクセシビリティのガイドライン
ウェブアクセシビリティの品質基準となるガイドラインは、ウェブ技術の標準化団体であるW3Cの定めたものから、独自に制定されたものまでさまざまですが、一般的に知られているガイドラインは以下の通りです。
上記の3つのガイドラインに準拠することは大変だと思われるかと思いますが、以下の経緯により、3つのガイドラインが全て技術的に同じ内容で完全に統一されています。
つまり、現在では、W3C勧告であるWCAGを品質基準のガイドラインとして採用することが主流となっていると言えます。
ウェブアクセシビリティに対応させるためのポイント
それでは、品質基準となるウェブアクセシビリティのガイドラインに対応させる為には、どのような対応が必要となるのでしょうか？
前述のガイドラインは、原本である為に英語で記載されていますが、WAICにより翻訳された日本語版として、 Web Content Accessibility Guidelines (WCAG) 2.0 日本語が提供されており、その中では、達成基準として「A」「AA」「AAA」の3段階の適合レベルが準備されています。
達成基準は、“A”を最低限の達成基準とし、“AA”、“AAA”と段階的に達成基準があがっていきます。ウェブサイト制作では、予算やスケジュール、仕様などによって、目指す達成基準も変わりますが、一般的に求めるレベルは“AA”です。
次に、ガイドラインはあくまでもチェック項目と達成基準のリストであり、何故そのような対応を行う必要があるのかを理解する為には、WCAG 2.0 解説書を参照することになります。
解説書には、チェック項目に対する“意図”、“事例”、“関連リソース”、“達成方法と失敗例等”が記載されており、コーディングの際にどのような事柄に注意が必要なのかを理解することが出来ます。
そして、解説書を読む上ではWCAG 2.0 達成方法集も何度も参照することになります。
達成方法集には、“達成方法に関する重要な情報”、“適用 (対象)”、“解説”、“事例”が記載されており、どのようにコーディングするべきなのかを理解することが出来ます。
なお、前述の資料（ガイドライン、解説書、達成方法集）を見ると分かるように、資料内にはコーディング例が記載されていません。これは、HTML仕様（HTML5等）に影響されることのない資料として作成された為です。
その為、ウェブサイト制作の工程として、コーディングした結果が本当にガイドラインに準拠出来ているのかを判定する必要があります。
ウェブアクセシビリティチェックに対応した便利なツール
現在、ウェブサイトの重要性が日増しに高まっていく中、ウェブサイトに掲載するコンテンツ量は飛躍的に増加しています。そして、ウェブサイトに掲載するコンテンツへのアクセシビリティの重要性が高まっていることもご理解頂けたかと思います。
しかしながら、増加するコンテンツに対してウェブアクセシビリティをすべて人の手により検証することはかなりのコストを必要とするため、簡単には実現出来るものではありません。
そこで、役立つツールをご紹介します。
数あるウェブアクセシビリティのチェック項目のうち、ツールを利用することで費用を削減し、一定の水準で広い範囲の検証をすることが出来ます。
Lighthouse（ブラウザー拡張機能）
Lighthouse（ブラウザー拡張機能）とは、Google社が提供しているウェブサイトのパフォーマンスや品質、SEO観点などの改善項目を自動でレポートしてくれるツールです。
ブラウザー拡張機能（Chrome版、Firefox版）として提供されており、ウェブアクセシビリティについては、レポート内の“Accessibility”という項目にて、言語設定や色の設定、視覚障がい者向けスクリーンリーダー対応といった項目に関する診断を実施してくれます。
axe DevTools（ブラウザー拡張機能）
axe DevTools（ブラウザー拡張機能）とは、Deque社が提供しているウェブアクセシビリティチェックをした上で、レポートしてくれるツールです。
ブラウザー拡張機能（Chrome版、Firefox版）として提供されているもので、Lighthouse（ブラウザー拡張機能）とは異なり、ウェブアクセシビリティについてのみ診断を実施してくれます。
なお、axe DevTools に搭載されている診断機能は、Lighthouse（ブラウザー拡張機能及び、コマンドライン ツール）のエンジンとしても採用されています。
Lighthouse（コマンドライン ツール）
Lighthouseは前述のブラウザー拡張機能だけでなく、Lighthouse（コマンドライン ツール）として、コマンドラインツールやNodeモジュールから利用することも出来ます。これにより、ウェブサイトを一括で検証したり、ビルドツールに組み込んで開発しながらウェブアクセシビリティチェックを実行したりすることも可能です。
また、公式サイトに掲載されているドキュメントにて、Gulpから実行する手順が解説されていますので、初めての方でもスムーズに導入することが出来るかと思います。
axe Monitor（ウェブサービス）
axe Monitor（ウェブサービス）は前述のブラウザー拡張機能だけでなく、ツールに設定したウェブサイトに対して、HTMLを解析した上で、ウェブアクセシビリティチェックを実行してくれる為、前述までのページ単位でのチェックとは違い、ウェブサイトを一括で検証することが出来ます。
複数のウェブサイトに対するウェブアクセシビリティチェックにも対応しますので、運用コストを大幅に抑えられます。
以上のように、ウェブアクセシビリティチェックによく使われるツールをご紹介してきましたが、ツールによる自動チェックのみで確認可能な項目は全体の半分にも満たないのが実際のところです。例えば、画像に対する代替テキストがあるかないかはツールでチェック可能ですが、その代替テキストが文脈的に正しいものか、といった部分は、現状、ツールだけで判断することは難しいでしょう。
最終的には、アクセシビリティチェックがいかに必要なのかについてよく理解し、ウェブサイトの訪問者を想像しながら判断出来るような人がチェックをしなければならないと言えるでしょう。
最後に
今回、ウェブアクセシビリティチェックに関して色々とご紹介しましたが、“ウェブサイトの利用しやすさ”の本質は、誰もが多様なデバイスからコンテンツにアクセス出来るようにすることに他なりません。“誰にとってもよいこと”であるがゆえ、ウェブアクセシビリティチェックは今後、業界では当たり前の対応になっていくことが十分考えられます。
しかし、チェックに合格するためには、企画、制作段階での達成基準や実装技術の理解の確認や実施の徹底、チェックツールを用いた全ページのテストと修正の実施など、サイト制作の全工程での改善と見直しによる継続的な品質管理が不可欠と言えます。
その為、新たなニーズというと大げさかもしれませんが、必要になってからではなく、今から少しずつでも、ウェブサイト制作のテスト工程に、ウェブアクセシビリティチェックを導入されてはいかがでしょうか。