为了让屏幕阅读器向用户呈现语音界面,有意义的是 元素必须具有适当的标签或替代文本。标签或文本 备用选项会为元素提供可访问的 name,这是关键属性之一 用于在无障碍树中表达元素语义。
将元素的名称与元素的 role 结合使用后, 用户情境,以便他们了解自己正在互动的元素类型 及其在页面上的呈现方式如果名称不存在,则 屏幕阅读器只会读出元素的角色。想象一下 浏览网页时听到“按钮”或复选框“图片”无需额外付费 上下文。正因如此,标签和替代文本对实现优质、 无障碍体验
检查元素的名称
使用 Chrome 的开发者工具可以轻松检查元素的可访问名称:
- 右键点击相应元素,然后选择检查。系统随即会打开开发者工具 元素面板。
- 在“元素”面板中,查找无障碍窗格。它可能被隐藏了
位于
»
符号后面。 - 在计算属性下拉列表中,查找名称属性。
![](https://web.developers.google.cn/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu.png?authuser=9&hl=hr)
无论您是查看包含 alt
文本的 img
,还是包含input
label
,所有这些场景的结果都是相同的:给出一个
元素的名称。
检查名称是否缺失
您可以通过多种方式为元素添加无障碍名称, 具体取决于其类型下表列出了最常见的元素类型 以及添加方法说明的链接。
元素类型 | 如何添加名称 |
---|---|
HTML 文档 | 为文档和框架加标签 |
<frame> 或 <iframe> 元素
|
为文档和框架加标签 |
图片元素 | <ph type="x-smartling-placeholder"></ph> 为图片和对象添加替代文本 |
<input type="image"> 个元素
|
<ph type="x-smartling-placeholder"></ph> 为图片和对象添加替代文本 |
<object> 个元素
|
<ph type="x-smartling-placeholder"></ph> 为图片和对象添加替代文本 |
按钮 | 标签按钮和链接 |
链接 | 标签按钮和链接 |
表单元素 | 标签表单元素 |
为文档和框架加标签
每个网页都应该有一个
title
元素,用于简要说明网页的主题。title
元素提供
该页面的无障碍名称。当屏幕阅读器进入页面时,这是
播放的文本。
例如,以下网页的标题为“小丽的枫木棒快速烘焙食谱”:
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
同样,任何 frame
或 iframe
元素都应具有 title
属性:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
虽然 iframe
的内容可能包含自己的内部 title
元素,但
屏幕阅读器通常会在帧边界处停止,并读出元素
角色(“frame”)及其可访问名称(由 title
属性提供)。这个
允许用户决定是否要进入帧或绕过帧。
为图片和对象添加替代文本
img
应始终附带
alt
属性为图片指定无障碍名称。如果图片加载失败,
使用 alt
文本作为占位符,以便用户了解图片内容
撰写优质的 alt
文本算是一门艺术,但仍需遵循一些准则
您可以遵循:
- 确定图片是否提供了难以使用的内容 都能通过阅读周围的文字获得的好处
- 如果是,请尽可能简明扼要地说明内容。
如果图片只是装饰,但没有提供任何有用内容,
您可以为其提供一个空的 alt=""
属性,以将其从无障碍功能中移除
树。
将图片作为链接和输入内容
封装在链接中的图片应使用 img
的 alt
属性来描述
用户点击链接后会转到的页面:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
同样,如果使用 <input type="image">
元素创建图片,
它应包含 alt
文本,用于描述
用户点击该按钮时:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
嵌入的对象
<object>
元素,通常用于 Flash、PDF 或
ActiveX 还应包含替代文本。与图片类似,此文本
替代文本位于
object
元素采用常规文本格式,例如“年度报告”如下:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
标签按钮和链接
按钮和链接往往对网站的体验起到至关重要的作用, 务必要确保两者都使用方便易用的名称
按钮
button
元素始终会尝试使用其
文本内容。对于不属于 form
的按钮,请写出
因为您可能只需输入文字内容,就可以创建良好的无障碍体验
名称。
<button>Book Room</button>
图标按钮是此规则的一个常见例外情况。图标按钮可以使用 图片或图标字体来为按钮提供文本内容。例如: 使用“所见即所得”(WYSIWYG) 编辑器中使用的按钮来设置 文本通常只是图形符号:
使用图标按钮时,为按钮提供明确的
使用 aria-label
属性指定无障碍名称。aria-label
会替换任意值
按钮内的文字内容,让您清楚地描述要执行的操作,
任何使用屏幕阅读器的人都能使用
<button aria-label="Left align"></button>
链接
与按钮类似,链接主要通过文本获取无障碍名称 内容。在创建链接时,一个小技巧是在链接中 ,而不是像“这样”这样的填充词或“阅读 更多。”
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
这对于提供快捷方式列出所有 网页上的链接。如果链接中充满重复的填充文字,这些 会变得不那么实用:
<ph type="x-smartling-placeholder">![“旁白”的链接菜单中填充了“此处”一词。](https://web.developers.google.cn/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74.jpg?authuser=9&hl=hr)
标签表单元素
将标签与表单元素(例如复选框)相关联有两种方法。 这两种方法都会使标签文字也成为以下广告的点击目标: 复选框,这对鼠标或触摸屏用户也很有帮助。要关联 带有元素的标签,可以是:
- 将 input 元素置于标签元素内
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- 或者使用标签的
for
属性并引用元素的id
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
正确标记复选框后,屏幕阅读器可以报告 该元素的作用是复选框,处于选中状态,名为“接收 促销优惠?”如下面的 VoiceOver 示例所示:
![显示“接收促销优惠?”的 VoiceOver 文本输出](https://web.developers.google.cn/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326.png?authuser=9&hl=hr)
TODO:DevSite - 思考并检查评估