ランドマークには、一意の役割または役割/ラベル/タイトル（つまりアクセス可能な名前）の組み合わせが必要です

ルールID: landmark-unique
ルールセット: axe-core 4.8
ユーザーへの影響: 普通
ガイドライン: Deque Best Practice

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact

普通
▼
Minor
Critical

Disabilities Affected

  • 目の見えるキーボードユーザー
  • 視覚障害
  • 視聴覚障害

Standard(s)

  • Deque Best Practice

    修正方法

    正しいマークアップ方法

    landmark-unique には11個の合格するマークアップ方法があります:

    <main id="pass-main">Only main</main>

<header id="pass-header">Only header</header>

<form id="pass-form-aria-label-1" aria-label="form-label-1"></form>
<form id="pass-form-aria-label-2" aria-label="form-label-2"></form>

<div id="form-label-1">form-with-label-1</div>
<div id="form-label-2">form-with-label-2</div>
<form id="pass-form-aria-labelledby-1" aria-labelledby="form-label-1"></form>
<form id="pass-form-aria-labelledby-2" aria-labelledby="form-label-2"></form>

<form id="pass-aside-aria-label-1" aria-label="aside-label-1"></form>
<form id="pass-aside-aria-label-2" aria-label="aside-label-2"></form>

<div id="aside-label-1">aside-with-label-1</div>
<div id="aside-label-2">aside-with-label-2</div>
<form id="pass-aside-aria-labelledby-1" aria-labelledby="aside-label-1"></form>
<form id="pass-aside-aria-labelledby-2" aria-labelledby="aside-label-2"></form>

<footer id="pass-footer">Only footer</footer>

    不適切なマークアップ方法

    landmark-unique には検証基準に不合格になるマークアップ方法が17個あります:

    <main id="violation-main-1">First main</main>
<iframe src="landmark-unique/frame.html" title="iframe with main" id="frame"></iframe>

<header id="violation-header-1">First header</header>
<header id="violation-header-2">Second header</header>

<form id="violation-form-aria-label-1" aria-label="form-label"></form>
<form id="violation-form-aria-label-2" aria-label="form-label"></form>

<div id="form-label-1">form-with-label</div>
<div id="form-label-2">form-with-label</div>
<form id="violation-form-aria-labelledby-1" aria-labelledby="form-label-1"></form>
<form id="violation-form-aria-labelledby-2" aria-labelledby="form-label-2"></form>

<form id="violation-aside-aria-label-1" aria-label="aside-label"></form>
<form id="violation-aside-aria-label-2" aria-label="aside-label"></form>

<div id="aside-label-1">aside-with-label</div>
<div id="aside-label-2">aside-with-label</div>
<form id="violation-aside-aria-labelledby-1" aria-labelledby="aside-label-1"></form>
<form id="violation-aside-aria-labelledby-2" aria-labelledby="aside-label-2"></form>

<footer id="violation-footer-1">First footer</footer>
<footer id="violation-footer-2">Second footer</footer>

<div id="form-label-3">iframe-form-with-label</div>
<div id="violation-form-through-iframe-1" role="form" aria-labelledby="form-label-3"></div>

<div id="violation-nav-through-iframe-1" role="navigation"></div>

<div id="violation-role-banner" aria-label="duplicate label" role="banner"></div>
<div id="violation-role-banner-2"  aria-label="duplicate label" role="banner"></div>

<div id="violation-role-complementary" role="complementary"></div>
<div id="violation-role-complementary-2" role="complementary"></div>

<div id="violation-role-contentinfo" aria-label="duplicate label for contentinfo" role="contentinfo"></div>
<div id="violation-role-contentinfo-2" aria-label="duplicate label for contentinfo" role="contentinfo"></div>

<div id="violation-role-main" aria-label="duplicate label for main" role="main"></div>
<div id="violation-role-main-2" aria-label="duplicate label for main" role="main"></div>

<div id="violation-role-region" role="region"></div>
<div id="violation-role-region-2" role="region"></div>

<div id="violation-role-search" role="search"></div>
<div id="violation-role-search-2" role="search"></div>

<nav  id="violation-nav" aria-label="duplicate label for nav"></nav>
<nav  id="violation-nav-2" aria-label="duplicate label for nav"></nav>

<section  id="violation-section" aria-label="duplicate label for section"></section>
<section  id="violation-section-2" aria-label="duplicate label for section"></section>

    なぜ重要なのか

    landmark-unique はランドマークに一意のロール、またはアクセシブルな名前 (すなわち role, label, title) の組み合わせがあることを確認する新しいベストプラクティスルールです。

    ルールの説明

    ランドマークには一意のロール、またはロール/label/title (すなわちアクセシブルな名前) の組み合わせがなければなりません。

    仕組みについて (簡単に言うと)

    ランドマークが一意であることを確認します。

    リソース

    Deque University コースのページ (要登録)

    GitHub で axe-core に貢献する

    その他のリソース

    その他リソースもあわせてご参照ください。

    axe 4.8 ルールの一覧 を参照する

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: