ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その３・デザイン編）

mathme

2023年3月12日 20:27

この記事は「ウェブサイト制作案件でのアクセシビリティのチェックポイントを個人的に整理した話（その２・情報設計編）」の続きです。

デザインは視覚表現が大きな割合を占めるため、アクセシビリティのチェックポイントが多くなります。
特にフォーム機能があるウェブサイトの場合は確認しなければならない達成基準が増えるので注意が必要です。

また、アニメーションや視覚に依存しない動的な演出についてもここにまとめています。

サイト内で同じ機能を有するUIはサイト内で同じレイアウト・デザインとする

グロナビやフッターリンクといった、サイト全体で共通して利用されるセクション、およびトップページへ移動するリンク、ページの上端へ移動するリンクといったUIについては、サイト全体で同じレイアウト・デザインになっている必要がある。

関連項目：3.2.3（AA）、3.2.4（AA）

グロナビやメニュー等のナビゲーション内で現在地を明確に示す

ユーザーがサイト内での自分の位置を認識し、必要なコンテンツにすぐアクセスできるように、ナビゲーションで現在位置を表現できる場合はこれをおこなう。

ジェスチャによる操作を前提にするコンテンツにはそれ以外の方法で同様の操作するUIを設ける

フリック、スワイプ、ピンチなどでコンテンツを操作する機能を提供する場合、マウスやキーボードなどで同様の操作ができるようにする。

5秒以上継続するアニメーション・演出は使用しない

やむを得ず使用する場合は、ユーザーが非表示・一時停止・停止できるUIおよび機能を設ける必要がある。

自動でコンテンツを切り替えない

やむを得ず使用する場合は、ユーザーが非表示・一時停止・停止できるUIおよび機能を設ける必要がある。

音声の自動再生はさせない

スクリーンリーダーの利用者は読み上げ音声でサイト内容を確認するため、自動で音声が再生されると干渉して操作に困難をきたす。
３秒以上継続する音声は自動再生させない。

強い点滅は使用しない

強い点滅は、ユーザーによっては発作を引き起こすことがあるため使用してはならない。

関連項目：2.3.1（A）、2.3.2（AAA）

色だけに依存した情報提供をしない

「赤文字は必須項目です」といった指示は、視覚情報に依存しておりスクリーンリーダーの読み上げでは理解できない。
色だけでしか提示されていない情報は一部の環境では欠損を起こすため、必ず色以外で同じ情報を提供されている必要がある。

さらに、スクリーンリーダーを使わないユーザーでも色覚に障害のあるユーザーは特定の色を見分けるのが困難になる。
ページ全体をグレイスケールにした場合でも、ページの利用や情報伝達に欠損や支障が出ないようにする。

関連項目：1.3.1（A）、1.4.1（A）

テキスト中のリンクを色のみで表現しない

テキスト中のリンクを色だけで表現すると、色覚に障害があるユーザーがリンクを判別できない可能性がある。太字も強調かリンクか判別しづらいケースがあるので、基本的には文中のテキストリンクの表現は下線が望ましい。

形または位置だけに依存した情報提供をしない

「三角のアイコンをクリック」「右の○○をクリック」といった、形や位置に依存する指示はスクリーンリーダーのユーザーを正しく誘導できないため使用しない。

太字、下線、サイズ違いなどの装飾されたテキストもスクリーンリーダーでは解釈できないため、それだけに依存した情報提供はしない。
*や※はスクリーンリーダーによって読めない場合がある。「必須」などわかりやすいテキストをセットにする。

関連項目：1.3.1（A）、1.3.3（A）

文字と背景の間に十分なコントラストを設ける

色覚や視覚に障害のあるユーザーだけでなく、晴眼者も晴れた屋外では十分なコントラストがないとモニターの文字を識別するのが困難になる。
あらゆる状態・状況のユーザーに対して有効な視認性を確保するため、テキストとその背景には十分はコントラスト比を設ける。

コントラスト比の基準は以下の通り：

24px以上（18pt相当）の文字または18.5px（14pt相当）以上の太字

コントラスト比を「3：1」以上にする

上記以下の文字

コントラスト比を「4.5：1」以上にする

ただし、テキストとしての情報提供をしていないものは上記の例外とする。

写真に含まれる標識などの付随的な文字
ロゴなど図案化された文字
何らかの実装上の理由で非表示になっている文字

関連項目：1.4.3（AA）、1.4.6（AAA）

UIやグラフィックオブジェクトにも明確なコントラストを持った配色にする

文字以外の視覚表現においても、隣接した色同士で「3：1」のコントラストを設ける。

UIコンポーネント

アイコン、ボタン、スイッチ、スライダー、状態を示すインジケーターなど

グラフィカルオブジェクト

グラフ、チャート、マップ、記号など

文字情報に極力画像を用いない

画像文字はテキストと同じように拡大縮小ができない。
ロービジョンのユーザーがコンテンツの文字サイズを変更する際に対応できないため、可能な限り画像文字は使用しない。

表現上の理由で特定のフォントを使用したい場合は、ウェブフォントサービスが利用可能かどうかを検討する。

ただし、表現上やむを得ない場合や、画像であることが不可欠な以下の場合は除く。

ロゴ

文字の形や色が定義されているため

書体サンプル

文字の色や形を変更すると意図した情報が提供できなくなるため

タッチできる要素のターゲットサイズを44 x 44 CSSピクセル以上にする

小さいアイコンやテキストリンクは、身体機能に障害があるユーザーだけでなく、指が大きいといった単純な身体的理由でも押しづらかったり誤タップを誘発することがある。

タップできるUIやリンクには44 x 44 CSSピクセル以上の十分な反応領域を確保する。

ただし、以下の場合は例外とする

そのリンクが段落・文章内のテキストリンクである
UIのサイズが44 x 44 CSSピクセル未満の場合、リンクが反応するタップ領域を含めて44 x 44 CSSピクセル以上であれば許容する

文字サイズを200%まで拡大してもコンテンツの欠損が発生しないようにする

ロービジョンのユーザーは、コンテンツ内の小さなテキストを読むことが困難なことがある。そのため、サイト内のテキストは画像拡大ソフトなどの支援技術を使用せずに200％までサイズ変更できるようにする。
また、サイズ変更時にコンテンツの重なりや見切れが生じず、また機能を損なわずに表示される必要がある。

入力フォームにはラベルと説明をつける

プレースホルダに項目名や項目の説明を入れると、入力時に項目名が消えてしまう。
常に入力内容を確認できるようにするため、ラベルや説明はプレースホルダを利用せずに表示する。

入力フォームのエラーメッセージは、エラー項目とその内容および修正方法を明示する

入力内容にエラーがある場合のメッセージは、エラーの場所（項目）と具体的なエラー内容を具体的に明示する。

関連項目：3.3.1（A）、3.3.3（AA）

入力形式に制約や条件がある場合は、入力前にユーザーがそれを知覚できるように説明を設ける

電話番号やメールアドレスなど、入力を受け付けるデータに制約がある場合は、事前にその説明を項目名付近に表示しておく。