ARIAダイアログとアラートダイアログノードにはアクセス可能な名前が必要です

ルールID: aria-dialog-name
ルールセット: 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

    修正方法

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

    aria-dialog-name ルールには、テスト基準を満たす3つのマークアップ パターンがあります。 

    <div role="dialog" id="alb" aria-labelledby="labeldiv"></div>

<div role="alertdialog" id="combo" aria-label="Aria Name">Name</div>

<div role="dialog" id="title" title="Title"></div>

    1. role="dialog" または role="alertdialog" の各要素が次のいずれかの特性を持つことを確認します。

      • 空でない aria-label 属性。
      • aria-labelledby を、スクリーン リーダーのユーザーが認識できるテキストを含む要素を指します。

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

    aria-dialog-name ルールには、テスト基準を満たさない4つのマークアップ パターンがあります。 

    <div role="dialog" id="empty"></div>

<div role="alertdialog" id="alempty" aria-label=""></div>

<div role="dialog" id="albmissing" aria-labelledby="nonexistent"></div>

<div role="dialog" id="albempty" aria-labelledby="emptydiv"></div>
<div id="emptydiv"></div>

    なぜ重要なのか

    スクリーン リーダーのユーザーは、アクセシブルな名前を持たない role="dialog" または role="alertdialog" の要素の目的を判別できません。

    ルールの説明

    ARIAダイアログ要素には、スクリーン リーダー ユーザー向けに目的地、目的、機能、またはアクションを明確に説明する識別可能なテキストが必要です。

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

    role="dialog" または role="alertdialog" を持つすべての要素をチェックして、識別可能でアクセス可能な名前が付けられていることを確認します。

    リソース

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

    関連するコース情報はありません。

    GitHub で axe-core に貢献する

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

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

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

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

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