アクセシブルなサイトは使いやすく、顧客ロイヤルティの向上にもつながります。障がいの有無を問わず、訪問者全員に最高の体験を届けるためのウェブデザイン原則を解説します。
アクセシビリティを高めれば、すべての人にとって心地よい体験になる
アクセシビリティは、あらゆるウェブサイトやデジタルインターフェースに欠かせない要素です。障がいの有無にかかわらず、誰もがコンテンツを利用できるようにするためです。ウェブアクセシビリティの実現に役立つリソースとして、Web Content Accessibility GuidelinesやAccessibility Checklistなどがあります。
キーボード操作への対応
アクセシビリティを考えるうえで重要なポイントの一つが、キーボードだけで操作できることです。マウスを使わず、キーボードのみでサイト上のあらゆる操作を完結できる状態を指します。運動機能に障がいのある方やスクリーンリーダーを利用する方など、マウスを使えないユーザーにとって不可欠です。また、キーボード操作はマウスより素早く行えることもあるため、キーボード中心に使いこなす上級ユーザーにもメリットがあります。
アクセシブルなマルチメディア
もう一つのポイントは、すべてのマルチメディアコンテンツを誰もが利用できるようにすることです。具体的には、動画への字幕の付与や、音声ファイルへの音声解説の追加などが挙げられます。これにより、耳が不自由な方や難聴の方もコンテンツを理解し、楽しめるようになります。字幕は、騒がしい環境にいる人や、使われている言語を理解できない人にも便利です。複数言語への翻訳も簡単に行えます。
カラーコントラスト
色の使い方もアクセシビリティ上、非常に大切です。サイト上のテキストは、視覚に障がいのある方にも、直射日光の下でも読みやすいよう、背景との間に十分なコントラストを確保する必要があります。テキストと背景のコントラストを確認したいときは、こちらのカラーコントラストチェッカーが便利です。また、Figma上で直接コントラストを確認し色を調整できるプラグインも筆者が作成しています。
わかりやすい言葉づかい
平易な言葉づかいは、社会的・経済的な背景を問わず、誰もがウェブサイトを理解する助けになります。シンプルで明快な、伝わりやすい言葉を選ぶことが大切です。特に、内容が複雑で多くのユーザーにとってなじみの薄い情報を扱う行政系サイトでは、なおのこと重要です。良い例がgov.ukで、複雑なビザ手続きを明快かつ簡潔に説明しています。文章のわかりやすさを高めたいときは、Hemingway Appが役立ちます。
デザイン原則
新しいプロダクトを生み出すうえで意識したいデザイン原則がいくつかあります。まず、ターゲットユーザーのニーズを確実に満たすこと。ユーザーリサーチやテストを通じて、インターフェースがオーディエンスに刺さり、直感的に理解できるものになっているかを確かめましょう。
ヤコブの法則によれば、ユーザーは自分のサイト以外のサイトに大半の時間を費やしています。だからこそ、自分のサイトも他と同じように動くことが期待されており、見慣れたパターンを採用すればナビゲーションも自然になります。代表例が、保存機能に使われるフロッピーディスクのアイコンです。別のアイコンに置き換えてしまうと、ユーザーはその意味をわざわざ覚える必要に迫られ、ハードルになりかねません。
確立されたデザインパターンを活用することに加え、プロダクトデザイン全体での一貫性も欠かせません。一貫性とは、プラットフォーム全体で言葉づかい、レイアウト、デザイン要素をそろえること。これにより、ユーザーは使い方や操作方法を直感的に理解できるようになります。
ユーザーへのフィードバックも忘れてはなりません。操作の成功や失敗を伝えるメッセージや通知、あるいはプロダクト内で何が起きているかを示す情報など、形はさまざまです。こうしたフィードバックがあることで、ユーザーはシステムの状態を把握でき、プロダクト体験全体の質も高まります。
もう一つ心に留めておきたいのが「Less is More(少ないほど豊かである)」という考え方です。あれもこれもと機能を盛り込みたくなるものですが、ユーザーを圧倒してしまう恐れがあります。「柔軟性とユーザビリティのトレードオフ」の原則によれば、柔軟性が増すほどユーザビリティは下がり、複雑で使いにくくなっていきます。設計時にはこのトレードオフを意識し、両者の最適なバランスを見極めることが肝心です。
すべての人のためのアクセシブルなデザイン
アクセシブルなウェブサイトは、ユーザーにとって使いやすく心地よく、再訪やロイヤルカスタマー化につながりやすくなります。ここで紹介したデザイン原則を取り入れてアクセシビリティを徹底的に高めれば、障がいの有無を問わず、すべての訪問者に最高の体験を届けられます。
本記事で紹介したツール
Web Content Accessibility Guidelines