ウェブアクセシビリティ対応で見直すべきデザインのポイント【デザイナー向け】

こんにちは。株式会社ノベルティのデザイナー瀬川です。

ノベルティは「ウェブアクセシビリティに強い制作会社」として、誰もが快適にWebコンテンツを利用できる社会を目指して、日々の制作に取り組んでいます。

これからウェブアクセシビリティの取り組みを始めたいと考えているものの、必要な作業はエンジニアの実装に関する内容が多く、「デザイナーは何をすべきなのだろう？」とお悩みの方も多いのではないでしょうか。

この記事では、アクセシビリティに配慮したWebデザインを行う上で、重視すべき“デザイン上の工夫”に焦点を当ててご紹介します。

この記事はこんな方におすすめです

• 自社サイトのアクセシビリティ対応を検討している方
• アクセシブルな制作に興味がある方
• 何から取り組むべきか分からないデザイナーの方

はじめに：ウェブアクセシビリティとは

ウェブアクセシビリティとは、障害の有無やデバイス環境に関係なく、すべての人がウェブの情報に公平にアクセスできるようにすることです。

日本でもアクセシビリティ対応の重要性は年々高まっており、法令やガイドラインに準じた対応が求められる場面も増えてきました。また、検索エンジンの評価指標としても注目されており、企業サイトにとっても無視できない要素です。

ウェブアクセシビリティについてもっと詳しく知りたい方は以下の記事をご覧ください。

関連記事

【チェックリストあり】なぜ必要？サイトのウェブアクセシビリティ向上

Webアクセシビリティとは？｜なぜ対応が必要なのかわかりやすく解説

アクセシビリティに配慮したデザインの工夫

実際に、デザインでどんな工夫ができるのか、WCAG 2.2の達成基準をもとに紹介します。
※取り入れやすい一部を抜粋して紹介しています。

色だけに頼らない表現（達成基準 1.4.1 色の使用 A）

視覚情報に頼りすぎないデザインは、アクセシビリティ対応の基本です。色だけで情報の違いを示すと、色の判別が苦手なユーザーには伝わりにくくなってしまいます。

作成したデザインをモノクロで表示し、以下の基準で意味が伝わるかを見直してみましょう。

• 正しく意味が伝わるかどうか
• サイトを利用できる状態になっているか

テキストリンクの例

画像はサイト内にテキストリンクを設置する時の装飾の例です。

悪い例では、テキストリンクが青色のみで装飾されていますが、色の認識が難しいユーザーにとっては、このテキストにリンクが設置されていることを認識することが困難です。

改善例では、青色に加えて太字と下線を取り入れています。これにより、他のテキストとは違う装飾がされていることから、ユーザーはリンクであることを認識できるようになります。

フォームの例

画像は入力フォームに必須項目を設置する場合の例です。

悪い例では、必須項目のラベルを赤文字で示しています。冒頭に「※赤文字は必須項目です。」と補足説明がされていますが、色の認識が難しいユーザーにとっては、どの項目が赤文字になっているのか判別が困難です。

改善例では、必須項目に「*必須」とラベルを併記しています。これにより、住所が必須項目であることを文字の情報から判別することができます。

情報の流れがわかるレイアウト（達成基準 1.3.1 情報及び関係性 A）

視覚障害や高齢による視力の低下、一時的に画面が見づらい環境など、視覚から情報を得るのが難しい状況では、スクリーンリーダーなどの支援技術を使って、画面上の情報を読み上げ、音声で把握することが一般的です。

スクリーンリーダーは、マークアップされたHTMLの構造をもとに、本文や見出しなどを論理的な順序で読み上げます。そのため、デザインの段階から「見た目」だけでなく、「構造的な情報の流れ」も意識したレイアウト設計が欠かせません。

自然な順序で情報が伝わる構成を心がけることで、支援技術を利用するユーザーにとっても、スムーズでわかりやすい情報を提供することができます。

サービスの申し込みボタンの例

画像はサービス申し込みのCTAエリアを想定したデザイン例です。

