自分でできるWebページのアクセシビリティチェック
※ 2017年03月24日 20:48ごろ修正しています。本日時点で、WHATWGはHTML Validatorを提供していませんでした。
インターネット上に公開されているWebページはあらゆるユーザーの目に触れるものです。どうせなら、誰にとっても便利で使いやすく、不自由なく閲覧できるものにしたいですよね。
Webサイトの品質を保つために検品作業は欠かせないものですが、皆さんが業務や趣味で制作した成果物は普段どのような方法やツールで検品をなさっていますか？
たとえば、W3CやWHATWGが提供しているHTML Validatorを用いてマークアップの文法違反を見つけることや、Google Chrome、Mozilla Firefox、Microsoft Edgeといった異なるブラウザで作ったページを確認してレイアウトの崩れがないかを確認したりなどが思い当たるかと思います。
JavaScriptで機能を開発したのであれば、さまざまなブラウザで同一の挙動であるかどうかを確認するのはもちろん、不正な値を渡した場合の挙動などもテストをするでしょう。
目で見て手で動かして、といった画面上のレンダリングや挙動についての検品はいろいろとすぐに思い浮かぶと思います。
しかしながら「自身の成果物をアクセシビリティの観点から検品を行う」となるとすぐには思い浮かばないのではないでしょうか。
そこで今回は、手軽に実施できるアクセシビリティ検品のポイントを少しだけ紹介したいと思います。
アクセシビリティ検品
手軽な方法の1つとして「読ませたい文字がすべて目で見えるか」を自身で確認することが挙げられます。これはWebページのもっとも根本的な部分です。情報を掲載するためのWebページで、必要な情報が取得できない状況になっていないかを確認することはとても重要です。
たとえば、以下のようなものがあげられます。
- 前景色と背景色のコントラスト比が低く、文字が読み取れない
- 要素と要素が重なってしまって下敷きになっている文字が読み取れない
- 文字がはみ出ているが、スクロールできずに文字が読み取れない
そこに情報があるのがわかるだけでなく、しっかり読み取れる状態になっているかどうかを確認する必要があります。
他にも、マウスが無い状態でもキーボードのみでWebサイト内の回遊ができ、マウスを用いたときと取得できる情報に差異がないかどうかも重要です。Tabキーのフォーカス移動ですべてのリンクやボタンなどが選択できる状態かどうかも確認するべきでしょう。
その際に、Tabキーでフォーカスがどこに当たっているかが目で見てわかるかどうかも確認するべきです。たとえば、フォーカスがあたったときに下線がでたり、枠がついたり、太さが変わったりなどがよくある表現です。フォーカスが今どこに当たっているのかがひと目でわからない状況にならないようにスタイリングされているかも確認するべきでしょう。
このように、目で見て理解でき、キーボードだけで操作できることが確認できたあとは、目を使わずともWebページの内容が理解できるかを確認してみましょう。
音声で聞くWebページ
たとえば、以下のような画像があったとします。
上記の画像には、alt属性（代替文字）が設定されていません。そのため、目で見る分には「MITSUE-LINKS」という文字が読み取れ、当社のロゴであることがわかりますが、耳で聞いたときにはこの画像はその存在があること自体がユーザーに伝わりません。
基本的なことですが、多くの場合alt属性の値が空のimg要素はスクリーンリーダーで読み上げられず、そこに画像があることに気づくこと自体が困難になります。
耳で聞いただけで、正しくその画像の内容が理解できる代替文字を設定するべきです。「ロゴ」や「画像」などは意味のない代替文字です。読み上げられるべき正しい文字列をalt属性に設定するか、figure要素及びfigcaption要素を用いましょう。
画像のほかにも、適切な要素でマークアップがされているかを確認することはとても重要です。具体的には以下のようなものが修正するべきものと考えられます。
- 見出しの役割を果たしているテキストが、h1～h6以外の要素でマークアップされている
- 順序が変化してもユーザーに伝わる情報に変化がないリストが、ol要素でマークアップされている
- [type="hidden"]ではないinput要素が、title属性やaria関連の属性を持たず、且つlabel要素と関連付けられていない
- 表としてではなく、レイアウト目的で用いられたtable要素がrole="presentation"を持っていない
単純にHTMLとCSSのみであれアクセシビリティチェックは大切です。セマンティクスの観点から見て妥当なマークアップになっているかは常に念頭に置くべきでしょう。
通常用意されているHTMLのセマンティクスだけではカバーできない場合もありますが、そういった場合スクリーンリーダーを用いるユーザーにとってrole属性、各種aria-*属性が定義されているWAI-ARIAがとても重要になってきます。
昨今では一般的な技術仕様となってきているWAI-ARIAですが、正しく実装できていますでしょうか。WAI-ARIAについては当社のフロントエンドBlogやコラムでも度々触れていますが、説明については2009年5月1日の記事「WAI-ARIAの誕生と現状」にて触れています。
アクセシビリティ検品を行うのであれば、当然WAI-ARIAにいたるまで正しく実装できているかしっかりと確認しなければなりません。
先述のとおり、HTMLの妥当性、CSS、JavaScriptの挙動、WAI-ARIA等気にしなければならない事柄は多々ありますが、実際にいざアクセシビリティチェックをしようとしても何を基準に確認を行えばいいのかがわからなければアクセシブルであるかどうかを判断することができません。
そんなとき、Webコンテンツのアクセシビリティガイドラインが役に立ちます。
アクセシビリティのチェック項目はWCAGの仕様を参照しよう
WCAGとは、Web Content Accessibility Guidelinesの略称で、W3Cが勧告しているWeb標準のアクセシビリティガイドラインです。
Web Content Accessibility Guidelines (WCAG) 2.0 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。 このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、学習障害、認知障害、運動制限、発話困難、光過敏性発作及びこれらの組合せ等を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。又、このガイドラインに従うと、多くの場合、ほとんどの利用者にとってウェブコンテンツがより使いやすくなる。
最新版は2.0が正式勧告されています。
原文は英語ですが、情報通信アクセス協議会の「ウェブアクセシビリティ基盤委員会 (WAIC)」が公開している和訳版が存在しています。
WCAGには達成基準レベルがあり、A、AA、AAAの3種類が存在しています。自身の成果物はどのレベルに準拠するのかを先に決めてからチェックするとよいでしょう。
また、達成すべき項目が大きく分けて4つ記載されています。
- 1. 知覚可能
- 2. 操作可能
- 3. 理解可能
- 4. 堅牢性
準拠レベルや、それぞれについての詳細は以下を参照してください。
Web Content Accessibility Guidelines (WCAG) 日本語訳
今すぐ使えるアクセシビリティ検品ツール
WCAG2.0に定義されている達成基準について、1つ1つ確認していくのは大変です。
細かく検品することは大変ですが、検品を行う際にアクセシビリティ検品を助けてくれる便利なツールをいくつか紹介したいと思います。
-
当社のアクセシビリティBlog2014年9月5日「ARIA Validatorを利用したWAI-ARIAの検証」でも紹介したGoogle Chrome用の拡張機能です。WAI-ARIA1.0の仕様に基づいて自動的に検証を実施してくれます。
-
こちらもGoogle Chromeのブラウザ拡張ですが、Firefoxでも用意されています。開発者ツールの拡張で、現在見ているWebページの解析を行ってくれるツールです。WAI-ARIAや色味のコントラスト比などまで指摘をしてくれます。
-
こちらもGoogle Chromeのブラウザ拡張です。HTMLのアクセシビリティを簡単にチェックできるCSSとして知られるa11y.cssを適用してくれるツールです。「エラーのみ」「警告とエラー」「廃止されたもの、警告、およびエラー」「すべて」の4パターンから選ぶことができ、指摘された要素には色分けされたアウトラインが描画されます。マウスオーバーで該当箇所の指摘内容を読むことができます。
-
テキストと背景色のコントラストが、WCAG2.0の
1.4.3 コントラスト (最低限)
を満たせているかを確認できるツールです。 -
macOSやiOSに標準搭載されているスクリーンリーダーです。WAI-ARIAやHTMLセマンティクスが妥当かどうかを手っ取り早く確認することができます。
-
Windows向けのスクリーンリーダーです。オープンソースソフトウェアであり、日本語版も存在します。
他にも世の中には様々なアクセシビリティチェックツールが存在します。いまやアクセシビリティはWeb制作を行う上で欠かすことのできないものです。HTMLの妥当性や、レイアウトの崩れ、文言チェックだけではなく、これらを駆使してHTMLセマンティクスやWAI-ARIA、コントラスト、など細かいところまで確認を怠らず、幅広いあらゆるユーザーが偏りなく情報を取得できるWebサイトを制作していきたいですね。