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

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

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

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 これは、ランドマークが一意の役割またはアクセス可能な名前 (役割、ラベル、タイトルなど) の組み合わせを持つことを保証する新しいベストプラクティスのルールです。

    ルールの説明

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

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

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

    リソース

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

    GitHub で axe-core に貢献する

    その他のリソース

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

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

    この情報は役に立ちましたか?

    すでにフィードバックをいただきました、ありがとうございます。.

    あなたの回答は次のとおりです。

    この情報は役に立ちましたか?
    フィードバックが提出された日付/時刻: