让您的网站列表适合屏幕阅读器
介绍
确保您的网站可以使用屏幕阅读器，这对于扩大网站和品牌的影响力至关重要。如果您的网站遵循Web 内容可访问性指南，它将为失明或视力受损的用户提供愉快的用户体验，而不是让他们无法使用。
本指南将解释屏幕阅读器用户在使用列表时面临的具体挑战。然后，我们将介绍一些简单的更改，这些更改可以让网络开发人员实现这些更改，从而为有可访问性要求的用户带来巨大改变。本指南将以一个包含博客文章列表的博客为例。
了解屏幕阅读器用户如何访问 Web 内容
用户可以通过以下几种方式与博客互动：
- 从页面任意位置跳转到博客文章列表
- 了解列表中有多少帖子
- 阅读每篇博文的标签
- 跳至列表末尾
视力正常的用户可以依靠边距和颜色等视觉标记来帮助他们轻松浏览内容并执行上述交互。相比之下，屏幕阅读器用户则依靠键盘快捷键在页面中导航（有时在移动设备上使用滑动手势）。这只有在页面标记正确以允许屏幕阅读器解析它们时才有可能。
正确标记 HTML 文档
好消息是，如上所述标记列表既简洁又简单。HTML 提供了两个主要列表标记：<ul />和<ol />。从屏幕阅读器的角度来看，它们都是语义列表，仅在其默认的list-style css 属性上有所不同。默认情况下，<ul />将在列表项前添加一个项目符号，而<ol />将在列表项前添加一个数字，当用户将焦点放在列表项上时，屏幕阅读器将读出该数字。
还有其他方法可以让屏幕阅读器识别您的列表，但不建议使用。其中一个例子是<dl />。它是另一种类型的列表，但并非所有屏幕阅读器都能理解其子标签的层次结构。第二种选择是将属性role="list"和role="listitem"添加到通用容器标签（如<div /> ），但这会使标记不必要地冗长，并且存在兼容性问题。
为了使博客文章列表易于访问，请关注两个要素：
- <ul />，无序列表容器
- <li />为列表项，应严格在<ol />或<ul />内使用。
以下是向博客 HTML 添加最新文章列表的摘录。
<h1>My awesome blog</h1>
<h2>Latest articles</h2>
<ul aria-label="latest articles">
<li>
<a href="/http-guide-part-1">A guide to http part 2</a>
<span>Published on December 19, 2020</span>
</li>
<li>
<a href="/http-guide-part-1">A guide to http part 1</a>
<span>Published on December 18, 2020</span>
</li>
</ul>
您可以看到有一个<ul />标签，其直接后代是<li />标签。
测试您的 Web 应用
反复按l可从页面的任何位置跳转到所需列表。焦点将跳转到页面上每个列表的第一个列表项。您应该听到以下文本被宣布。它也会出现于 NVDA 的语音查看器窗口中。
latest articles list with 2 items • A guide to http part 2 link Published on December 19, 2020
请注意，aria-label和列表项的数量已公布，这在页面元素之间快速跳转时非常有用。
测试转到下一个和上一个列表项
进入列表后，按i和shift+i导航到下一个和上一个列表项。
• A guide to http part 2 link Published on December 19, 2020
• A guide to http part 1 link Published on December 18, 2020
• A guide to http part 2 link Published on December 19, 2020
• A guide to http part 1 link Published on December 18, 2020
跳至列表末尾
进入列表后，您可以按,退出列表。如果列表标记不正确，用户将被迫连续按tab或ctrl+向下箭头才能到达列表末尾。当列表很长时，这会令人沮丧。
自定义日期语音输出
您可能需要以不同的方式显示日期以节省空间，例如，显示18.12.2020而不是December 18, 2020。如果您将 HTML 更改为
<li>
<a href="/http-guide-part-1">A guide to http part 1</a>
<span>Published on 18.12.2020</span>
</li>
NVDA 将逐字读出内容：
Published on one eight dot one two dot two zero two zero.
在这种情况下，您可以使用bootstrap 的 sr-only 类自定义屏幕阅读器的标签。
<li>
<a href="/http-guide-part-1">A guide to http part 1</a>
Published on <span aria-hidden="true">18.12.2020</span>
<span class="sr-only">December 18, 2020</span>
</li>
该技术允许更新视觉文本而不影响屏幕阅读器所读的内容。
结论
本指南表明，让网页列表屏幕阅读器易于访问可以简单而简洁。有时需要对屏幕阅读器进行细微调整，因此测试您的内容是否适合所有用户使用非常重要。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~