时间戳

首页 > 解决方案 > 按下选项卡时，NVDA 在初始页面加载时跳过第一个可聚焦元素

html - 按下选项卡时，NVDA 在初始页面加载时跳过第一个可聚焦元素

问题描述

最近在尝试使我的网站可访问时，我偶然发现了一个奇怪的问题。在设置“跳过导航”链接的过程中，我注意到当页面初始加载时（通过“初始加载”，我的意思是在干净的浏览器会话中，而不是在刷新时——因为 NVDA 会跟踪最后一个焦点元素，因此结果将取决于此）。

当页面加载并按下 tab 键时，获得焦点的元素是第二个元素（从下面的简化示例中您将看到，它是站点徽标/名称（也是锚链接））。

当 NVDA 未运行时，该问题不会显示...一切正常，无论是否运行 NVDA，Firefox 都可以正常工作，但问题存在于 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 中。目前对于上述示例，初始选项卡似乎忽略了第一个链接（除非在项目符号列表中）。但是，向后移动制表符确实会像预期的那样聚焦链接。

有什么我想念的吗？

标签： htmlfocusaccessibilitynvda

解决方案

这是一个视觉焦点问题，当您加载页面时，焦点位于文档上（由浏览器），如果第一个链接没有被包裹在<ul>. NVDA 也不会报告该项目使用NVDA+聚焦Tab。

但是，如果您按下Space激活链接，您将看到它确实随着 URL 更新而集中。

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

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

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

我唯一能想到的是浏览器关注文档页面上的第一个链接是第一个文本，当审阅光标放在它上面时，它假定链接已激活（或者焦点是在文档之前由 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>&nbsp;</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>

推荐阅读