即使启用了所有可访问性/键盘设置，带有 href 的锚点也不会在 Safari 中获得焦点答案

【问题标题】：anchor with href not taking focus in Safari even with all accessibility/keyboard settings enabled即使启用了所有可访问性/键盘设置，带有 href 的锚点也不会在 Safari 中获得焦点
【发布时间】：2018-10-12 16:12:34
【问题描述】：

我正在创建一个跳过链接，但锚标记在 Safari 中没有得到关注（在 Chrome 中有效）。正如我在其他帖子中所读到的，我已启用所有可访问性设置：

Safari --> 首选项 --> 高级 --> 选中“按 Tab 突出显示网页上的每个项目”框
Mac System Preferences --> Keyboard --> Shortcuts --> 然后点击底部的“All Controls”

除了 :focus 伪类之外，我还尝试添加 :hover 伪类，如下所示：Accessibility Skip Nav - Skip to Content (Issue in Safari)

即使进行了这些更改，在内容中切换也不会使跳过链接出现在 Safari 中。它在 Chrome 中始终如一地工作。这也是一个有问题的codepen： 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>

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

【问题讨论】：

我没有 mac 来测试这个，但看看 webaim.org 是否有效。从地址栏中，第一个可聚焦的元素是跳过链接，在您点击它之前它是隐藏的。该网站可以在你的 Mac 上运行吗？
感谢 slugolicious - 该页面上的跳过链接在 Safari 中对我来说确实有效。我看到 a 标签被包裹在一个 div 中，并且 a 标签本身是有样式的。就我而言。我希望 a 标签包含其他几个 div/预制组件，这些组件都随跳过链接出现/消失。我关于为什么我的标签没有关注焦点的问题仍然存在 - 似乎它需要被包裹在一个 div 中。这是为什么呢？
也许是在 safari 上取消隐藏的时间，我不确定。如果它可以在其他浏览器中运行，并且 webaim.org 站点可以运行，那么您的代码中肯定有一些不同的东西无法运行。我建议尝试以与 webaim 相同的方式进行操作，看看您是否可以通过这种方式走得更远。找出“为什么”可能会在以后出现，并且可能需要直接询问苹果

标签： html css safari accessibility anchor

【解决方案1】：

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

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

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

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

祝你好运。

【讨论】：

【解决方案2】：

跳转到主要内容链接：

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

【讨论】：