デザイナーに聞く「ウェブアクセシビリティ」の重要性。成果が出ないサイトの原因はデザインかも？

Webサイトから思うような成果が得られない場合、もしかしたら原因は「デザイン」にあるかもしれません。

見えにくい、読みにくい、わかりにくいといった、次のアクションを迷わせるデザインになっていないでしょうか。

情報を適切に伝えるために意識したいのが「ウェブアクセシビリティ」です。デザインに関する専門書の著述や講演を数多く行うデザイナーの間嶋沙知氏に、その詳細を伺いました。

目次

1. ウェブアクセシビリティとは
2. ウェブアクセシビリティはなぜ重要なのか
3. ウェブアクセシビリティの改善点
4. ウェブアクセシビリティについてのよくある誤解

ウェブアクセシビリティとは

ferret：
「ウェブアクセシビリティ」という言葉に馴染みがない方も多いと思います。
どのようなものかご説明いただけますか。

間嶋：
アクセシビリティは「Access（アクセス）」と「Ability（アビリティ）」の組み合わせから成る言葉で、情報やものごとにアクセスできる度合いや幅広さを意味します。

Accessibility = Access + Ability

ウェブアクセシビリティとは、Webにおけるアクセシビリティを指していて、Webで提供されている情報を誰もが利用できることを意味します。

ウェブアクセシビリティには、情報へのアクセスしやすさだけでなく、それを読んで理解できることや、使えることなどの要素まで含まれます。

デジタル庁のガイドブックでは、ウェブアクセシビリティの考え方や取り組み方が分かりやすく解説されていますので、初めてウェブアクセシビリティに取り組む方にもおすすめです。

参考：デジタル庁 ウェブアクセシビリティ導入ガイドブック

ウェブアクセシビリティはなぜ重要なのか

ferret：
ウェブアクセシビリティの向上は、なぜ重要なのでしょうか。

間嶋：
ウェブアクセシビリティは障碍者向けに配慮すべきものというイメージを持たれることもありますが、実際は幅広い人にとって大切な考え方です。

なぜなら、誰かの「使えない」「使いにくい」を改善することは、全体のユーザビリティを上げることにつながるからです。

「ユーザビリティ」は個々の人や状況における使いやすさを指しますが、その土台となるのがアクセシビリティです。アクセシビリティを確保して、それまで使えなかった人が使えるようになると、別の状況での使いにくさも改善することがあります。

ウェブアクセシビリティの改善ポイント

ferret：
では、ウェブアクセシビリティを改善するためには、何をすればよいのでしょうか。
避けた方がよい例を教えていただけますか。

色に関するポイント

間嶋：
色については、コントラストや配色への配慮が大切です。

コントラストが低い

Webサイトに表示するバナーやボタンなどで、背景色と文字色のコントラストが低いと読みにくくなります。

W3Cが策定する Web Content Accessibility Guidelines では、要素ごとに確保するべき明確なコントラスト比の基準が定められています。

本文などのテキストでは、背景色とのコントラスト比を「4.5 : 1」以上確保します。見出しなどの大きな文字やアイコンなどには「3 : 1」以上という基準値が定められています。

参考：Web Content Accessibility Guidelines 2.1

コントラスト比は、「Contrast Ratio」や「Who can use」などのコントラストをチェックするためのツールで簡単に確認できます。コントラストを適切に設定すると、スマートフォンなどの小さい画面でも文字を見やすくなります。

見分けにくい配色を使用している

明るさの比だけでなく、色の組み合わせにも注意が必要です。色の見え方の違いを「色覚特性」といい、日本人男性の約20人に1人、女性の約500人に1人が多数派とは異なる色覚特性をもっています。

色覚特性によって見分けにくい色は、IllustratorやPhotoshopなどの色覚シミュレーターで確認できます。スマホアプリの「色のシミュレータ」 も手軽にチェックができておすすめです。

色覚特性によっては、赤と黒、赤と緑も区別がつきにくい場合があります。例えば、営業日を示すカレンダーで休業日が赤、短縮営業は緑などの色分けをしてしまうと差が分かりません。そのほか、オレンジと黄緑、ピンクと水色なども見分けにくい場合があります。

色覚特性の他にも、視力や加齢による影響でも、色の区別がつきにくくなることがあります。色だけでなく、モチーフや文字を一緒に使って区別するとアクセシビリティが高まります。

文字に関するポイント

文字に画像を使用している

文字を画像で表示することは、ウェブアクセシビリティを損なう原因のひとつです。代替テキストを設定していても、画面表示を拡大した時にレイアウトが崩れる、折り返しが適用されないなどのトラブルのもととなります。
文字情報はテキストとして掲載すると、ユーザーが文字サイズやフォントを適切に調整できます。機械翻訳にかけたりコピー＆ペーストしたりと、ユーザビリティの向上も期待できます。

行間が狭すぎる

行間が狭すぎると、文章が読みにくくなります。本文の文字サイズに対して1.5倍以上の行の高さ（line-height）は最低限必要です。フォントの種類などによっては1.5倍でも読みにくく感じる場合があるため、実際の画面表示を確認しながら行間を調整しましょう。

ウェイトの細すぎるフォントを使用している

ウェイトの細すぎるフォントは、発光が強いディスプレイなどでは読みにくくなる場合があります。ブラウザの機能でユーザー側がフォントを変更できる場合もありますが、はじめから読みやすいフォントで表示しておくことがおすすめです。

