区別できない複数のナビゲーションランドマーク

2つのナビゲーションランドマークには名前がなく、3つ目は場所にロールを足した名前のため、ランドマークの一覧では区別できません。

各 nav に、ロールを含まず中身を表す短い名前が付き、ランドマークの一覧は「メイン ナビゲーション」「カテゴリー ナビゲーション」「ヘルプ ナビゲーション」と読みます。nav ごとに属性が一つで、コンポーネントのpropsからも簡単に渡せます。サイドバーとフッターの名前は見出しの写しなので、両方を一緒に変える必要があります。また、aria-label を翻訳しない翻訳ツールでは、隣の見出しだけが別の言語に変わります。

どちらの方法でも各ナビゲーションに固有の名前が付き、1.3.1のARIA11を満たすので、一つ目の方法も間違いではありません。それでも、見える見出しがあるランドマークでは見出しを指してください。理由は二つあります。

テキストが一か所で済みます。aria-label では「カテゴリー」が見出しと属性の両方に書かれます。見出しを「部屋から選ぶ」に変えても、属性を直すきっかけはなく、スクリーンリーダーの利用者だけが、画面のどこにもない「カテゴリー」という名前を聞き続けます。

名前がページと一緒に翻訳されます。ブラウザのページ翻訳は見出しのテキストを訳しますが、aria-label を訳さないことが多く、翻訳したページでもランドマークの一覧だけ元の言語のまま残ります。見出しから取った名前は見出しそのものなので、一緒に変わります。

この例のヘッダーの nav のように見える見出しがないランドマークや、共有コンポーネントが見出しに id を受け取れない場合は、aria-label を使ってください。

名前にロールを入れない。 ロールはスクリーンリーダーが加えるため、aria-label="メイン" で「メイン ナビゲーション」と読まれます。「領域」「メニュー」「ランドマーク」も同じです。文章の中で呼ぶように、領域の中身を一、二語で名付けます。

一度しか現れないランドマークに名前は要らない。 ページには通常、最上位の header（バナー）、main、footer（コンテンツ情報）が一つずつあり、これらに名前は要りません。名前が必要なのは、同じロールが2回以上現れるときです。たとえば複数の nav や aside、ヘッダーと検索結果ページの両方にある search 要素です。

名前を付けた section はランドマークになる。 section 要素は名前があるときだけ region ランドマークになるため、すべての section にラベルを付けるとランドマークの一覧があふれます。移動したくなる少数の領域にだけ名前を付け、残りは見出しに任せます。

内容が同じナビゲーションは名前を共有できる。 同じページ送りが結果一覧の上と下にあるとき、2つの nav は同じリンクを持ちます。ARIA Authoring Practicesは、どちらを使っても同じことができるため、「ページ送り」のように同じ名前を付けることを認めています。

名前はランドマークに付ける。 名前は nav、aside、section、form そのものに付けます。ランドマークの中の ul、ロールのない div、見出しは名前を上に渡せません。ロールのない div のラベルは、多くのスクリーンリーダーが無視します。

コンポーネント。 何か所かで使う共通のナビゲーションコンポーネントには、名前を必須のpropsにするか、見出しの id を渡せるようにし、インスタンスごとに違う名前が付くようにします。コンポーネント単体ではなく、出力されたページで確認してください。