ビジュアル・UIデザインに関するFAQ

アイコンフォントのアクセシビリティを確保する際の主なポイントは以下の2つです。

色覚の特性や弱視、加齢によって色の識別が困難な人がいます。また、強い日差しの下など、特定の環境下では多くの人は色の区別が難しくなることがあります。このような状況でウェブサイトの内容を理解するためには、色に依存しない表現が必要です。以下は、色に依存しない表現の一例です。参考にしてください。

パララックスは、ウェブデザインにおいてよく用いられるテクニックの一つです。画面の背景や一部の要素がスクロールに合わせ、異なる速度など個別に動くことで、立体的な印象（視差効果）を与えます。パララックスを用いたデザインが「ウェブアクセシビリティ観点でNG」ということはありませんが、以下に注意してデザインしてください。

ボタンのオンマウス時にアニメーションを実装すること自体には問題ありませんが、次のポイントに注意してデザインしましょう。

動きのあるウェブデザインには、注意が必要です。動きのある要素は、ユーザーに対して楽しい体験を提供する一方で、視覚障害や注意欠陥・多動性障害（ADHD）などに対して、視認性を下げ、集中力を乱す場合もあります。実装するときは次の点に気を付けて、アクセシブルな動きのあるデザインを実現しましょう。

ウェブアクセシビリティの対応をする＝ビジュアルをシンプルにすること、ではありません。
より多くの人が情報を使えるようにすることが、ウェブアクセシビリティの目的です。せっかくのビジュアルデザインも、限定された人や状況、環境においてのみ伝わるのでは効果は減少します。色のコントラストに関する制約も、より多くの人にとって情報を得やすくするための配慮です。代替手段への変更も含め、ビジュアルの工夫をお願いします。

ブランドサイトと広告を連動させる場合は、ブランドサイトでの利用を念頭に置いて広告の制作段階からアクセシビリティの配慮が必要となります。広告制作段階で配慮すれば、結果として広告自体もより多くの方に情報を入手しやすいものにできます。
とはいえ、すべての広告物を一度に見直すのは難しいため、ブランドサイト用に別途ビジュアルを用意するのも一つの手段です。

知覚可能（Perceivable）、操作可能（Operable）、理解可能（Understandable）の３点をイラスト作成時のポイントとして依頼してください。
 
ウェブサイトでのイラストの役割によって優先する注意点は変わってきますが、多様なユーザーの特徴を考え、さまざま視点で検討することが大切です。

WCAG2.1では、ロゴやブランド名の一部である文字に対しては、コントラスト比の要件はありません。
 
ただし、ブランドのロゴカラーを使ってウェブサイト内のカラー設定をする場合には、注意が必要です。
例えば、見出しタイトルにロゴと同じカラーを用いたときは、見出しタイトルはコントラスト比の要件を満たす必要があります。

ビジュアルの表現やUIデザインを検討する際は、知覚可能（Perceivable）、操作可能（Operable）、理解可能（Understandable）の3つのポイントを考慮してください。
花王ウェブアクセシビリティガイドラインの「5-2 コンテンツ作成で考慮すること」「5-3 ビジュアル・UIデザインで考慮すること」や「アクセシビリティ対応チェックシート」で、注意すべき点を確認してください。