链接片段的目标ID的任何可访问性重要性？

Question

我已经制作了一些与javascript一起使用的标签，现在我试图考虑改善可访问性。

这是我的第一个解决方案。没有javascript，页面上会显示所有内容：

<ul>
 <li>Contact us</li>
 <li>Find us</li>
</ul>

<h2>Contact us</h2>
<p>Text about how to contact us</p>

<h2>Find us</h2>
<p>Text about how to find us</p>

如果没有javascrit，列表项没有意义，所以我添加了链接片段：

<ul>
 <li>
  <a href="#one">Contact us</a>
 </li>
 <li>
  <a href="#two">Find us</a>
 </li>

<h2 id="one">Contact us</h2>
<p>Text about how to contact us</p>

<h2 id="two">Find us</h2>
<p>Text about how to find us</p>

链接片段的目标ID没有语义含义是否重要？我的代码是否还有其他可访问性/可用性问题？

Answer 1

A）在HTML5中，您可以使用<section>标记区分这两个不相关的区域，其中可以包含自己的<h1>标记，以便更好地进行分组和语义（这是一个单词吗？< / em>的）..

B）就id而言，我不认为它与SEO相关，但是出于可维护性的原因，您可能希望使它们更具语义性。

此外（不确定这是否是问题中的疏忽）但是在页面内部链接时，您应该在链接#中使用哈希值，以便

1. 点击
后，浏览器会将您滚动到正确的位置
2. 搜索引擎和浏览器不会关注该链接，并尝试查找具有该名称的页面/文件夹。

C）您还可以通过将链接组定义为导航区域来改进链接组（使用<nav>标记）

<nav>
    <ul>
        <li><a href="#contact-us">Contact us</a></li>
        <li><a href="#find-us">Find us</a></li>
    </ul>
</nav>

<section id="contact-us">
    <h1>Contact us</h1>
    <p>Text about how to contact us</p>
</section>

<section id="find-us">
    <h1>Find us</h1>
    <p>Text about how to find us</p>
</section>