ナビゲーションラベルから「navigation」を削除する理由：ユーザビリティとアクセシビリティの観点
「navigation」というラベルの問題点
Web制作において、ナビゲーション要素に「Main navigation」「Site navigation」といったラベルを付けるケースは広く見られる。しかし、CSS-Tricksの記事「There’s no need to include ‘navigation’ in your navigation labels」は、この習慣がユーザビリティとアクセシビリティの両面で不要であるばかりか、悪影響を及ぼすと指摘する。特にスクリーンリーダー利用者にとって、ARIAランドマークやnav要素が既に「navigation」として認識される中で、さらに同じ単語をラベルとして重複させるのは情報の冗長性を生む。開発者にとって重要となるのは、ラベルは「差別化のための情報」であって「構造の再宣言」ではないという原則である。
なぜ「navigation」が冗長なのか
HTML5の<nav>要素は暗黙のARIAロールnavigationを持つ。つまり、ブラウザと支援技術はこの要素を自動的に「ナビゲーションランドマーク」として認識する。そこにaria-label="Main navigation"やaria-labelledbyでさらに「navigation」と指定すると、スクリーンリーダーは「メインナビゲーションナビゲーション」のように読み上げる。具体例として、VoiceOverでは「メインナビゲーション、ナビゲーションランドマーク」と二重に通知される。これはユーザーにとって不要な情報の反復であり、特に複数のナビゲーションランドマークがある場合、区別がつきにくくなる。
実装上の落とし穴
多くのフレームワークやCMSはデフォルトでnav要素にaria-label="navigation"を設定する。例えば、Bootstrap 5のナビゲーションバーは<nav class="navbar" aria-label="Main navigation">のように出力される。これはアクセシビリティガイドラインに準拠しているように見えて、実際には冗長ラベルを生成する。修正は簡単で、ラベルから「navigation」を削除し、「Main」「Site」「Primary」といった単独の識別子にするだけでよい。この小さな変更が、スクリーンリーダーユーザーの認知負荷を減らす。
ラベリングのベストプラクティス
必要なのは「ナビゲーションであること」の告知ではなく、「どのナビゲーションか」の識別である。例えば、ページにグローバルナビゲーションとローカルナビゲーションがある場合、ラベルは「Global navigation」ではなく「Global」で十分。同様に「Local」「Breadcrumb」「Footer」といった短いラベルが効果的。WAI-ARIA Authoring Practicesでも、ランドマークラベルは「そのランドマークの目的を簡潔に説明するもの」とされている。nav要素自体がナビゲーションであることを伝えるため、ラベルには単に「Main」「Secondary」「Section」など、他のランドマークと区別できる名前を選ぶ。
実際のコード比較
- 非推奨:
<nav aria-label="Main navigation">→ 読み上げ: 「Main navigation, navigation landmark」 - 推奨:
<nav aria-label="Main">→ 読み上げ: 「Main, navigation landmark」 - ラベル不要なケース: ページ内に1つしか
navがない場合はaria-labelそのものを省略できる。ラベルはページ内のナビゲーションランドマークが複数ある場合のみ必要。
アクセシビリティとSEOの微妙な関係
「navigation」という単語がSEOに影響するか疑問に思う開発者もいる。検索エンジンはaria-labelの内容を直接ランキング要素として使わないが、支援技術向けの情報が間接的にユーザー体験を向上させる。また、ARIAランドマークはGoogleのPage Experience指標に関わるものではないが、WCAG準拠は法的要件となりつつある。冗長ラベルの削除は容易で、コストゼロの改善である。移行コストは既存プロジェクトのコードベースでaria-labelに「navigation」が含まれる箇所を置換するだけ。スクリプト一発で終わる。
まとめに代えて：次に何が起こりそうか
CSS-Tricksのこの指摘は、アクセシビリティコミュニティでは以前から知られていたが、最近のBaseline統一やスクリーンリーダーの普及率上昇により、より多くの開発者が直面する問題になった。今後、フレームワークのデフォルトテンプレートやドキュメントも徐々に改善されるだろう。例えば、Next.jsの<nav>コンポーネントやAstroのNavigationコンポーネントがデフォルトで冗長ラベルを生成しなくなる可能性がある。開発者は、自らのコードベースがこのパターンに陥っていないか今すぐ確認するべきだ。小さな修正が、製品全体のユーザビリティに大きな差を生む。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！