如果不是最近看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=””。 此设置可防止屏幕阅读器不必要地讲述修饰性图像。
说明
正如你所料，搜索引擎无法理解图像中的内容， 而需依赖替换文本。 再次强调下，确保页面可供访问会带来多种好处！
原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/11582
微信扫一扫 
支付宝扫一扫 