アイコンとラベルの併記

ウェブデザインにおいて、アイコンを実装することは多いと思います。その際に問題となるのが、アイコンに対するラベリングです。

アイコン単体で (隣接するラベルを伴わない形で) ボタンなどの操作子を形成するようなデザインもありますが (その場合、アイコンに代替テキストを付与することができるので、スクリーンリーダーでの音声読み上げも可能ではありますが)、でもやはり、なるべくなら、アイコンには (目に見える、隠れていない) ラベルが併記されているべきだろうな、と思っています。

今回の記事では、その理由について、改めて考えてみたいと思います。

ラベルが併記されているアイコンは、ユーザーが同じ理解をする。

アイコン単体しか目に見えない場合、その意味がユーザーに正しく伝わらないことがあります。

たとえば最近よくある例として、ハンバーガーアイコンが「メニュー」の意味で用いられたり、紙飛行機アイコンが「送信」の意味で用いられたり、3つのドットのアイコンが「シェア」の意味で用いられたりしますが、アイコンだけだと意味を理解できないユーザーも少なからずいるため、せっかくの機能に気づいてもらえない恐れがあります。

ハンバーガーアイコン (「メニュー」の意)、紙飛行機のアイコン (「送信」の意)、3つのドットのアイコン (「シェア」の意)。
ハンバーガーアイコン、紙飛行機のアイコン、3つのドットのアイコン。

アイコンそのものが「イディオム (慣用句的な共通概念)」として定着していて、ユーザーみんなが共通の理解をしてくれればよいのですが、そうでなければ、ユーザーが同じ理解をするように、アイコンには具体的なラベルを併記するのがよいと思います。

ユーザーが同じ理解をするように、アイコンには具体的なラベルを併記するのがよい。
ラベルが併記されたアイコンの例

ラベルが併記されているアイコンは、クリック/タップしやすい。

アイコンがクリック (またはタップ) できる機能である場合、アイコン単体よりは、ラベルが併記されているアイコンのほうが、クリック/タップしやすいと言えます。ユーザーは、アイコン部分、ラベル部分、どちらをクリック/タップしてもよいからです。

ラベルが併記されたアイコンは、アイコン部分、ラベル部分、どちらをクリック/タップしてもよい。
ラベルが併記されたアイコンの例 (クリック/タップしやすい様子)

もちろん、アイコン単体であってもクリック/タップ領域を広めに確保する (アイコンまわりのマージン部分もクリック/タップできるようにする) ことは可能ですが、ラベルが併記されているアイコンであれば、クリック/タップ領域が広いことが、より明示的にユーザーに伝わります。

クリック/タップ領域が広いことが明示的であれば、マウス操作が精緻にできないユーザーにとってだけでなく、タッチインターフェース (スマートフォンやタブレット) を使っているユーザーに対して安心感を与えることができます。

ラベルが併記されているアイコンは、音声認識ソフトのユーザーにとって使いやすい。

ウェブユーザーの中には、音声認識ソフトを使っている人がいます。音声認識ソフトでは、「クリック、○○」(○○ の部分には具体的なリンクラベルが入ります) と発話して、クリック箇所を特定し実行します。ラベルが目に見える形で併記されていれば、そのラベルを読み上げればよいのですが、ラベルが見えない場合、どう発話してクリック箇所を特定/実行したらよいか、わからなくなります。

たとえば虫眼鏡アイコンをクリックすると、検索窓が開くユーザーインターフェースがあるとします。代替テキスト (<img> 要素の alt 属性値や、アイコンフォントの aria-label 属性値) が「検索」となっていて、音声認識ソフトが代替テキストを拾うことができたとしても、ユーザー自身が「クリック、検索」と言うべきところ「クリック、虫眼鏡」などと言ってしまう (代替テキストとマッチしない言葉を発話してしまい、クリック相当の操作を実行できない) ことは往々にしてありそうです。

代替テキストが「検索」であるアイコンを実行しようとして、音声認識ソフトで「クリック、虫眼鏡」と発話してしまう (その結果、何も起こらない)。
音声認識ソフトで代替テキストとマッチしない言葉を発話する様子

もっとも、音声認識ソフトの場合、リンク箇所に番号 (連番) を割り振って、その番号をクリックするコマンドを発話することもできるので、致命的とは言えないかもしれませんが、ラベルが見えていて、それを読み上げることで直接リンクを実行することができれば、ユーザーエクスペリエンス (UX) としてはそのほうが優れていると言えます。


実際のプロジェクトでは、デザイン上の判断としてラベル併記の無いアイコンを採用するケースは少なくありませんが、目に見える形でラベルを併記したほうがユーザビリティ/アクセシビリティの観点でベターであることは間違いありません。ユーザーインターフェース (UI) 設計においてアイコンを扱う際には、まずはなるべく、ラベルを併記することから、考えてみたいものです。