Question

我正在创建一个跳过链接，但定位标记未在Safari中聚焦（在Chrome中工作）。我已经启用了所有辅助功能设置，就像我在其他帖子中读到的一样：

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

我还尝试过添加：hover伪类，除了此处建议的：focus之外：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>

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

Answer 1

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

另一个问题是您的标记。 Safari不喜欢空链接。即使您在anchor标签中有一个div，Safari也无法将其识别为有效链接，因此将其忽略。要解决此问题，您需要将标记简化为以下内容：

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

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

祝你好运。

Answer 2

对于跳至主要内容链接：

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

即使启用了所有辅助功能/键盘设置，href锚也不会集中在Safari中

2 个答案: