アイコンボタンのベストプラクティスを考察する

SVG によるアイコンをラベルのような形で内包した button 要素、所謂、アイコンボタンに対して、どのようにアクセシブルなラベルを与えればよいか、いくつか具体的な実装例を挙げて、ベストプラクティスを考察します。

バーンワークス株式会社ナレッジブログ
アクセシビリティ
アイコンボタンのベストプラクティスを考察する

ここ最近の傾向として、SVG（Scalable Vector Graphics）を使用したアイコンをボタンに使用し、そのアイコンがボタンのラベルになっているケースが増えています。

img 要素を使用して画像をボタン内に含める場合は、通常 alt 属性によって代替テキストを付与すれば問題ないですが、SVG の場合、例えばフリーの素材として配布されている SVG のソースコードをコピー&ペーストしたことにより、気付かないうちにラベル（名前）のないボタンになってしまっている場合があります。

また、外部からスクリプトや CSS を読み込むアイコンサービスのように、特定の class 名を付与した i 要素などを JavaScript によって SVG に変換するような仕組みの場合は差し込まれる SVG のソースコード自体にウェブサイト運営者側が手を入れることができないため、意図せずラベルのないボタンとなる場合もあります。

そこでこの記事では、いくつかの具体的な例を挙げて、SVG アイコンをボタンに使用する場合、どのようにアクセシブルなラベルを与えればよいか、いくつか具体的な実装例を挙げて、ベストプラクティスを考察します。

SVG を img 要素で追加する場合

SVG を img 要素でボタン内に含める場合は、alt 属性によって代替テキストを与えれば問題ありません。例えば下記のようなソースコードになります。ここではサイト内検索などの検索ボタンを想定しています。

<button class="search-btn">
 <img src="./search-btn-svg" alt="検索">
</button>

SVG に直接ラベルを与える例

SVG のソースコードを直接編集可能な場合、最も簡単な方法は下記のように、role="img" と aria-label 属性を使用する方法です。また、SVG の title 要素を併用するとなお良いでしょう。

<button class="search-btn">
  <svg role="img" aria-label="検索" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
    <title>検索</title>
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
  </svg>
</button>

SVG のソースコードを直接編集できない場合

例えば、Font Awesome のようなサービスを使用する場合、JavaScript を使用した方法では、ウェブサイト運営者側は挿入される SVG のソースコード自体に干渉できません。ソースコード上は下記のようになるでしょう。

<button class="search-btn">
  <i class="fa-solid fa-magnifying-glass"></i>
</button>

しかし、この状態ですと、i 要素が SVG に差し替えられた結果、下記のような、ラベルのないボタンができあがってしまいます。

<button class="search-btn">
  <svg ...略...>...</svg>
</button>

このような場合には、別途テキストデータをボタン内に配置し、それをラベルとする方法が現実的です。また、差し替えられた SVG 自体は装飾と見なし、aria-hidden="true" を付与するとよいでしょう。

<button class="search-btn">
  <span aria-hidden="true">
    <i class="fa-solid fa-magnifying-glass"></i>
  <span>
  <span class="sr-only">検索</span>
</button>

追加したテキストラベルは支援技術からはアクセス可能、かつ視覚的には見えないようにしたいので、下記のようなスタイルを適用して不可視にします。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

このとき、display: none; などを使用してしまうと、支援技術からもアクセスできなくなってしまいますので注意が必要です。

もちろん、下記のように、aria-label 属性のみでラベルを与えることもできると思いますが、なるべく button 要素の中にラベルを含める方が望ましいのではないかと考えます。

<button class="search-btn" aria-label="検索">
  <span aria-hidden="true">
    <i class="fa-solid fa-magnifying-glass"></i>
  </span>
</button>

今回はボタン（button 要素）を例に挙げましたが、リンク（a 要素）でも同じようなケースがあるかもしれません。

このような、アイコンのみがラベルとして含まれるボタンは、スマートフォンなど、小さい画面向けに提供されるメニュー開閉ボタンや、今回例として挙げた検索ボタン、カルーセル UI やアコーディオン UI における、左右移動ボタンや、開閉ボタンなど、頻繁に利用される傾向がありますので、正しい実装を行い、ラベルのないボタンを量産しないように注意したいものです。