名前のあるアイコンボタン
文字のないボタンに明確なアクセシブルラベルを付けます。
「名前のあるアイコンボタン」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
The Silent Button Problem
A button with only an icon inside looks clear to the eye, but a screen reader may just say button with no clue what it does. 🔇
Every Control Needs a Name
Every interactive control must have an accessible name. For text buttons the text supplies it; an icon-only button has no text to borrow.
Add aria-label to the Button
The simplest fix: put aria-label on the button itself to name the action, even when the inside is just an icon.
<button aria-label="Close">
<svg aria-hidden="true">...</svg>
</button>Hide the Icon Inside
Mark the inner icon with aria-hidden="true". The button carries the name; the icon is pure decoration once the label exists.
<button aria-label="Search">
<svg aria-hidden="true" focusable="false">...</svg>
</button>Or Use Visually Hidden Text
Prefer real text? Add a span styled with a visually-hidden class. Sighted users see only the icon; screen readers hear the words.
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Add to cart</span>
</button>What sr-only CSS Looks Like
A visually-hidden class clips the text to a single pixel without using display none, which would also hide it from screen readers.
.sr-only {
position: absolute;
width: 1px; height: 1px;
clip-path: inset(50%);
}Name the Action, Not the Icon
Label what happens, not the picture. Use Delete, not trash can. Users want the verb, not a description of the glyph.
Never Use the title Attribute Alone
The HTML title attribute is unreliable as a name: it skips touch and keyboard users entirely. Use aria-label or hidden text instead.
Toggle Buttons Need State
For an icon toggle like mute, also add aria-pressed so the button announces whether it is currently on or off.
<button aria-label="Mute" aria-pressed="false">
<svg aria-hidden="true">...</svg>
</button>Keep the Name in Sync
If an icon button changes meaning, update its name too. A play button that became pause must now announce Pause, not Play.
Verify the Spoken Name
In the accessibility inspector, select the button and read its computed name. It should match the action, never be blank.
Quick Check
You have a button containing only a magnifier SVG and no text. How do you give it an accessible name?
Recap: Name Every Icon Button
Give icon-only buttons a name via aria-label or visually hidden text, hide the icon, and label the action. Now every button speaks. ✅
よくある質問
「名前のあるアイコンボタン」レッスンは無料ですか？
はい。「名前のあるアイコンボタン」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「名前のあるアイコンボタン」で何を学びますか？
文字のないボタンに明確なアクセシブルラベルを付けます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「名前のあるアイコンボタン」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。