WebサイトをWebアクセシビリティにさせる上で、イラストを作成する場合に、アクセシビリティを意識したイラストを作成する必要があります。そのための注意点を以下にまとめます。
執筆時点での規格はJIS8341-3:2016 および、WCAG2.0です。
仕事でお客さん向けに書いたモノだけど、自分がいつでも検索できるように、メモ。
画像の中でのテキストの使用はなるべく控えてください。
テキストは画像ではなくなるべくテキストデータで表現するべきです。
WCAG2.0 1.4.5「テキストの画像」（レベルAA）に規定。
以下の場合は画像の文字で問題ありません
- ロゴなど
- 装飾目的のテキスト
- テキストが画像の本質的な部分である場合: 例えば、漫画のコマ内のセリフや、書道作品のイメージなど
コントラスト違反
イラストにテキストを使用する場合、背景色と文字色のコントラスト比を守ってください。
WCAG 2.0の達成基準1.4.3（コントラスト（最小））では、通常のテキストは4.5:1以上、太字のテキストや大きなテキストは3:1以上のコントラスト比があることが規定されています。
コントラスト比を調べるときは、フリーソフトのカラーコントラストアナライザー（CCA）などを使用すると便利です。
代替テキストの提供
画像に対しては後でHTML側で代替テキストを付与する必要があります（盲目のユーザー等の為にイラストの内容をテキストで説明する）ので、テキストで表現できる内容として意識してデザインいただけますと幸いです。
色だけに依存しない情報伝達：
情報を色のみで伝えることは避けてください。これにより、色覚多様性を持つ人々やモノクロ表示を利用する状況でも内容が理解できます。
例：グラフなど
- グラフの場合、ドットや斜線を入れるなどして区別をつけるでも大丈夫です。
レスポンシブデザインの意識
画面の横幅が伸び縮みした際に十分に内容が理解できるように意識して作成することが大切です。
イラストが静止画でない場合
WCAG 2.0（Web Content Accessibility Guidelines 2.0）では、GIFアニメーションを掲載する際、以下の注意点があります。これらは、特にフラッシュや動きの速いコンテンツが引き起こす問題を回避し、アクセシビリティを確保するための指針です。
1. フラッシュの回数を制限する（ガイドライン2.3）
- 達成基準 2.3.1（閃光の閾値以下）
コンテンツが1秒間に3回を超える閃光（フラッシュ）を含まないようにします。- フラッシュは光過敏性発作（てんかんなど）を引き起こす可能性があるため、避ける必要があります。
- 特に高コントラスト（明るい白と暗い黒）のフラッシュは要注意です。
2. 自動再生を避ける、または停止/一時停止/非表示のオプションを提供（ガイドライン2.2）
- 達成基準 2.2.2（一時停止、停止、非表示）
アニメーションが5秒以上続く場合、ユーザーが次の操作をできるようにします：- 再生を一時停止または停止できる。
- アニメーションを完全に非表示にできる。
これは、視覚的な動きが集中力を妨げる可能性を低減します。
3. 動きや変化の頻度を抑える（ガイドライン2.2.1）
- 自動再生するGIFのループ回数や速度を適切に設定し、視覚的負担を軽減します。
- 長時間繰り返し動く場合は、ユーザーが停止できるコントロールを提供する必要があります。
4. 説明的な代替テキストの提供（ガイドライン1.1）
- 達成基準 1.1.1（非テキストコンテンツ）
GIFが重要な情報を含む場合、その内容を説明する代替テキスト（alt属性など）を提供します。- 例：「アニメーションGIF: 矢印が回転して進行方向を示しています。」
5. コンテンツの明確さと読みやすさ（ガイドライン2.4、3.1）
- GIFアニメーションが不要な混乱や視覚的なノイズを与えないようにします。
- 他のコンテンツの閲覧や理解を妨げないよう、動きが限定的で控えめなデザインを心がけます。
6. 画面リーダーとの互換性を考慮
- GIFが補助技術にどのように認識されるか確認します。
（例：GIFアニメが頻繁に動いていると、スクリーンリーダーの読み上げに干渉する可能性があります。）
まとめ
GIFアニメを利用する際には、視覚や神経に与える影響を考慮し、ユーザーが動きを制御できるようなオプションを提供することが重要です。また、必要に応じて動きの代替情報を提供し、アクセシビリティを確保しましょう。
コメント