即使启用了所有辅助功能/键盘设置，带有 href 的锚点也不会在 Safari 中获得焦点

Question

我正在创建一个跳过链接，但锚标记没有在 Safari 中获得焦点（在 Chrome 中有效）。正如我在其他帖子中所读到的那样，我已启用所有辅助功能设置：

1. Safari --> 首选项 --> 高级 --> 选中“按 Tab 键突出显示网页上的每个项目”框
2. Mac 系统偏好设置 --> 键盘 --> 快捷方式 --> 然后点击底部的“所有控件”

除了此处建议的 :focus 之外，我还尝试添加 :hover 伪类：Accessibility Skip Nav - Skip to Content (Issue in Safari)

即使进行了这些更改，浏览内容也不会使跳过链接出现在 Safari 中。它在 Chrome 中始终如一地工作。这里还有一个有问题的代码笔：https ://codepen.io/a-gheorghe-the-vuer/pen/vVJmZw

.card {
  background-color: yellow;
  left: -1000px;
  top: -1000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
}

.anchor-skip:focus .card {
  left: 0;
  top: 0;
  background-color: yellow;
  height: 20px;
  width: 100px;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
  display: block;
}

.anchor-skip:hover .card {
  left: 0;
  top: 0;
  background-color: yellow;
  height: 20px;
  width: 100px;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
  display: block;
}

.anchor-skip:active .card {
  left: 0;
  top: 0;
  background-color: yellow;
  height: 20px;
  width: 100px;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
  display: block;
}

.button {
  z-index: 1
}

.check {
  height: 30px;
  width: 100px;
  border: 1px solid black;
 }
  

        <a
        class="anchor-skip"
        tabindex="0"
        href="#main"
      >
        <div class="card" tabindex="-1">
          <div class="button">
            <span> Skip to main content</span>   
          </div>
        </div>                
      </a>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>
      <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>       <div> hi </div><div> hi </div><div> hi </div><div> hi </div>    
      <div id="main" class="check"> hello </div>
 <div>

任何帮助，将不胜感激。谢谢。

Answer 1

有几件事正在发生。第一个是默认情况下，Safari 不使用标签导航。用户必须进入 Safari 的设置并选中该框以打开选项卡式导航。这很傻。

另一个问题是您的标记。Safari 不喜欢空链接。即使锚标记内有一个 div，Safari 也不会将其识别为有效链接，因此会忽略它。要更正此问题，您需要将标记简化为如下所示：

<a class="sr-only sr-only-focusable" href="#main">Skip to main content</a>

此外，通过使用语义正确的标记，您的链接将不需要 tabindex。使用“tab”键导航时，当链接处于焦点时，将显示参数设置为“block”，使其可见。

祝你好运。

Answer 2

对于跳到主要内容链接：

• 提供指向锚点的视觉隐藏链接
• 当锚点获得焦点时，显示相同的链接
• 当用户点击相同的链接时，然后使用 javascript focus() 函数将焦点移动到目标元素。