アイコンだけのボタンに名前を付けよう：見える説明とaria-labelの使い分け

ハートや虫眼鏡の形だけのボタンは、すっきり見える。一方で、その形を知らない人や、画面を見ずに操作する人へ、目的が伝わっているだろうか。今回は、ボタンの見た目だけでなく、操作を表す名前を用意する方法を確認しよう。

HTMLとCSSの基本を知っている人向け。記事下の作例はブラウザだけで操作でき、外部サービスへ送信しないよ。

まず、見える文字を添えられないか考える

<button type="button">
  <span aria-hidden="true">★</span>
  お気に入りに追加
</button>

ボタンの文字は、利用者に見える説明であり、通常はアクセシブルな名前の計算にも使われる。アクセシブルな名前は、支援技術が部品を識別するために使う名前だよ。

記号が同じ意味の文字と重複する場合は、この例のように記号をaria-hidden="true"にする方法がある。ただし、必要な情報まで読み上げ対象から消さないように、内容を見て判断しよう。

文字を表示できないときはaria-labelが候補になる

<button type="button" aria-label="お気に入りに追加">
  <span aria-hidden="true">★</span>
</button>

aria-labelで、見えない名前を指定する方法もある。けれど、画面を見ている人には文字が増えないので、意味が分かりにくいアイコンを何でも解決する指定ではない。可能なら見える文字を残そう。

見える文字とaria-labelの両方を付ける場合も、別々の操作を表す名前にしない。読み上げで「削除」、見た目では「保存」になっていたら、使う人が困ってしまうね。

作例で名前と操作結果を確認する

作例は、実際の登録ではなく、お気に入りの状態をページ内で切り替える小さな部品。見える文字を付けたモードと、アイコンにaria-labelを付けたモードを比べられる。

1. 最初は「お気に入り」という文字と星がある。ボタンを押すと「追加済み」へ状態表示が変わる。
2. ボタン自体の名前は「お気に入り」のまま、aria-pressedがtrueになる。
3. 「アイコンと名前だけ」に切り替える。文字は見えなくなるが、ボタンのaria-labelは「お気に入り」のまま。
4. もう一度押すと、状態表示が「未追加」、aria-pressedがfalseになる。

この作例は、押した状態を持つトグルボタンなので、名前を変えずにaria-pressedで状態を伝える構成にしている。上の「追加」という動作名の最小例とは、その点が違うよ。

編集部では、Chromiumで両方のモードを「お気に入り」という名前のボタンとして取得でき、クリックとスペースキーで状態が変わることを確認した。画面読み上げソフトの実機検証全体を行った、という意味ではない。「最初から試す」で文字付き・未追加へ戻せるよ。

titleだけに頼らない

マウスを置くと説明が出るtitle属性だけに、必須の情報を任せないようにしよう。タッチ操作では同じように説明を見られないことがあり、名前の伝わり方も利用環境に依存する。

名前だけでなく、押せることと結果も確かめる

Tabキーで到達できるか、フォーカスが見えるか、Enterやスペースで押せるかを確認する。今回のように状態が切り替わるなら、その状態も文字やプログラムから分かる形にしよう。

見た目だけのdivへクリック処理を付ける前に、標準のbuttonで作れないか考えてみてね。buttonのtypeとフォーム送信、色以外でも状態を伝える作例も関連する確認になるよ。