web-dev-qa-db-ja.com

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」と最初の1つすべての項目、「title2」と2番目のすべての項目を読み取ります。 フォーカスがどこにあるかによって異なります。

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

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

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

<ul role="list">
 <li role="listitem">
javascripthtmlcsswai-aria
8
Dalibor

他の週にも同じ問題がありました。私が行った解決策は、aria-describedbyとaria-labelを使用して、現在フォーカスされている要素のページ周辺から追加情報を提供することでした。

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

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

2
David Bradshaw

最近同じ問題が発生し、調査中にaria-activedescendant属性に関する情報が見つかりました： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute

この場合、すべてのリスト要素には一意の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
Paweł Głosz

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

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

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

編集：私は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 ％A

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

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

ナレーターとスクリーンリーダーシミュレーターを使用して、Chromeをjsfiddleでテストしました。期待される動作、および再現できたものは、あなたが目指しているものです。間違っている場合は修正しますか？

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

<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評価に合格した経験から得たものであり、それが標準です。

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

0
dvro