Total Validator 未找到 skip link

Question

Total Validator 未找到此 link 并向我写此警告：

Add a skip navigation link as the first link on the page.

我怎样才能写得更好link？

<html>
<body>
<a href="#skip">Skip to Content</a>
navbar with menu 
<div id="skip">
</div>
</body>
</html>

Answer 1

不管第一条评论怎么说，ID 值 "skip" 在技术上是没问题的；它不需要更改为 "skiptocontent"。 TotalValidator 未检测到跳过 link 的原因可能是其他原因。 link 转到页面中的某处，并且 "somewhere" 未明确标记为主要内容。您可以使用 WAI-ARIA landmarks.

执行此操作

使用如下标记，对于验证者来说应该很明显，您的第一个 link 是跳过 link 到主要内容：

<body>
  <a href="#skip">Skip to Content</a>
  <!-- navigation menu goes here -->
  <div role="main" id="skip">
    <p>...</p>
  </div>
</body>

您还可以使用 "semantic" 个元素，例如

<body>
  <a href="#skip">Skip to Content</a>
  <header><h1>...</h1></header>
  <nav><!-- navigation menu goes here --></nav>
  <main id="skip"><!--role="main" is redundant on the main element-->
    <p>...</p>
  </main>
  <footer>
  </footer>
</body>

有关 main (role) and the HTML5.2 spec for the main element 的文档，请参阅 WAI-ARIA 规范。

Answer 2

根据我的测试，他们确实要求文本 link 包含单词 "skip"，并且 href 属性以 # 开头，否这个元素是否存在很重要。

使用您提交的代码，它适用于我自己安装的 TotalValidator（我并不是说我会使用这个工具）。

有关信息，TotalValidator 网站使用以下代码

<div id="skip"><a href="#content">Skip navigation</a></div>

[...]

<a id="content"></a>

Total Validator 未找到 skip link

Total Validator doesn't find skip link

html

validation

accessibility

web-accessibility