NVDA 屏幕閱讀器讀取文本上的可點擊單詞

Question

知道為什么 NVDA 在 html 示例中的文本中讀取可點擊單詞：

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

NVDA 將讀取可點擊測試

Answer 1

簡短的回答：

tabindex 屬性暗示了某些屏幕閱讀器的功能。

長答案：

屏幕閱讀器用戶瀏覽網頁的兩種主要方式是跳過交互式元素或標題。 交互元素是鏈接、按鈕、表單域和用戶將在您的頁面上啟動的任何其他功能。 這些是通過使用“tab”鍵來導航的。

他們瀏覽您頁面的另一種主要方式是通過標題。 事實上，webaim 的一項調查將標題列為絕大多數導航頁面以查找信息的主要方法（來源）。 在您的示例中，您為標題提供了一個 tabindex，這會給人一種它具有某些功能或交互性的印象。 據我了解，JAWS 和 NVDA 都會在具有 tabindex 的元素上讀出“可點擊”，因為它們很容易（並且通常會）有一些在屏幕閱讀器中不明顯的javascript點擊處理程序。

Answer 2

首先請記住，tabindex 在 a11y 中不是一個好習慣，而且標題不需要 tabindex NVDA 提供了帶有 H 鍵的標題導航。 關於可點擊，根據我的經驗，我可以說是 NVDA 的一個已知問題，如果您檢查在其他 SR（Voice over 或 Chromebox）中是否應該正確讀取

Answer 3

回答：

這是因為屬性tabindex使此元素鍵盤可聚焦。 可以通過按鍵盤上的 TAB 鍵來聚焦它。

提示#1：通常應避免使用值大於 0 的屬性tabindex ！

不要使用tabindex="1" 、 tabindex="2"等等。 在某些情況下，只有tabindex="0"或tabindex="-1"才有用。 否則，您可能會為用戶體驗造成一團糟。

閱讀更多：

• Google： 使用大於 0 的 tabindex 被視為反模式。
• WebAIM（可訪問性）：這幾乎總是一個壞主意。
• MDN： 避免使用大於 0 的 tabindex 值。

提示#2：通常不需要制作用戶無法與之交互的可聚焦元素。

在特定情況下，如果用戶無法與其交互，則使標題元素鍵盤可聚焦是沒有意義的。

如果您擔心屏幕閱讀器，用戶就不用擔心，因為他們閱讀不可聚焦的內容就好了。 來自輔助功能開發人員指南的引用：與僅使用鍵盤的用戶相反，屏幕閱讀器用戶通常不使用 Tab 鍵來閱讀頁面！ 閱讀“屏幕閱讀器瀏覽和聚焦模式”以了解使用箭頭鍵和 Tab 鍵導航之間的區別。

但是......規則的例外存在

存在規則的例外情況，如果開發人員將tabindex="-1"為他們希望以編程方式移動焦點以實現可訪問性的標題，這可能是一個好主意。 例如，這種情況是在單頁應用程序中使用 AJAX 更新新鮮內容。 焦點將移至標題，以便用戶了解內容更新並能夠從那里開始。 當當前關注的內容即將從 DOM 中刪除（例如刪除當前關注的表條目）或在表單提交試用后將焦點移動到錯誤摘要標題時，它也很有用。

Answer 4

就我而言（MacOS 上的 VoiceOver），似乎 H1 僅在 Firefox 上被宣布為可點擊。 在 Chrome 上，它已正確宣布。

這讓我相信這是一個 Firefox 錯誤。