1行あたりの文字数が多すぎる

本文のテキストについて、1行あたりの文字数が多すぎると、次の行頭を見つけにくくなりユーザーにとって負担となります。1行につき40字以内が、読みやすくするための目安です。

見出しがついていない

本文のテキストに見出しを付けると、内容が伝わりやすくなります。文字のサイズや太さなど見た目を変更するだけでなく、「見出し要素」を指定する機能を使うことがおすすめです。

UIに関するポイント

UIが勝手に動いてしまう

ユーザーの意図とは無関係に動いてしまうUIは、ウェブアクセシビリティを損ねます。ずっと動いている背景動画や、ユーザーの操作で止められないカルーセル、スクロールに応じて動くアニメーションなどのUIの導入には注意が必要です。

これらのUIは、ユーザーが見たいと思っているものへの注意を阻害します。ひどい場合は気持ち悪くなってしまうこともあるため、ユーザーが自分のタイミングでコントロールできるUIをデザインしましょう。

クリックできる要素かどうかが分かりにくい

クリックできる要素かどうかを明確にすることも重要なポイントです。単なる画像やテキストであるにもかかわらずクリックできそうな見た目をしていると、勘違いされる場合があります。反対に、リンクが設定されていることが分かりにくいバナー画像やテキストリンクも改善の対象です。

リンクが設定されたテキストなのか、ただの色付き文字なのかも分かりやすく区別する必要があります。

入力フォームが使いにくい

フォーム内に仮のテキストを表示しておく「プレースホルダー」は、入力操作を始めると消えてしまいます。プレースホルダーに入力項目についての情報を記載してしまうと、何を入力すべきかが分からなくなり不便です。入力すべき情報や入力形式については、常に確認できるテキストとして表示しておきましょう。

入力内容の誤りを指摘するエラーメッセージが出るものの、正しい入力形式が分からないことも改善すべきポイントです。

また、入力項目が多すぎると、最後まで完了できず離脱されてしまいます。必要最小限の項目でフォームを作ることが大切です。

画像に関するポイント

代替テキストが設定されていない

Webサイトに画像を使用する場合、代替テキストを付けるとウェブアクセシビリティが高まります。代替テキストには、画像と置き換えたときに過不足のない内容を設定します。

グラフや商品画像の説明など画像が見えている人にも有用な情報は、画像のキャプションや本文にもテキストとして書くこともおすすめです。例えば、ECサイトの商品画像の近くに「ベージュに近いカーキ色です」などの説明をテキストで書いておくと、誰が見ても分かりやすくなります。

リンクに関するポイント

リンク先の内容がわかりにくい

リンクが「こちら」という部分にしかついていないと、リンクだけを飛ばし読みしているユーザーには「こちら」ばかりが並んでしまい、リンク先が分かりません。

「〇〇についてはこちらをご覧ください」など、何について書かれたページへのリンクかが分かりやすいようにリンクを設定しましょう。

ウェブアクセシビリティについてのよくある誤解

ferret：
初めてウェブアクセシビリティに取り組む際に、多くの人が誤解しやすいポイントにはどのようなものがあるでしょうか。

文字サイズの変更ボタンの必要性

間嶋：
ウェブアクセシビリティを高める方法として、「文字サイズの変更ボタン」を必ずつけるべきと考える方もいますが、そうではありません。文字サイズの変更ボタンの有無にかかわらず、デザインや文字サイズなどを見やすくする必要があります。

総務省のガイドラインでは、文字サイズの変更ボタンをウェブサイトに実装するだけではウェブアクセシビリティに対応しているとは言えないことが記載されています。

参考：みんなの公共サイト運用ガイドライン

デザインの審美性との両立

間嶋：
アクセシビリティに配慮するとデザインがダサくなる、というのはよくある誤解です。AAA11Y (Accessible Website Gallery) というウェブデザインギャラリーには、アクセシビリティとデザインの両観点で優れた国内外のウェブサイトがたくさん掲載されています。

アクセシビリティとデザインは相反するものではなく、より多くの人に情報やサービスを届けるという共通の目的をもっています。アクセシビリティを考慮しながらデザインに取り組む人が増えれば、より魅力的で誰もが使いやすいサイトが増えると私は考えています。

出典：AAA11Y (Accessible Website Gallery)

ウェブアクセシビリティに配慮して「わかりやすいサイト」を目指そう

ferret：
最後に、Webサイトのデザインを担当する方へ、メッセージがあればお願いします。

間嶋：
Webサイトは、ユーザーとの物理的な距離に関係なくアプローチできることが強みです。その特性を最大限に生かし、興味を持ってWebサイトに来てくれた人にきちんと情報を伝えるためには、ウェブアクセシビリティを高める必要があります。

今回紹介したポイントは、Webサイトの制作や更新を担当する方であれば取り組みやすい内容が多いと思います。日々の運用の中で、ぜひアクセシビリティを意識して改善に取り組んでください。

Webアクセシビリティ対応についての資料

サイト担当者が最低限対応すべきウェブアクセシビリティ項目とその対策をまとめた資料はこちら（ferret One監修）

【Web担当必見】ウェブアクセシビリティ対応チェックリスト

2024年4月の障害者差別解消法の改正法施行をうけて、「ウェブアクセシビリティ対応」の重要性が増しました。そこで本資料では、最低限対応すべきウェブアクセシビリティ対応の項目とその対策をまとめました。