angularjs - NVDA スクリーン リーダーがテキスト上のクリック可能な単語を読み上げる

Question

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

<h1 tabindex="1"> testing </h1>

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

Answer 1

簡潔な答え：

tabindex 属性は、一部のスクリーンリーダーに対して機能を意味します。

長い答え:

スクリーン リーダーのユーザーが Web ページをナビゲートする主な方法は、インタラクティブな要素をスキップする方法と見出しを使用する方法の 2 つです。インタラクティブな要素とは、リンク、ボタン、フォーム フィールド、およびユーザーがページで開始するその他の機能のようなものです。これらは「タブ」キーを使用してナビゲートされます。

ページをナビゲートするもう 1 つの主な方法は、見出しです。実際、webaim の調査では、ページをナビゲートして情報を見つけるための主要な方法として圧倒的に見出しが挙げられています (ソース)。あなたの例では、見出しに何らかの機能や対話性があるという印象を与える tabindex を与えました。私の理解では、JAWS と NVDA は両方とも、タブインデックスを持つ要素で「クリック可能」と読み上げます。これは、スクリーンリーダーからは明らかでないいくつかの JavaScript クリック ハンドラーを簡単に (そして通常は) 持つことができるためです。

Answer 2

まず第一に、a11y では tabindex は良い習慣ではなく、ヘッダーも tabindex を必要としないことを覚えておいてください。NVDA は H キーによるヘッダー ナビゲーションを提供します。私の経験から言うと、クリッカブルについては、NVDA の既知の問題です。他の SR (ボイスオーバーまたは Chromebox) で適切に読み取られることを確認してください。