按下選項卡時，NVDA 在初始頁面加載時跳過第一個可聚焦元素

Question

最近，在嘗試使我的網站可訪問時，我偶然發現了一個奇怪的問題。 在設置“跳過導航”鏈接的過程中，我注意到當頁面初始加載時（“初始加載”，我的意思是在干凈的瀏覽器會話中，而不是在刷新時——因為 NVDA 會跟蹤最后一個焦點元素，因此結果將取決於此）。

當頁面加載並按下 Tab 鍵時，獲得焦點的元素是第二個元素（正如您從下面的簡化示例中看到的，是站點徽標/名稱（也是一個錨鏈接））。

當 NVDA 未運行時，問題不會顯示......一切都按預期運行，Firefox 在運行或不運行 NVDA 的情況下都可以正常工作，但問題存在於 Chrome、Edge 和 Opera 桌面。 到目前為止，我還沒有在任何其他瀏覽器上測試過它。

請注意，由於問題的性質，我沒有包含可運行的代碼片段或小提琴（因為屏幕上會有其他元素，而且正如我所說，此問題僅在新瀏覽器會話/干凈頁面加載時顯示.這是一些簡化的代碼來顯示問題......

CSS

body, html {
  margin: 0;
}

.skip-nav {
  position: absolute;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  display: inline-block;
  padding: 0;
}

.skip-nav a {
  position: absolute;
  left: -1000px;
  border: 2px solid blue;
  border-radius: 2px;
  background-color: black;
  padding: 5px;
}


/* Move link into viewport when focused */
.skip-nav a:focus {
  left: initial;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  background-color: darkblue;
  padding: 10px;
  color: white;
}

nav ul {
  list-style: none;
}

nav li {
  display: inline;
  margin: 0 5px 0 5px;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  color: rgb(165, 165, 165);
}

HTML

<!-- Should get focus first, only does in FF when NVDA is running, not in other tested browsers -->
<div class="skip-nav">
  <a href="#main-content">Skip navigation</a>
</div>

<!-- Dummy nav bar -->
<nav>
  <a href="#">Name</a>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
  
<!-- Main site content -->
<section id="main-content">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi dolores voluptates temporibus culpa in quia et magni laborum architecto fugit!
</section>

我嘗試過的事情

我做的第一件事是在 Chrome 隱身模式下禁用我的所有瀏覽器擴展/測試。 然后我在上面提到的其他瀏覽器中嘗試過。 我還嘗試了其他可聚焦元素（例如一個按鈕，甚至一個帶有 'tabindex=0' 屬性集的 div。我也將我的初始鏈接放在了自己的位置（不在父 div 中）。所有都給出了相同的結果。

解決方法

我沒有將鏈接放在 div 中，而是將其放在 ul/li 中……它完美地工作……

<!-- Using a UL works... but not with bullets hidden
<ul class="skip-nav">
  <li>
    <a href="#main-content">Skip navigation</a>
  </li>
</ul>

所以我想我會在我的 CSS 中使用以下屬性設置列表......

list-style: none;

子彈消失了，但問題又回來了……

現在，我堅持使用“修復”，但我沒有將列表樣式設置為無，而是簡單地從列表中刪除了填充，以便當它到達屏幕左側時，項目符號保持關閉-屏幕和隱藏。 我已經在所有瀏覽器中測試過它並且它有效，除了屏幕閱讀器在遍歷元素時仍然閱讀和宣布“項目符號”的事實（在 NVDA 中，使用箭頭鍵）。 不是一個巨大的交易破壞者，但這似乎是實現（接近）預期結果的一種非常“hacky”的方式。

總結一下，要重現該問題，瀏覽器必須是一個新會話。 加載頁面后，第一次按 Tab 鍵應將鏈接聚焦在“skip-nav”div 中。 目前在上面的例子中，初始選項卡似乎忽略了第一個鏈接（除非在項目符號列表中）。 但是，向后移動制表符確實會像預期的那樣聚焦鏈接。

有什么我想念的嗎？

Answer 1

這是一個視覺焦點問題，當您加載頁面時，焦點將放在文檔上（由瀏覽器），並且如果第一個鏈接沒有包含在<ul>則它已經聚焦（由 NVDA）。 NVDA 也不會報告該項目使用NVDA + Tab 獲得焦點。

但是，如果您按空格鍵激活鏈接，您會看到它確實在 URL 更新時聚焦。

我的猜測是，這與 NVDA 在以編程方式更改焦點時如何放置評論光標以及它如何與頁面上的第一項交互有關。

此外，如果您在頁面加載（重置焦點）和Tab到文檔后將焦點置於 URL 欄中，它會按預期運行。

這似乎是一個長期存在的錯誤，但我無法找到有關該過程的特定部分導致此問題的任何答案。 這也是一個直到今天我才意識到的錯誤，所以我會做更多的挖掘（我的網站受此影響）。

我唯一能想到的是瀏覽器將文檔聚焦到頁面上的第一個鏈接是第一個文本，當評論光標放在它上面時，它假定鏈接被激活（或者在文檔被激活之前由 NVDA 設置焦點渲染......雖然純屬猜想）。

如何為自己修復

解決此問題的一種方法是更改 NVDA 中的設置。

Right click NVDA icon -> Preferences -> Review cursor... -> uncheck "Follow system focus".

此時，您將看到頁面上的第一項自動正確聚焦。

如何為其他人修復

是否需要修復是有爭議的，屏幕閱讀器用戶不像其他方法那樣經常使用Tab ，事實上它只在一個全新的會話中使用（我的意思是我從來沒有注意到它，我經常使用屏幕閱讀器，盡管僅用於測試而不是全職用戶）我想大多數人不會受到影響。

因為它似乎只發生在頁面上的第一個文本是一個鏈接時，您可以通過在它之前添加一個帶有空格的跨度來解決它（我沒有機會測試）。

<div class="skip-nav">
  <span>&nbsp;</span>
  <a href="#main-content">Skip navigation</a>
</div>

在對上述內容進行一些測試后，我將回到這個問題，但可能需要幾天時間才能有機會。

更新

我似乎是正確的，添加一個帶空格的跨度可以解決問題，並且焦點顯示正確。

在下面的小提琴中測試了完整的 HTML，只是將<span> </span>到<header> ，然后第一個鏈接按預期顯示焦點：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NVDA focus Test</title> </head> <body > <header> <span>&nbsp;</span> <!---------------THIS IS WHAT I ADDED-------------> <a href="#content" id="skipToContent">I should focus on first tab press</a> <a href="#accHelp" id="skipToAccHelp">I should focus on second</a> </header> <section style="margin-top: 20px;"> <p> When you press tab after this page has loaded (at least for me), the initial tab press will focus the <i>second</i> link for some reason. </p> <p> This seems to happen however I present the link (on its own, wrapped in a div, section, or even a ul/li with the list-style set to 'none') :-(. </p> </section> </body> </html>

按下選項卡時，NVDA 在初始頁面加載時跳過第一個可聚焦元素

問題描述

1 個解決方案

解決方案1
3 已采納 2020-11-21 19:01:22

如何為自己修復

如何為其他人修復

更新

按下選項卡時，NVDA 在初始頁面加載時跳過第一個可聚焦元素

問題描述

1 個解決方案

解決方案1 3 已采納 2020-11-21 19:01:22

如何為自己修復

如何為其他人修復

更新

解決方案1
3 已采納 2020-11-21 19:01:22