Question

Total Validator没有找到此链接并将此警告写给我：

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

如何以更好的方式撰写此链接？

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

Answer 1

根据我的测试结果，他们确实需要文字链接包含单词＆＃34; skip＆＃34;和href属性以#开头，无论这是元素存在。

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

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

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

[...]

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

Answer 2

尽管第一条评论说的是，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)的文档和main element的HTML5.2规范，请参阅WAI-ARIA规范。

Total Validator没有找到跳过链接

2 个答案: