ARIAロールは要素に適切である必要があります

ルールID: aria-allowed-role
ルールセット: axe-core 4.10
ユーザーへの影響:
ガイドライン: 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

    修正方法

    role 属性を持つすべてのHTML要素がロール値を割り当てられるように確認してください。 ARIA仕様のHTMLを参照してください opens in a new window 特定のHTML要素とコンテキストで許可されるロール値を確認することができます。

    正しいマークアップソリューション

    <ul role="menu">
  <li role="none">
    <button role="menuitem">Start</button>
  </li>
</ul>

    誤ったマークアップソリューション

    <ul role="button">Name</ul>

<button role="heading" aria-level="2">Welcome</button>

    なぜ重要なのか

    許可されていない場所でWAI-ARIAロールを使用すると、Webページのアクセシビリティが妨げられる可能性があります。無効なHTML要素とARIAロールの組み合わせを使用すると、最良の場合でもアプリケーションのアクセシビリティに影響はなく、最悪の場合、アプリケーション全体のアクセシビリティを無効にする動作がトリガーされる可能性がある。

    ARIAのHTML仕様に準拠していないHTML要素でARIAロールを使用すると、要素のセマンティクスと競合し、支援技術製品が実際のUIを表さない無意味なユーザー インターフェイス (UI) 情報を報告する可能性があります。

    ルールの説明

    すべてのWAI-ARIAロール値がすべてのHTML要素で許可されるわけではありません。このルールは、割り当てられた役割を持つ各HTML要素がその役割を持つことが許可されているかどうかをチェックします。

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

    WAI-ARIAロール属性値を含むすべての要素をチェックして、その要素に対してロール値が許可されていることを確認してください。

    リソース

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

    GitHub で axe-core に貢献する

    その他のリソース

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

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

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

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

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

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