Question

我确信这是重复的，但我只花了15分钟谷歌搜索，阅读W3C文档，以及大量的可访问性网页，并没有更明智，所以我觉得我们需要使用这些谷歌关键字的问题:)

我有一个简单的个人主页。现在我的HTML是这样的：

<header>
<h1>My Name</h1>
</header>

<main role="main">
<h2>Writing</h2>
// hundreds of links
<h2>About</h2>

</main>

我想以某种方式标记“写作”和“关于”部分，以便在进入“关于”部分之前，使用屏幕阅读器的人不必在“写入”部分中收听数百个链接。

上面的HTML是否足以让屏幕阅读器导航？或者，我是否应该使用其他标签，以便屏幕阅读器在需要时更方便地跳过？

Answer 1

您正在使用标题标签（h1，h2），这对屏幕阅读器有很大帮助。跳转到不同的标题很容易。

地标也很好。您可以使用＆lt; nav＆gt;或者role ='navigation'或者role ='main'以及其他几个具有里程碑意义的角色，这也将允许屏幕阅读器用户跳转到某个部分。

所以任何一个都会很好。

但是别忘了键盘用户。如果您有一堆导航链接，那么允许键盘用户跳过该部分会很不错。您可以使用旁路链接。以webaim.org为例。只需打开他们的网站并点击TAB即可。您会看到一个红色的“跳到主要”链接出现。它工作得很好。

Answer 2

将ARIA landmark指定的<nav> HTML标记与分层链接一起使用，可以帮助您的用户更轻松地跳过指定的部分。对于非HTML5代码，您也可以使用role="navigation"作为替代。

我发现this stack overflow link对于理解层次结构的基础非常有帮助。

Answer 3

您可以使用以下方法更轻松地为屏幕阅读器用户进行页面导航：

标题

在适当的地方使用标题元素（h1 - h6）。

它允许用户从标题跳转到标题。

（您已经在使用它了。）

节

在适当的地方使用切片元素（例如section，article等）。

默认情况下，它们具有WAI-ARIA区域映射。您的写作部分可能会获得region角色。您的“关于”部分可能会获得contentinfo角色，但这取决于内容（如果合适）。

它允许用户跳转（或跳过）特定区域。

超链接

使用指向某些标题/部分的链接（a）。

根据页面内容，它可能是ToC（类似于维基百科用于较长文章的内容），或者只是单个或多个跳过链接。在您的情况下，您可以提供一个类似“跳转到关于部分”的链接，但如果您提供菜单可以，则nav元素包含指向这两个部分的链接是一个更好的选择（它默认获得navigation个角色。）

它允许用户跳转（或跳过）特定部分。

所以你的例子看起来像：

<header>
  <h1>My Name</h1>
</header>

<nav>
  <ul>
    <li><a href="#writing">Writing</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

<main>

  <section id="writing">
    <h2>Writing</h2>
    <!-- hundreds of links -->
   </section>

   <section id="about">
     <h2>About</h2>
   </section>

</main>

（请注意，如果使用非默认值，则should仅使用role属性（对于WAI-ARIA）。所以我将其从main元素中删除了，因为它默认情况下具有main角色。）

如何标记页面的可访问性部分？

3 个答案:

标题

节

超链接