悪い例では、申し込みのCTAボタンを手前に配置し、同意事項を補足情報のように最後に配置しています。これでは、支援技術を利用した際に「同意して申し込むボタン」から先に読み上げられるため、「何に同意して申し込むのかが分からない」と混乱を招いてしまいます。

改善例では、同意事項の内容を踏まえた上で申し込みボタンを押下できる自然な流れでレイアウトされています。

情報の“つながり”を整理することは、支援技術を使うユーザーだけでなく、すべての人にとって理解しやすいページづくりにもつながります。

「こちら」リンクは卒業（達成基準 2.4.9 リンクの目的 AAA）

「詳しくはこちら」「View More」などのリンクテキストは、デザインとしてはとてもスマートなのですが、つい使っていませんか？

しかし、このような文言では遷移先がわからず、ユーザーがそのリンクにアクセスしたいかどうかを判断することができません。

スクリーンリーダーの中には、ページ内の要素を一覧表示したり、リンクにショートカットで移動したりできる機能を備えたものもあります。そのため、リンク単体で遷移先が分かるような文言が理想です。

次の画像はリンクの一覧表示機能を使用した場合、どのように読み上げられるかを視覚化した例です。

悪い例では、リンクボタンを「View More」としています。この場合、スクリーンリーダーでリンクだけをリスト化するとView Moreだけが連続で読み上げられます。これでは、どのボタンでどのページに遷移できるのか判断できません。

改善例ではリンクボタンに遷移先のページタイトルを明記しているので、リンクだけをリスト化して前後の文脈が見えない状態であっても、どのページに遷移できるリンクかを把握することができます。

スクリーンリーダーの利用を想定していないケースだとしても、リンクの目的が一目でわかることは、すべてのユーザーにとっても大きなメリットです。

動きのある要素は「止められる」ように（達成基準 2.2.2 一時停止、停止、非表示 A）

スライダーや動画の自動再生、背景のアニメーションは、視覚的に印象を強めることができます。

一方で、動きが強制的に続くUIが使いにくさの原因にもなります。特に、動きに注意が向きすぎて他の情報が読みづらくなるケースや、動きを止められないことで不快感を覚えるユーザーもいます。

ユーザーが操作できる設計にするには

• 自動再生のスライダーには、一時停止ボタンを設置する
• 動画の自動再生はせず、ミュート状態＋停止ボタンを設置する
• 背景アニメーションは、オフにできるUIを検討する

アクセシビリティを重視したサイトを設計する場合、まずはそのアニメーションが本当に必要な要素なのかを検討しましょう。

その上でアニメーションを採用する場合は、「一時停止できる」という選択肢があるだけで、ユーザーの集中力や快適さは大きく変わります。

コントラスト比をチェック（達成基準 1.4.3 コントラスト (最低限) レベル AA）

背景色とテキストのコントラストが足りないと、視認性が大きく下がってしまいます。デザイン性を重視した結果、視認性が下がってしまっては、情報を伝えるという本来の目的を果たすことはできません。

背景とテキストのコントラストを重視する際の一つの目安として、次の値を参考にしてみましょう。

コントラスト比の目安

コントラストを調べる方法として、ブラウザサービスやプラグインを活用する方法などがありますが、Figmaではコントラストチェッカーがデフォルト機能として備わっています。

色を目視しながら濃淡を調整できるのでとても便利！ぜひお試しください。

アクセシビリティへの配慮は、「当たり前を実現する」こと

アクセシビリティに配慮することは、特別なことではありません。

色の使い方、構造の組み方、リンク文言の工夫など、一つ一つの取り組み自体はとてもシンプル。ゼロから作り直す必要はなく、ちょっとした改善で大きな差が生まれます。

その積み重ねによって、「すべてのユーザーが当たり前に情報を受け取ることができる」デザインにつながります。

ノベルティでは、ウェブアクセシビリティの向上支援に取り組んでおり、アクセシビリティの診断も行っています。ぜひお気軽にお問い合わせください。

＼ノベルティではアクセシビリティに関するホワイトペーパーも配布しています／