NVDA 在按下 tab 时跳过初始页面加载时的第一个可聚焦元素

Question

最近，在尝试使我的站点可访问时，我偶然发现了一个奇怪的问题。在设置 'skip navigation' link 的过程中，我注意到当页面最初加载时（'initially loaded'，我的意思是在一个干净的浏览器会话中，而不是在刷新时——正如 NVDA 保持最后一个焦点元素的轨道，因此结果将取决于它）。

当页面加载并按下 tab 键时，获得焦点的元素是第二个元素（正如您将从下面的简化示例中看到的，是站点 logo/name（也是一个锚点 link)).

当 NVDA 不是运行时，问题不会显示...一切都按预期工作，Firefox 在有或没有 NVDA 运行的情况下都可以正常工作，但问题出现在 Chrome、Edge 和 Opera 桌面。到目前为止，我还没有在任何其他浏览器上测试过它。

请注意，由于问题的性质，我没有包括可运行的代码片段或 fiddle（因为屏幕上会有其他元素，正如我所说，这个问题只显示使用新浏览器 session/clean 页面加载。这里是一些简化的代码来显示问题...

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 隐身模式下禁用我所有的浏览器 extensions/test。然后我在上面提到的其他浏览器中尝试了。我还尝试了其他可聚焦的元素（例如按钮，甚至是设置了 'tabindex=0' 属性的 div。我还将初始的 link 单独放置（不在父 div)。都给出了相同的结果。

解决方法

我没有将 link 放在 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;

子弹消失了但是问题returns...

现在，我坚持使用 'fix'，但我没有将列表样式设置为 none，而是简单地从列表中删除了填充，这样当它结束时在屏幕左侧，子弹保持在屏幕外并隐藏。我已经在所有浏览器中测试过它并且它有效，除了屏幕阅读器在遍历元素时仍然阅读和宣布 'bullet' 的事实（在 NVDA 中，使用箭头键）。这不是一个巨大的交易破坏者，但这似乎是一种非常 'hacky' 实现（接近）预期结果的方式。

总而言之，要重现问题，浏览器必须是一个新会话。加载页面后，第一次按 Tab 键应将 link 集中在 'skip-nav' div 中。目前在上面的示例中，初始选项卡似乎忽略了第一个 link （除非在项目符号列表中）。但是，向后移动 Tab 键确实像预期的那样聚焦 link。

我是否遗漏了什么？

Answer 1

这是一个视觉焦点问题，当您加载页面时，焦点放在文档上（通过浏览器）并且第一个 link 已经聚焦（通过 NVDA），如果它没有被包裹在一个<ul>。 NVDA 也没有报告使用 NVDA + Tab.

聚焦该项目

但是，如果您按 Space 激活 link，您会看到它确实在 URL 更新时聚焦。

我猜这与 NVDA 在以编程方式更改焦点时如何放置查看光标以及它如何与页面上的第一项交互有关。

此外，如果您在页面加载后将焦点置于 URL 栏（重置焦点）并将 Tab 置于文档中，它的行为与预期一致。

这似乎是一个长期存在的错误，但我找不到任何关于该过程的特定部分导致此错误的答案。这也是我直到今天才意识到的一个错误，所以我会做更多的挖掘（我的网站受此影响）。

我唯一能想到的是浏览器将文档聚焦在页面上的第一个 link 是第一个文本，当审阅光标放在它上面时它假定 link已激活（或在呈现文档之前由 NVDA 设置焦点...不过纯属猜测）。

如何自己修复

解决此问题的一种方法是更改 NVDA 中的设置。

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

此时您会看到页面上的第一项自动正确聚焦。

如何为其他人修复

它是否需要修复是值得商榷的，Tab 不像其他方法那样经常被屏幕 reader 用户使用，而且事实上它只在一个品牌上新会话（我的意思是我从来没有注意到它，我经常使用屏幕 reader，尽管只是为了测试而不是作为一个全职用户）我想大多数人不会受到影响。

因为它似乎只有在页面上的第一个文本是 link 时才会发生，您也许可以解决它（我还没有机会测试），方法是在它之前添加一个带有 space.

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

我会 return 在对上述内容进行一些测试后回答这个问题，但可能需要几天时间才能有机会。

更新

看来我是对的，添加带有 space 的跨度解决了问题并且焦点显示正确。

完整 HTML 在下面的 fiddle 中测试，只是将 <span> </span> 添加到 <header> 中，第一个 link 然后按预期显示焦点：

<!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 在按下 tab 时跳过初始页面加载时的第一个可聚焦元素

NVDA Skips first focusable element on initial page load when tab pressed

html

focus

accessibility

nvda

如何自己修复

如何为其他人修复

更新