ARIAは読者に非フォーカス要素コンテンツを読み取らせる

「フォーカス可能」であるページ上の要素（ボタン、tabindexを含む要素など）があり、スクリーンリーダーがコンテンツを正しく読み上げます。

ただし、フォーカスできない要素がいくつかあるため（ドロップダウンリストの結果など、多くの要素があるため）、ユーザーがタブを無数にクリックしたくないのですが、左/右/アップ/ダウンキー、およびCSSクラスが「選択」されます（ただし、他の要素（その親）が実際にフォーカスされています）

クラスを「選択」して、これらの特定の要素を読者に読み取らせたい。どうすればいいのですか？

（属性aria-label = "read this"を適用しようとしましたが、機能しませんでした。要素が実際にフォーカスされている場合にのみ機能します）

以下は、私が達成したいことを理解するのに役立つ詳細です。

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

これがフィドルです：https : //jsfiddle.net/d5gbjst1/1/

これらの2つのdiv間をタブで移動すると、任意のスクリーンリーダー（Windowsナレーター、NVDA、JAWSで試してみました）は「title1」と最初の項目のすべての項目、「title2」と2番目の項目のすべての項目を読み取ります。焦点がどこにあるかに応じて。

最初のulの最初の項目で「選択された」クラスに注意してください。今、私は自分のulリストを上下矢印で参照し、それに応じて「選択された」クラスが項目間を移動します。（これは独立したJSコードであり、簡単にするためにこの例には含まれていません）

「選択された」クラスが要素に適用されると、読者にそれを強制的に読み取らせたい。まったく可能ですか？

編集：私はulとliにも属性を追加しようとしましたが、まだうまくいきません：

<ul role="list">
 <li role="listitem">

私は他の週に同じ問題を抱えていた、私が一緒に行った解決策は、使用していた aria-describedbyともaria-label、現在フォーカスを持っていることを要素内のページの周りから余分な情報を提供します。

あるケースではaria-label、要素に初めてフォーカスがあったときにのみ詳細を提供するようにのコンテンツを変更します。

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-writtenby_attribute

クラスを「選択」して、これらの特定の要素を読者に読み取らせたい。どうすればいいのですか？

私はあなたがそれをしようとするべきではないと思います。スクリーンリーダー（特に、テストしたもの）には複雑なキーバインドがあり、ユーザーが特定の要素に移動したり、特定の要素の間を移動したり、そこからジャンプしたりできます。

アクセシブルなテクノロジーに非標準の動作を強制すると、それらのユーザーに不満を与える可能性があります。

編集：私はulとliにも属性を追加しようとしましたが、まだうまくいきません：

<ul role="list"> <li role="listitem">

リストにはデフォルトで割り当てられているため、リストにロールを設定しないでください。こちらをご覧ください：https : //www.w3.org/TR/html53/grouping-content.html#ref-for-allowed-aria-role-attribute-values%E2%91%A1%E2%91%A0

最初のulの最初の項目で「選択された」クラスに注意してください。今、私は自分のulリストを上下矢印で参照し、それに応じて「選択された」クラスが項目間を移動します。（これは独立したJSコードであり、簡単にするためにこの例には含まれていません）

「選択された」クラスが要素に適用されると、読者にそれを強制的に読み取らせたい。まったく可能ですか？

私はあなたのjsfiddleでナレーターとChromeのスクリーンリーダーシミュレータを使用してテストしました。期待される行動と、私がなんとか再現したのは、あなたが目指していることです。私が間違っていれば私を訂正しますか？

まず、タブをクリックして、次のマークアップに注目します。

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

スクリーンリーダーが戻る結果

「title1、item1、item2、item3」

続けて。さすがに。

もう一度タブをクリックして、このマークアップに焦点を当てます。

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

そしてスクリーンリーダーが戻ってきます

「タイトル2、アイテム1、アイテム2、アイテム3」

続けて。もう一度、私が期待するように

最後に、もう一度タブをクリックして、フォーカスを最初のマークアップに戻し、下矢印キーを使用します。スクリーンリーダーが戻る

「リストを入力してください。3つのうち1つです。箇条書き。アイテム1」

次に下矢印キーをもう一度クリックして、2番目の箇条書きに移動します。

「3つのうち2つ。弾丸。項目2。」

下矢印キーをもう一度クリックします。

「3つのうち3つ。弾丸。項目3」。

この動作は私が期待するものであり、私が2つのDouble-A WCAG 2.1評価に合格した経験から得たものであり、それが標準です。

どのような行動を期待していますか。具体的には、スクリーンリーダーに返却/発言してほしいものは何ですか。

最近同じ問題が発生し、調査中にaria-activedescendant属性に関する情報が見つかりました。 https

この場合、すべてのリスト要素には一意のID属性があります。リスト要素が選択されている場合、そのIDはフォーカスされた親のaria-activedescendant属性に提供される必要があります。

<div tabindex="0" aria-activedescendant="Id1">
  <span>title1</span>
  <ul>
    <li class="selected" id="Id1">item1</li>
    <li id="Id2">item2</li>
    <li id="Id3">item3</li>
  </ul>
</div>

これらの特定の要素にタブインデックスを追加することもできますが、0より大きい値を使用するとページを移動するのが非常に困難になる可能性があるため、タブインデックスを使用する場合は注意が必要です。詳細な回答のリンクはこちらです。 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex