如果不是最近看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