aria-text

role="text"の要素はフォーカス可能な子孫を持たないことが推奨されます

manual確度:medium重大度:minorrobust

role="text"を持つ要素が、フォーカス可能な子孫(リンク、ボタン、フォームコントロール、tabindex、iframe、contenteditable)を含まないことを確認します。

適用範囲:role属性がtextに解決される要素。既知のロールを指す最初のトークンを大文字と小文字を区別せずに照合した結果がtextであるものを指し、role="foo text"やrole="TEXT"は該当しますが、role="link text"(リンク)は該当しません。

期待される結果:role="text"は、要素のサブツリー全体をひとまとまりのプレーンテキストとして扱うよう支援技術に指示します(例:スタイルのために複数の<span>に分割されたテキスト)。WAI-ARIA Authoring Practicesによれば、これが意味を持つのはサブツリーにフォーカス可能なコンテンツがない場合だけです。「ただのテキスト」とされた領域の中にフォーカス可能な子孫があると、キーボードや支援技術のユーザーはそこに到達できないか、混乱することになります。

例

pass
<span role="text">Plain text with no interactive content.</span>

role="text"の要素内にフォーカス可能な子孫はありません。

can't tell
<span role="text">Some text with <a href="#">a link</a> inside it.</span>

role="text"はこれを1つの平坦な文字列として扱うよう支援技術に指示していますが、その下にある入れ子のリンクは引き続きフォーカス可能で操作できます。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

ROLE_TEXT_HAS_FOCUSABLE_DESCENDANT

  1. レポートに示された要素を調べ、その内側にあるフォーカス可能な要素を見つけてください。
  2. スクリーンリーダーを起動した状態で、その要素にフォーカスが移るまでTabキーを押し、読み上げられる内容を聞いてください。
  3. EnterまたはSpaceで操作してみてください。

満たす場合:フォーカス可能な要素がロールと名前とともに読み上げられて使用できるか、フォーカス可能である必要がありません。

満たさない場合:フォーカス可能な要素が単なるテキストとして読み上げられるか、まったく読み上げられないため、利用者は操作可能であることがわかりません(ベストプラクティス、WAI-ARIA Authoring Practices)。

ソースコードを見る