2

Total Validator 没有找到此链接并向我写此警告:

添加跳过导航链接作为页面上的第一个链接。

如何以更好的方式编写此链接?

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

2 回答 2

2

根据我的测试,它们确实要求文本链接包含单词“skip”,并且href属性以 a 开头#,无论此元素是否存在。

使用您提交的代码,它可以与我自己安装的 TotalValidator 一起使用(我并不是说我会使用这个工具)。

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

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

[...]

<a id="content"></a>
于 2018-05-04T14:58:38.547 回答
0

尽管第一条评论说了什么,ID 值“skip”在技术上是好的;它不需要更改为“skiptocontent”。TotalValidator 没有检测到跳过链接的原因可能是别的。该链接指向页面中的某处,并且该“某处”未明确标记为主要内容。您可以使用WAI-ARIA landmarks来做到这一点。

使用如下标记,验证器应该很明显,您的第一个链接是指向主要内容的跳过链接:

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

您还可以使用“语义”元素,例如

<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)的文档,请参阅 WAI-ARIA 规范和有关main 元素的 HTML5.2 规范。

于 2018-05-04T12:23:02.940 回答