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

Question

我确定这是重复的，但我刚刚花了 15 分钟谷歌搜索、阅读 W3C 文档和大量无障碍网页，并且 none 更聪明，所以我觉得我们需要一个问题使用这些 Google 关键字 :)

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

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

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

</main>

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

上面的 HTML 屏幕 reader 是否足够容易导航？还是我应该使用额外的标签让屏幕 reader 更容易在需要时跳过？

Answer 1

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

我发现 this stack overflow link 对理解层次结构的基础知识很有帮助。

Answer 2

您正在使用标题标签 (h1, h2)，这对屏幕 readers 有很大帮助。跳转到不同的标题很容易。

地标也不错。您可以使用

Answer 3

您可以使用以下方法使 on-page 屏幕 reader 用户的导航更轻松：

标题

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

它允许用户从一个标题跳到另一个标题。

(您已经在使用了。)

栏目

在适当的地方使用分段元素（例如，section、article 等）。

默认情况下，它们具有 WAI-ARIA 区域映射。您的写作部分可能会获得 region role. Your About section might get the contentinfo 角色，但这取决于内容是否合适。

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

超级links

使用指向某些headings/sections.

的links (a)

根据页面内容，它可能是目录（类似于维基百科用于较长文章的内容），或者只是一个或多个跳过 link。在您的情况下，您可以提供一个 link 表示类似 "Jump to About section" 的内容，但如果您愿意提供菜单，默认情况下 nav element with links to both sections might be a better alternative (it gets the 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 only use the role attribute (for WAI-ARIA) if using a non-default value. So I removed it from the main element, as it has the main 角色。）

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

How do I label sections of my page for accessibility?

html

accessibility

标题

栏目

超级links