共计 1959 个字符，预计需要花费 5 分钟才能阅读完成。
如果不是最近看 Microsoft 的文档，我甚至都没有留意过超链接的几种设置存在的区别，更不会知道ARIA 属性。以下就做简单分享。
链接文本
超链接是浏览 Web 的核心。确保屏幕阅读器正确读取链接有助于所有用户浏览你的网站。
思考一下以下示例文本中的两个链接：
“小企鹅有时又称神仙企鹅，是世界上体型最小的企鹅。详情请单击此处。”
“小企鹅有时又称神仙企鹅，是世界上体型最小的企鹅。详情请访问 https://en.wikipedia.org/wiki/Little_penguin。”
说明
这两个示例展示了 Web 开发者在设置超链接时不应该进行操作。
尽管这些链接对于健视用户而言可能很正常，但在屏幕阅读器上，它们将不会按预期方式运作。屏幕阅读器会读取文本。如果文本中出现 URL，屏幕阅读器将会读取 URL。而该 URL 不会传达有意义的信息，并且听起来可能还会令人生厌。如果你的手机曾经朗读过包含 URL 的短信，你可能已经遇到过这一问题。
屏幕阅读器还能只读取页面上的超链接，就像视力正常的用户扫读页面中的链接时一样。如果链接文本始终为“单击此处”，所有用户都将反复听到“单击此处…”此时所有链接都将变得无法区分，让人甚感沮丧。
“单击”一词也存在问题，因为并非所有用户都会选择单击。电话用户会按电话键，键盘用户可能会按 Enter 键或空格键，其他客户端则会使用其他方法。
我们需要一律使用有意义的链接文本。有意义的链接文本会简要说明链接另一端的内容。在上述小企鹅示例中，示例中的链接将转到有关该物种介绍的维基百科页面。“小企鹅”一词就是完美的链接文本，因为它能向用户清楚表明选择链接后将能了解到的内容：
“小企鹅有时又称神仙企鹅，是世界上体型最小的企鹅。”
说明
确保所有用户都能访问网站还会带来额外好处，即有助于 搜索引擎 浏览你的网站。搜索引擎使用链接文本了解页面的主题。因此，使用有意义的链接文本对每个人都有帮助！
ARIA 属性
设想以下产品页：
| 产品 | 说明 | 顺序 |
|---|---|---|
| 小组件 | [Description]('#') |
[Order]('#') |
| 超级小组件 | [Description]('#') |
[Order]('#') |
这是页面的常见布局，其中会显示表中各项的相关信息，以及指向说明和顺序的链接。对于浏览器用户而言，复制说明文本和顺序很有意义。但屏幕阅读器用户只会反复听到“说明”和“顺序”这两个词，而且没有任何上下文。
为了满足这些场景类型的需求，HTML 现支持一组名为 Accessible Rich Internet Applications (ARIA) 的属性。你可以使用这些属性为屏幕阅读器提供详细信息。
例如，当页面格式不允许时，可以使用 aria-label 来描述链接。“小组件”的描述可能设置为：
|
1
|
<a href=“#” aria–label=“Widget description”>description</a>
|
除了添加文本以便屏幕阅读器读取链接之外，ARIA 还具有许多其他用途。它可用于描述某些元素在语义 HTML 不可用时所扮演的角色。例如，在创建树时，可以使用 ARIA 角色来向屏幕阅读器描述界面：
|
1
2
3
4
|
<h2 id=“tree-label”>File Viewer</h2>
<div role=“tree” aria–labelledby=“tree-label”>
<div role=“treeitem” aria–expanded=“false” tabindex=“0”>Uploads</div>
</div>
|
重要
如前文所述，使用语义标记和有意义的链接文本通常可取代 ARIA。浏览器和屏幕阅读器不是用户可能会唯一使用的客户端，因此设计能够有效适用所有客户端和用户的页面应是你的主要目标。
图像的替换文本
一般而言，屏幕阅读器无法读取图像的内容。尽管有些用户可能会使用人工智能，但生成的结果在特定上下文中可能并不准确。幸运的是，确保用户可以访问图像并不费力，这也就是 alt 属性的全部意义所在。所有有意义的图像都应借助 alt 属性（俗称“替换文本”）描述自身或其试图传达的信息。
纯修饰图像的 alt 属性应设置为空字符串：alt=””。此设置可防止屏幕阅读器不必要地讲述修饰性图像。
说明
正如你所料，搜索引擎无法理解图像中的内容，而需依赖替换文本。再次强调下，确保页面可供访问会带来多种好处！
