使用地标让您的网站更适合屏幕阅读器

2020-09-15 08:00:00 · 飞浪

在本指南中，您将了解如何使用 ARIA Landmarks 将网页结构传达给屏幕阅读器等辅助技术。

介绍

现代网站设计越来越复杂，除了主要内容本身外，还有多个窗格、页眉、页脚。视力正常的用户可以依靠阴影、边框和间距等视觉惯例轻松浏览这些复杂的设计。视力受损或失明的用户依靠屏幕阅读器和键盘导航来快速发现网页上的内容。但是，只有网页包含适当的标记时，屏幕阅读器才能促进这种用户体验。

在本指南中，您将了解如何有效而简洁地使用ARIA 地标，将网页结构传达给屏幕阅读器等辅助技术。屏幕阅读器有热键可以循环显示页面上的不同地标，因此将它们精心放置在网页中可以大大改善网站的用户体验。在本指南中，我们将以博客为例，说明如何使用不同的地标角色。我们将首先介绍最常用的地标角色，然后将它们全部放在 HTML 文档大纲中。

主要里程碑角色

当用户导航到您博客上的网页时（可能是通过 Google 搜索结果的推荐），他们可能想要阅读博客文章本身。但是，出于品牌和一致性的目的，您可能会在页面的主要内容之前显示标题、导航链接、侧边栏，甚至可能是头像。您不想强迫屏幕阅读器用户在找到文章之前先浏览所有这些内容。博客所有页面上重复的内容应在结构上与主要内容（即文章本身）区分开来。这是主要地标角色的预期用途 - 它指示代表博客文章的页面部分。

主要地标角色由<main /> HTML 5 语义标签标识。

导航地标角色

当用户读完您博客上的第一篇文章后，他们可能会好奇您的博客还包含哪些其他有趣的文章。导航角色用于标识一组链接。此地标可以嵌套在另一个地标内。您的博客可以按以下方式使用导航地标：

标识某个部分是面包屑，以便用户可以检查他们处于层次结构的哪个部分并向上导航
突出显示博客标题中的一组链接，例如“热门文章”、“关于我”和“存档”

导航角色由<nav /> HTML 5 语义标签标识。

补充性地标作用

您的博客可能还包含以下支持内容：

允许用户评论和喜欢或不喜欢特定文章的页面操作
相关文章链接列表

这两个部分是互补内容的示例，在 HTML 中可以通过<aside /> HTML 5 语义标签进行识别。这些部分支持博客文章，但不是主要内容本身。

使用页面中的 HTML 语义元素来识别地标

使用 HTML 语义标签可以轻松使用 ARIA 地标。下面的代码片段演示了如何在博客的 HTML 中使用上面讨论的<main />、<aside />和<nav />地标。

      <body>
  <nav>
    <ul>
      <li><a href="/top-articles">Top Articles</a></li>
      <li><a href="/about-me">About me</a></li>
      <li><a href="/archive">Archive</a></li>
    </ul>
  </nav>
  <main>
    <h1>Using Landmarks to Make Your Website Screen Reader-Friendly</h1>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </main>
  <aside aria-label="related articles">
    <ul>
       ....
    </ul>
  </aside>
  <aside aria-label="page actions">
    <h2>Is this article helpful?</h2>
    <button aria-label="up vote" onClick="upVote()">+</button>
    <button aria-label="down vote" onClick="downVote()">-</button>
  </aside>
</body>
    

请注意，有两个<aside /> HTML 标签。为了帮助屏幕阅读器用户快速区分这两个地标，您还可以添加aria-label来命名这些部分。当它们被标记时，屏幕阅读器NVDA将大声朗读：

      complementary landmark page actions

结论

在本指南中，您了解了主要、补充和导航地标。这些是大多数网页设计应使用的主要地标。添加适当的 HTML 语义标签可将网页结构传达给辅助技术。

最后要说的是，你应该记住：

< main />和<nav />标签是您可以添加的最重要的导航角色。
避免过多嵌套地标。应仅有一个<main />标签，并且不应嵌套在另一个地标中。
慎重使用地标。如果您的网站有超过 10 个地标，您可能需要重新考虑网站的设计。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

使用地标让您的网站更适合屏幕阅读器

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

<body> <nav> <ul> <li><a href="/top-articles">Top Articles</a></li> <li><a href="/about-me">About me</a></li> <li><a href="/archive">Archive</a></li> </ul> </nav> <main> <h1>Using Landmarks to Make Your Website Screen Reader-Friendly</h1> <p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p> </main> <aside aria-label="related articles"> <ul> .... </ul> </aside> <aside aria-label="page actions"> <h2>Is this article helpful?</h2> <button aria-label="up vote" onClick="upVote()">+</button> <button aria-label="down vote" onClick="downVote()">-</button> </aside> </body>