アイコンとラベルの併記
ウェブデザインにおいて、アイコンを実装することは多いと思います。その際に問題となるのが、アイコンに対するラベリングです。
アイコン単体で (隣接するラベルを伴わない形で) ボタンなどの操作子を形成するようなデザインもありますが (その場合、アイコンに代替テキストを付与することができるので、スクリーンリーダーでの音声読み上げも可能ではありますが)、でもやはり、なるべくなら、アイコンには (目に見える、隠れていない) ラベルが併記されているべきだろうな、と思っています。
今回の記事では、その理由について、改めて考えてみたいと思います。
ラベルが併記されているアイコンは、ユーザーが同じ理解をする。
アイコン単体しか目に見えない場合、その意味がユーザーに正しく伝わらないことがあります。
たとえば最近よくある例として、ハンバーガーアイコンが「メニュー」の意味で用いられたり、紙飛行機アイコンが「送信」の意味で用いられたり、3つのドットのアイコンが「シェア」の意味で用いられたりしますが、アイコンだけだと意味を理解できないユーザーも少なからずいるため、せっかくの機能に気づいてもらえない恐れがあります。
アイコンそのものが「イディオム (慣用句的な共通概念)」として定着していて、ユーザーみんなが共通の理解をしてくれればよいのですが、そうでなければ、ユーザーが同じ理解をするように、アイコンには具体的なラベルを併記するのがよいと思います。
ラベルが併記されているアイコンは、クリック/タップしやすい。
アイコンがクリック (またはタップ) できる機能である場合、アイコン単体よりは、ラベルが併記されているアイコンのほうが、クリック/タップしやすいと言えます。ユーザーは、アイコン部分、ラベル部分、どちらをクリック/タップしてもよいからです。
もちろん、アイコン単体であってもクリック/タップ領域を広めに確保する (アイコンまわりのマージン部分もクリック/タップできるようにする) ことは可能ですが、ラベルが併記されているアイコンであれば、クリック/タップ領域が広いことが、より明示的にユーザーに伝わります。
クリック/タップ領域が広いことが明示的であれば、マウス操作が精緻にできないユーザーにとってだけでなく、タッチインターフェース (スマートフォンやタブレット) を使っているユーザーに対して安心感を与えることができます。
ラベルが併記されているアイコンは、音声認識ソフトのユーザーにとって使いやすい。
ウェブユーザーの中には、音声認識ソフトを使っている人がいます。音声認識ソフトでは、「クリック、○○」(○○ の部分には具体的なリンクラベルが入ります) と発話して、クリック箇所を特定し実行します。ラベルが目に見える形で併記されていれば、そのラベルを読み上げればよいのですが、ラベルが見えない場合、どう発話してクリック箇所を特定/実行したらよいか、わからなくなります。
たとえば虫眼鏡アイコンをクリックすると、検索窓が開くユーザーインターフェースがあるとします。代替テキスト (<img> 要素の alt 属性値や、アイコンフォントの aria-label 属性値) が「検索」となっていて、音声認識ソフトが代替テキストを拾うことができたとしても、ユーザー自身が「クリック、検索」と言うべきところ「クリック、虫眼鏡」などと言ってしまう (代替テキストとマッチしない言葉を発話してしまい、クリック相当の操作を実行できない) ことは往々にしてありそうです。
もっとも、音声認識ソフトの場合、リンク箇所に番号 (連番) を割り振って、その番号をクリックするコマンドを発話することもできるので、致命的とは言えないかもしれませんが、ラベルが見えていて、それを読み上げることで直接リンクを実行することができれば、ユーザーエクスペリエンス (UX) としてはそのほうが優れていると言えます。
実際のプロジェクトでは、デザイン上の判断としてラベル併記の無いアイコンを採用するケースは少なくありませんが、目に見える形でラベルを併記したほうがユーザビリティ/アクセシビリティの観点でベターであることは間違いありません。ユーザーインターフェース (UI) 設計においてアイコンを扱う際には、まずはなるべく、ラベルを併記することから、考えてみたいものです。