4
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">