aria-labelで複数の領域に名前を付ける
2つのnavを区別し、ユーザーが違いを把握できるようにします。
「aria-labelで複数の領域に名前を付ける」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Two Navs, One Problem
Many pages have a main menu and a footer menu. Both are nav landmarks, and without names they sound identical to a screen reader.
Name a Region
Add aria-label to give a landmark a short, spoken name. Now the screen reader can tell your two navs apart.
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>Keep Labels Short
An aria-label should be a couple of words, like Main or Breadcrumb. Users hear it announced, so brevity respects their time.
Do Not Repeat the Role
Write Footer, not Footer navigation. The screen reader already says navigation, so adding it again is just noise.
<nav aria-label="Footer">...</nav>Reuse a Visible Heading
If a region already has a visible heading, point to it with aria-labelledby instead of typing the name twice.
<nav aria-labelledby="more">
<h2 id="more">More links</h2>
</nav>label vs labelledby
Use aria-label when there is no visible text, and aria-labelledby when a heading or text on screen can serve as the name.
It Works on Any Landmark
Naming is not just for nav. Label an aside or a section so users know what each region holds.
<aside aria-label="Related">...</aside>One Region, Skip the Label
If a page has only a single nav, it needs no label. Naming matters most when two regions share the same role.
Distinct Names Matter
Give each region a distinct name. Two navs both labeled Menu defeats the purpose, since users still cannot tell them apart.
Hear the Difference
With names in place, the landmark list reads Main navigation and Footer navigation, so users pick the right one instantly. 🔊
Labels Are Not Visible
An aria-label is announced but never shown on screen, so it changes nothing visually while helping every screen reader user.
Quick Check
You have two nav regions. What is the best label for the bottom one?
Recap: Name Your Regions
You learned to label repeated landmarks with aria-label or aria-labelledby, keeping names short, distinct, and role-free. 🙌
よくある質問
「aria-labelで複数の領域に名前を付ける」レッスンは無料ですか？
はい。「aria-labelで複数の領域に名前を付ける」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「aria-labelで複数の領域に名前を付ける」で何を学びますか？
2つのnavを区別し、ユーザーが違いを把握できるようにします。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「aria-labelで複数の領域に名前を付ける」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- header、nav、main、footer：4つの主要要素
- mainにコンテンツを配置し、mainを1つだけにする
- aria-labelで複数の領域に名前を付ける
- ランドマークナビゲーション：ユーザーが移動する方法