株式会社ぺいじず

2014.10.23

アクセシビリティ達成基準レベル AA

iPhone6の画像

iPhone6Plusの売れ行きが好調のようです。
画面が大きいのが良いのでしょうか。

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

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

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

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

基準となるのは、WCAG 2.0(日本の場合は JIS X8341-3:2010)です。

今までは達成基準レベル[A]を満たすことを前提にデザインしていましたが、
最近は達成基準レベル[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の解説や実装方法のウェブページに
移動することが可能で、より詳細な情報を入手しやすくなっています。

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

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

  • このエントリーをはてなブックマークに追加

関連記事