本文へ移動
ご相談

名前がないアイコンだけのボタン

ヘッダーの検索、かご、メニューのボタンはSVGアイコンだけで言葉がなく、どれも「ボタン」としか読み上げられません。

SC 4.1.2ASC 1.1.1A エージェント向けMarkdown
問題あり 「ボタン」としか読まれない。
修正後 何をするか読み上げられる。
同じ操作部品の、修正前と修正後。
01

問題

スクリーンリーダーや音声操作の利用者が、ヘッダーのボタンが何をするのか分かりません。

02

試してみる

Tabキーでヘッダーのボタンを順に移動してください。

下の欄に、スクリーンリーダーの読み上げが出ます。どのボタンがメニューを開くか分かりますか？

Fern & Fold

スクリーンリーダーの読み上げ： （Tabでボタンへ移動）

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

アイコンボタンに言葉の名前を付けます。隠したテキスト、aria-label、見えるラベルのいずれかを使います。

  1. 1すべてのアイコンボタンに、隠したテキスト、aria-label、見えるラベルのいずれかで言葉の名前を付ける。
  2. 2アイコン自体は aria-hidden="true" で隠す。
  3. 3絵ではなく操作や行き先を名前にし、件数は一度だけ読ませる。
修正前 言葉のないアイコン
<header class="site-header">  <a href="/" class="logo">Fern & Fold</a>  <button type="button" class="icon-button">    <svg class="icon"><use href="#icon-search"></use></svg>  </button>  <button type="button" class="icon-button">    <svg class="icon"><use href="#icon-bag"></use></svg>    <span class="badge">2</span>  </button>  <button type="button" class="icon-button">    <svg class="icon"><use href="#icon-menu"></use></svg>  </button></header>
修正後

ボタン内に視覚的に隠したテキストを入れる

html

<button type="button" class="icon-button">  <svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>  <span class="visually-hidden">検索</span></button><button type="button" class="icon-button">  <svg class="icon" aria-hidden="true"><use href="#icon-bag"></use></svg>  <span class="badge" aria-hidden="true">2</span>  <span class="visually-hidden">かご、2点</span></button><button type="button" class="icon-button">  <svg class="icon" aria-hidden="true"><use href="#icon-menu"></use></svg>  <span class="visually-hidden">メニュー</span></button>

css

.visually-hidden {  position: absolute;  width: 1px;  height: 1px;  overflow: hidden;  clip-path: inset(50%);  white-space: nowrap;}

04

修正の確認

マウスを使わない4つの確認

確認方法： キーボード、スクリーンリーダー、ズーム、強制配色

4件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のアイコンボタンのコンポーネントを変更した際は、再度確認します。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。コード内のスプライトのidとクラス名は仮のものです。後からコンテンツの編集者や外部のウィジェットが追加するアイコンボタンも、同じように確認が必要です。実際に使用する支援技術で、操作全体を確認してください。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

参考資料

コードを更新しても、使いやすさを保つために

ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。

再テストの進め方