Question

对于辅助功能，我构建了一个跳过导航。这是一个基本的锚点：

 <div class="skip-nav">
   <a href="#content">Skip to content</a>
 </div>

链接到内容：

<section id="content">
  <h1>Accessibility Skip Nav Demo</h1>
  <p>Lorem ipsum...</p>
</section>

按下选项卡将显示基于焦点的“跳至内容”按钮。我的CSS：

.skip-nav a {
  display: block;
  z-index: 1;
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  left: 10px;
  top: 35px;
  white-space: nowrap;
  padding: 10px;
  background: #fff;
}

.skip-nav a:focus,
.skip-nav a:active {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  clip: auto;   
}

除了在Safari中，它在所有浏览器中都能正常工作。在Safari中尝试用鼠标单击不起作用。这是jsfiddle（请在Safari中查看以查看问题）：https://jsfiddle.net/461huu5g/

Answer 1

你必须为每个浏览器设置剪辑css，它看起来像你的firefox和chrome支持它，但safari不是这样：

-webkit-clip: rect(1px 1px 1px 1px);

尝试一下： {{3}}

Answer 2

此问题似乎与使用return int(4)+recursive_me("567") return int(4)+int(5)+recursive_me("67") .... return int(4)+int(5)+int(6)+int(7)+0关键字重置auto属性有关。如果您将clip替换为clip: auto;，则可以在Safari中使用。因此，如果您希望支持不支持clip: initial;的浏览器，您可能需要两者：

initial

clip: auto; clip: initial;将覆盖支持initial的浏览器中的auto。

在旁注[{3}}上，赞成clip is deprecated，因此您可能需要考虑不依赖于initial属性的类似解决方案，例如热门clip-path 1}}离屏，负面定位。

Answer 3

所以问题是我没有完全覆盖。有效的是悬停。所以我更新了css：

.skip-nav a:focus,
.skip-nav a:active,
.skip-nav a:hover
{
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  clip: auto;   
}

<强>无论其

正如Alexander提到的那样， clip 属性已被弃用，因此将来可能会中断。

更好的方式（使用定位）

.skip-nav a {
  display: block;
  z-index: 1;
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  /*clip: rect(1px 1px 1px 1px); DEPRECATED*/
  left: -1000px;
  top: -1000px;
  white-space: nowrap;
  padding: 10px;
  background: #fff;
}

.skip-nav a:focus,
.skip-nav a:active,
.skip-nav a:hover {
  position: absolute;
  left: 10px;
  top: 35px;
  height: auto;
  width: auto;
  overflow: hidden;
  /*clip: auto; DEPRECATED*/
}

Answer 4

不要仅仅关注屏幕阅读器和键盘用户，认为您正在帮助提高辅助功能。

如果你想提供一个“跳过链接”，那么让每个人都可以看到它，而不仅仅是焦点，比如残疾人不使用键盘（触摸屏，眼动追踪设备，语音导航）。

辅助功能Skip Nav - 跳至内容（Safari中的问题）

4 个答案: