必須のWeb品質〜アクセシビリティとレベルAAの達成基準とは

PlusサイズのiPhoneの売れ行きが好調のようです。
画面が大きいのが良いのでしょうか。

私もこの頃小さい文字が読みにくいので、やはり大きい画面の方がいいなと思っています。

大きい画面といえば・・・・

この頃、ウェブサイトのアクセシビリティについてお尋ねのクライアント様が増えてきました。

Webアクセシビリティ（Web Accessibility）とは

Webアクセシビリティ（Web Accessibility）とは、Webサイトなどの情報に対する「アクセスのしやすさ」のことを指しています。
利用者の年齢、障がいの有無、利用環境によらず、すべての人が等しく情報にアクセスできるWebサイトが求められています。

皆さんのWebサイトは、いかがですか。

確認すべきアクセシビリティの規格と水準

ウェブサイトの画面デザインを制作する時、必ず注意するのがアクセシビリティの規格です。

基準となる規格は、WCAG 2.0（国内規格であるJIS X8341-3:2016との一致規格）です。

さらにこの規格の中で、準拠すべき水準があります。

官公庁など公的機関のWebサイトにおいては、「適合レベルAA」への準拠が求められています。
法律が整備されてきたこともあり、特に公共のウェブサイトでは、その基準が厳しくなってきています。

そのため、今までは「適合レベルA」を満たすことを前提にデザインしていましたが、最近は「適合レベルAA」を考慮するようになりました。

適合試験結果の公開

準拠するにあたり、適合レベル準拠の試験結果の公開も求められています。
一般企業のWebサイトにおいても、続々と自社サイトの適合レベルAA準拠を発表しています。

【参考】パナソニックグループ
JIS X 8341-3:2016に基づく試験結果（2017年10月1日公開）

適合レベルAAに準拠するためには、例えば以下のような項目をクリアします。

JIS X8341-3:2010

達成基準 1.4.3

文字色と背景色の適切なコントラストが確保さることが明記され、レベル「AA」以上では、具体的な数値基準が設けられています。

達成基準 1.4.4

ユーザーの任意で文字サイズを拡大できるようにすることが明記されています。
モバイル向けサイトも例外ではなく、必ずピンチ＆ズームができるようにする。

達成基準 1.4.5

ロゴマークなどを除き、基本的に文字は画像ではなくテキストで表現する。

達成基準 2.4.6

見出しおよびラベルの表現を適切にする (主題/目的を的確に記述するようにする)。

達成基準 2.4.7

キーボード操作時のフォーカス移動が、視覚的にわかりやすくする。

達成基準 3.2.3 および 3.2.4

ナビゲーションやユーザーインターフェース (UI) の一貫性がサイト内の隅々まで確保されるようにする。

レベルAAのコントラストとは

[達成基準 1.4.3　最低限のコントラスト]　については・・・

テキスト及び画像化された文字の視覚的な表現には、
少なくとも4.5：1のコントラスト比をもたせるように基準があります。

但し、以下の場合は次の通りです。

1.　大きな文字： サイズの大きなテキスト及びサイズの大きな画像化された文字には、少なくとも3：1のコントラスト比がある。

2.　付随的： テキストまたは、画像化された文字において、次の場合はコントラストの要件は該当しない。
アクティブではないユーザインタフェース・コンポーネントの一部である、装飾だけを目的にしている、誰も視覚的に確認できない、または、重要な他の視覚的なコンテンツを含む写真の一部分である。

3.　ロゴタイプ： ロゴまたは、ブランド名の一部である文字には、コントラストの要件はない。

さて、実際のウェブサイトについて、どのように評価すればよいのでしょうか。

評価ツール　miChecker

総務省　みんなのアクセシビリティ評価ツールmiChecker （エムアイチェッカー）をご紹介します。
みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0

ウェブアクセシビリティガイドライン「JIS X 8341-3:2010」を基に、ウェブページのアクセシビリティ検証を行うことができます。

詳細レポートでは問題がある箇所が「問題あり」「問題の可能性大」「要判断箇所」「手動確認」の4種類に分類されます。

詳細レポートの問題箇所の行を右クリックすると、該当するWCAG2.0の解説や実装方法のウェブページに移動することが可能で、より詳細な情報を入手しやすくなっています。

その他「音声ユーザビリティ」フレームでは画像等の視覚的な情報やレイアウト要素を排除したプレビューが確認でき、また「ロービジョン」フレームでは「視力」「色覚異常」「水晶体透過率」を基にシミュレーション表示が可能です。

プレビューが確認でき、また「ロービジョン」フレームでは「視力」「色覚異常」「水晶体透過率」を基にシミュレーション表示が可能です。

参考：
・Web制作：アクセシビリティ対応
・新人Webデザイナーさんに是非読んでほしい本を紹介します：『デザイニングWebアクセシビリティ』