锚点需要 href 属性才能通过键盘访问 - Javascript

在网页开发中，为了方便用户快速跳转到页面的不同部分，我们通常会通过设置锚点来实现。然而，如果只是简单地使用锚点标签 <a> , 并没有设置 href 属性，用户通过键盘进行导航时将无法访问。

这是因为键盘导航访问的机制是基于链接的 href 属性进行的。如果链接没有 href 属性，键盘导航将无法找到该链接。

因此，为了确保锚点可以通过键盘访问，必须为其设置 href 属性，并将其设置为 #（表示页面中的当前位置）或者目标元素的 ID。

在Javascript中，可以通过以下代码为所有的锚点设置 href 属性：

const anchors = document.querySelectorAll('a');
anchors.forEach(anchor => {
  if (!anchor.hasAttribute('href')) {
    anchor.setAttribute('href', '#');
  }
});

这段代码会选择页面中的所有锚点，并为其中没有 href 属性的锚点添加 href 属性，值为#。这样，即使用户通过键盘导航访问这些锚点，也可以正常跳转到指定位置。

除了为所有锚点设置 href 属性外，我们还可以在 HTML 中手动为每个锚点添加 href 属性。例如：

<a href="#section-1">Section 1</a>
<a href="#section-2">Section 2</a>

<section id="section-1">
  <h2>Section 1 Title</h2>
  <p>Section 1 Content</p>
</section>

<section id="section-2">
  <h2>Section 2 Title</h2>
  <p>Section 2 Content</p>
</section>

在这个例子中，我们为每个锚点手动添加了 href 属性，并将其设置为对应目标元素的 ID。

无论是通过Javascript设置 href 属性，还是在 HTML 中手动为锚点添加 href 属性，都可以使锚点能够通过键盘访问，提高网页的无障碍性。