如何让你的网页链接适合屏幕阅读器
介绍
链接是网络上无处不在的一部分。重要的是，它们要易于所有人使用，包括屏幕阅读器用户。
在本指南中，您将了解Web 内容可访问性指南以及如何应用这些指南，以使您的网站链接对屏幕阅读器来说更加友好。它还将提供应用链接的三个原则的具体建议：它们应该是可感知的、可理解的和可操作的。
让你的链接可感知
屏幕阅读器主要通过两种方式向用户提供反馈：蜂鸣声和语音输出。蜂鸣声仅用于特定事件，例如进入文本输入模式，通常不用于浏览网页链接。因此，文本是屏幕阅读器用户获取有关他们正在浏览哪个页面以及链接可能将他们带到哪里的反馈的主要方式。
有时您可能希望将链接显示为图标。要使此屏幕阅读器可导航，您必须在锚标记内添加一些内部文本。
<a href="/">
<i class="fas fa-home" aria-hidden="true"></i>
<span class="sr-only">Home</span>
</a>
当屏幕阅读器用户聚焦于链接时，屏幕阅读器将读出链接主页。这告知用户他们遇到的链接元素名称是“主页”；这些信息足以推断激活链接将把用户带到哪里。
让你的链接易于理解
为链接添加有用的标签并且不要使用裸链接也很重要。当屏幕阅读器遇到链接时，它会向用户读出链接文本；如果链接文本是 URL，即裸链接，则用户将听到一连串难以理解的符号。
以下是裸链接的示例。
<a href="https://my-blog.com/top-articles">https://my-blog.com/top-articles</a>
上述链接的友好版本：
<a href="https://my-blog.com/top-articles">top articles</a>
链接文本应该告诉用户，如果他们激活链接，他们会被带到哪里。“点击此处”和“此链接”可以改进。“热门文章”是一个更好的例子，因为用户可以推断出链接背后的内容。
使您的链接键盘可操作
在大型网站上，页面上可能有 100 多个可交互元素。用户了解网站的一种方法是查看导航菜单以查看他们可以找到哪些信息。虽然视力正常的用户可以依靠边距、阴影和颜色等视觉元素来找到此导航菜单，但屏幕阅读器用户将依靠地标来执行相同的操作。
如果没有地标，用户将被迫按几十次Tab 键来循环浏览页面上的每个可交互元素，包括表单字段、搜索框、链接、菜单等。这无疑是一种糟糕的用户体验。好消息是，使用<nav />语义 HTML 标签创建导航地标很简单。如下所示：
<nav>
<ul>
<li>
<a href="/top-articles">Top Articles</a>
</li>
<li>
<a href="/hire-me">Hire Me</a>
</li>
<li>
<a href="/support">Support the Blog</a>
</li>
<li>
</ul>
</nav>
屏幕阅读器将识别页面上的所有地标。用户可以循环浏览所有地标，只需按几下键即可轻松找到此导航菜单。另请注意，链接包裹在<ul />和<li /> HTML 标签中。这些标签可帮助屏幕阅读器用户了解列表中有多少个项目，在列表中前后导航，并轻松跳到菜单末尾。
结论
本指南提供了有关如何使您的网络链接键盘可供屏幕阅读器用户操作、理解和感知的建议。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~