Ensures role="text" is used on elements with no focusable descendants

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

    修正方法

    Correct markup solutions

    The role="text" attribute should be put on an element with no focusable descendants.

    <h1><span role="text">Hello <br/>World</span></h1>

    Incorrect markup solutions

    <span role="text">
      <a href="/site.html">Not announced as link</a>
    </span>
    

    なぜ重要なのか

    When a text node is split by markup (e.g. <h1>Hello <span>World</span></h1>) VoiceOver will treat it as two separate phrases instead of just one. Adding role="text" around the elements solves the problem. However, it also overrides the role of the element and all descendants and treats them all as text nodes. If one of the descendant elements is also focusable it would create an empty tab stop. That is, you could tab to the element but VoiceOver would not announce its name, role, or value.

    ルールの説明

    Elements with role="text" must not have focusable descendants.

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

    Checks all elements with role="text" to ensure that they do not have focusable descendants.

    リソース

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

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

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

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

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