ARIAツリーアイテムノードにはアクセス可能な名前が必要です

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

Disabilities Affected

  • 盲目
  • 視力低下
  • 運動・器用さ

Standard(s)

  • Deque Best Practice

    修正方法

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

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

    <div role="treeitem" id="al" aria-label="Name"></div>

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

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

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

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

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

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

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

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

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

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

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

    なぜ重要なのか

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

    ルールの説明

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

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

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

    リソース

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

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

    GitHub で axe-core に貢献する

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

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

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

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

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