メインコンテンツまでスキップ

landmark-roles

  • banner、main、complementaryおよびcontentinfoがトップレベルのランドマークか
  • 特定のランドマークロールがページで複数回使用される場合、一意のラベルがあるか
  • 知覚可能コンテンツがいずれかのランドマーク上に存在するか（実装中）

以上を確認して満たされていない場合は警告します。

W3CのLandmark Regionsを参考にしています。

❌ 間違ったコード例

<!doctype html>
<html>
  <body>
    <header>...</header>
    <nav>...</nav>
    <main>
      <header>...</header>
      <footer>...</footer>
      <nav>ラベルのない重複するnavigationランドマーク</nav>
      <aside>トップレベルにないcomplementaryランドマーク</aside>
    </main>
    <footer>...</footer>
  </body>
</html>

✅ 正しいコード例

<!doctype html>
<html>
  <body>
    <header>...</header>
    <nav aria-label="メイン">...</nav>
    <main>
      <header>...</header>
      <footer>...</footer>
      <nav aria-label="サブ">...</nav>
    </main>
    <aside>...</aside>
    <footer>...</footer>
  </body>
</html>

Interface​

{
  "landmark-roles": boolean
}

Options​

{
  "landmark-roles": {
    "options": {
      "ignoreRoles"?: ("banner" | "main" | "complementary" | "contentinfo" | "form" | "navigation" | "region")[]
      "labelEachArea"?: boolean
    }
  }
}
PropertyTypeDefault ValueDescription
ignoreRoles("banner" | "main" | "complementary" | "contentinfo" | "form" | "navigation" | "region")[]"[]"指定したランドマークロールを警告の対象から除外します。
labelEachAreaboolean"true"特定のランドマークロールがページで複数回使用される場合、一意のラベルがあるか警告します。

Default Severity​

warning