問題タブ [nvda]

HTMLの例でテキストをタブ移動するときに、NVDAがクリック可能な単語を読み取る理由:

NVDA はクリック可能なテストを読み取ります

ページにこのアイテムがあります<a role="option" href="[looong url]">My Item</a>

通常モードの Firefox でこの項目をクリックすると、NVDA は次のように読み取ります。

ドキュメントがビジー

[ブラウザのアドレスバーからのloong URL]

応用

マイアイテム

アイテムをもう一度クリックすると、URLが読み取られません(望ましい動作):

ドキュメントがビジー

空欄

応用

マイアイテム

その間、Firefox でプライベート モードで同じことを行うと、毎回期待どおりに読み取ります。

ドキュメントがビジー

空欄

応用

マイアイテム

これは、通常モードとプライベート モードの FF の動作に予想される違いですか?

NVDA スクリーン リーダーの使用中にキーボードをアクセス可能にしようとしている単純なコードのチャンクがあります。

具体的には、「ボタン」の役割を持つ div があり、その中にネストされた「ボタン」の別の役割を持つ別の div があります。各 div には異なる onkeydown イベントがあり、ユーザーがその div にタブ移動して「Enter」を押したときに発生します。

このキーボード機能はすべて、NVDA スクリーン リーダーをオンにしていない場合でも、希望どおりに機能します。

ただし、スクリーン リーダーをオンにすると、ネストされたキーダウン イベントが発生しなくなります。代わりに、ネストされたイベントがフォーカスされている場合でも、親イベントのみが発生します。

ただし、NVDA を手動で「ブラウズ モード」から「フォーカス モード」に変更すると (NVDA キー + スペースバーを押すことで)、キー イベントは再び希望どおりに機能します。

残念ながら、NVDA を使用している人が手動で「フォーカス モード」に切り替えることを知っていると期待するのは、私には受け入れられません。自動的に「フォーカス モード」に変更するか、「ブラウズ モード」で動作する必要があります。

コードは次のとおりです。

HTML:

JavaScript:

ここで codepen を表示することもできます: http://codepen.io/jennEDVT/pen/Yprova

誰でも提供できるヘルプをいただければ幸いです。

ps ネストされた div を移動してネストされないようにすると、最初の div の兄弟になることがわかります。すべてが希望どおりに機能します。残念ながら、それはオプションではありません。div はネストする必要があります。

私はアクセシビリティの問題にかなり慣れていないので、aria-label を NVDA で読み取ろうとしています。

これは私のHTMLです：

Windows の NVDA でラベルを読み取ることができず、要素が div または span 内にある場合、一貫して成功しないことがわかりました。

https://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_an_invisible_label

代替手段は何ですか？手伝ってくれますか？

ありがとう、

よろしく、

P.

編集：

私はいくつかの再作業を行い、現在「tl;dr」と表示されているため、aria ラベルが部分的にしか機能しないようにすることができました。これは、Chrome 54、IE 11、および Firefox 49 を搭載した Windows 7 でテストされており、すべて同じ問題が発生します。作り直したコードは次のとおりです。

手伝ってくれますか？

div内にボタンのコレクションがあり、矢印キーイベントに応答してボタン間でフォーカスを移動するjavascriptがあります。

これを NVDA/Firefox/Windows でテストすると、NVDA が矢印キー ハンドラーをオーバーライドし、独自のルールに従ってフォーカスを移動するようです。私のウィジェットは高度にカスタマイズ可能で、動的で、応答性が高いため、これは問題です。そのため、フォーカスを移動するためのルールは非常に複雑です。

Voiceover にも ChromeVox にもこの動作はありません。

各ボタンに role="gridcell" を追加するとこれが修正されるように見えますが、スクリーンリーダーが私のボタンをボタンとして扱わないことを意味するため、そうしないことをお勧めします。また、絶対に必要でない限り、html 構造を変更したくありません (たとえば、各ボタンを別の要素にラップするなど)。

ボタンに独自の矢印キーの動作を適用しないように NVDA に指示する方法 (たとえば、aria または独自の属性) はありますか?

HTML ファイルの次の内容は、スクリーン リーダーによって読み取られません。NVDA は「スクリーン リーダーで読み上げられる」までテキストを読み上げ、その後は & (and) = (等しい) < (より小さい) > (より大きい) のみを読み上げ、その他の特殊文字は読み上げません。

私の目的は、入力のエラーに関する情報をユーザーに提供することです。この例では、角度を付けずにそれを行うことができます。また、「innerHTML」属性を使用して次の例を再作成することもできましたが、NVDA でも機能しませんでした。つまり、エラーが発生したときにボディにノードを追加するだけです。

(警告 無効な名前が入力されました!)

しかし、NVDA はこのタイプの警告メッセージを無視します

NVDA がコンテンツの変更を登録しない理由がわかりません。

Angular2

Windows 10、Firefox 50.1.0、および NVDA 2016.4 を使用しています。