コントロールを無名にするよくある命名ミス
要素に名前が付かなくなるパターンを避けます。
「コントロールを無名にするよくある命名ミス」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
コントロールが無言になるとき
計算された名前がないコントロールは、単に「ボタン」や「リンク」と読み上げられます。このような命名ミスがあると、ユーザーは要素の役割を推測するしかありません。
アイコンだけのボタン
アイコンだけを含むボタンでは、名前が計算されないことがよくあります。aria-labelを追加して、文字のないコントロールでも操作内容が読み上げられるようにしてください。
<button aria-label="Delete">🗑️</button>placeholderは名前ではない
placeholderは、信頼できるアクセシブルな名前ではありません。入力を始めると消え、多くのスクリーンリーダーでは無視されるため、実際のラベルを追加してください。
<input placeholder="Email">壊れたlabelledbyのID
存在しない、またはスペルを間違えたidを指すaria-labelledbyは、名前をまったく生成しません。意図したラベルがひそかに無効になります。
<button aria-labelledby="ttl">x</button>空のaria-label
空の文字列を設定したaria-labelは、名前を消してしまいます。その要素には、スクリーンリーダーが読み上げる内容が何もなくなります。
<button aria-label="">Save</button>唯一のテキストを非表示にする
ボタン内にある唯一のテキストにaria-hiddenを設定すると、名前の元となる情報がなくなり、スクリーンリーダーからは名前のないコントロールになります。
<button><span aria-hidden="true">Next</span></button>一般的すぎるリンクテキスト
「Read more」や「Click here」という名前のリンクは、技術的には名前がありますが、移動先がわからないため文脈がなければ役に立ちません。
<a href="/post">Read more</a>titleだけに頼る
titleだけを名前として頼るのは危険です。titleは名前の情報源としての優先度が最も低く、完全に無視するスクリーンリーダーもあります。
ラベルのない入力欄
関連付けられたlabelのない入力欄では、名前が計算されないことがよくあります。そのため、ユーザーは何を入力すべきかわからなくなります。
<input type="text">重複した名前
「編集」という名前のボタンが10個あると、ユーザーはどの行に作用するのか推測しなければなりません。それぞれの対象を含む固有の名前を付けてください。
<button aria-label="Edit profile">Edit</button>インスペクターで確認する
ブラウザーのアクセシビリティパネルを開き、各コントロールの計算された名前を確認してください。空欄なら、修正すべきミスがあります。
確認問題
アイコンボタンにゴミ箱の記号しか表示されていません。なぜ無言になる可能性がありますか。
まとめ：コントロールに名前を付ける
アイコンだけのボタンから壊れたIDまで、コントロールを無言にしてしまう落とし穴と、インスペクターですべての名前を確認する方法を学びました。✅
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「コントロールを無名にするよくある命名ミス」レッスンは無料ですか？
はい。「コントロールを無名にするよくある命名ミス」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「コントロールを無名にするよくある命名ミス」で何を学びますか？
要素に名前が付かなくなるパターンを避けます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「コントロールを無名にするよくある命名ミス」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- アクセシブルネームの計算をわかりやすく解説
- aria-label と aria-labelledby
- 追加情報に使う aria-describedby
- コントロールを無名にするよくある命名ミス