收益:
- 能够在人工智能支持下控制和改进颜色对比度、替代文本、键盘访问和 WCAG 标准
- 能够使用人工智能生成和验证可访问性文本,例如屏幕阅读器体验、替代文本和表单标签
- 了解通过真正的辅助技术和用户测试来验证人工智能的可访问性建议的局限性
可访问性(简称a11y)是指产品可供所有人(包括残障人士)使用的能力:视障用户可以使用屏幕阅读器(将文本转换为语音的辅助软件)进行导航,有运动障碍的人可以使用键盘执行任何操作,色盲者可以不依赖颜色来接收信息。包容性设计更广泛:它将人类多样性置于设计的中心,包括年龄、语言、文化、暂时残疾(断臂)或情境残疾(阳光下的屏幕)。在大多数国家,无障碍并不是“额外的”,而是一项基本责任和法律要求。 AI是该领域强大的预筛选器和草稿生成器;但真正的可访问性只有通过实际的辅助技术和用户测试才能证实。
WCAG 和关键控制领域
WCAG(网页内容无障碍指南)是一套国际公认的无障碍标准;一般以AA级为目标。它有四个原则:内容必须是可感知的、界面必须是可用的、信息必须是可理解的和技术上可靠的。实践中最常见的控制领域是:
- 颜色对比度:文本和背景之间的差异是否足够? (对于 AA,普通文本中的比例至少为 4.5:1。)
- 替代文本(alt text):图像是否有等效文本可以向屏幕阅读器解释它们?
- 键盘访问:没有鼠标还能做什么吗?焦点顺序有意义吗?
- 仅颜色信息:诸如“填写红色字段”之类的短语排除了色盲用户。
- 表单标签:每个输入字段是否都有屏幕阅读器可以读取的标签?
- 触摸目标:按钮是否足够大,可以用手指舒适地按下?
人工智能可以在其中许多领域进行快速初步扫描:您可以给出一些文本并询问“对比度是否足够?”,给出图像描述并询问“建议替代文本”,给出界面描述并询问“键盘访问问题是什么”。
注意:仅仅因为人工智能说“它看起来可以访问”并不能保证可访问性。自动检查仅捕获部分 WCAG 错误;其余的将在实际使用中出现。
替代文本:优秀替代文本的秘密
替代文本会为视障用户替换图像。好的替代文本传达图像的功能和含义,而不是其装饰细节。 “添加到购物车”图标的替代文本应该是“添加到购物车”而不是“购物车图像”,因为这是对用户很重要的操作。人工智能擅长生成潜台词大纲,但由于它不了解上下文,因此可能会生成过度描述性或不相关的文本。你问每个替代文本“为什么这张图片在这里?”带着问题裁剪。
视觉的
弱潜台词
强烈的潜台词
购物车图标(按钮)
“购物车图标,灰色”
“添加到购物车”
产品照片
“图片”
“蓝色冬衣,正面图”
装饰线
《饰品线》
(留空——装饰)
图形
“图形图像”
“2024年销售额:每个季度都增长”
包容性语言和范围
可访问性不仅限于技术控制;语言也具有包容性。假设性别(“用户和他/她的配偶”)、根据能力排除(“一眼”、“容易听到”)或包含文化假设的文本将排除某些用户。 AI可以从这个角度扫描文本,但你必须确保它所建议的“中性”语言保持自然且易于理解;过度校正会使文本变得尴尬。
三个迷你箱子
案例 1 — 尽早发现对比错误。一个团队使用 AI 扫描了 20 个屏幕的文本颜色,并确定有 7 个地方的对比度低于 AA 阈值。修正是在没有进入开发的情况下进行的;避免了后续纠正的成本。但团队仍然没有跳过实际的屏幕阅读器测试。
案例 2 — 仅更正了与颜色相关的信息。一种表单仅显示带有红色边框的错误字段。 AI 标记了这一点;该团队还为每个错误添加了文本和图标。色盲用户现在可以看到该错误。教训:仅靠颜色无法传达信息。
案例 3——人工智能误导审批。一位设计师跳过了屏幕阅读器测试,因为他称人工智能“易于访问”。在实际测试中,结果发现焦点顺序混乱,有些按钮根本没有被读取。教训:自动确认是开始;实际的辅助技术测试是强制性的。
可复制的提示
预先扫描此界面描述以了解可访问性:1)是否有仅基于颜色携带的信息?2)是否有每个可点击元素的文本标签?3)是否有任何无法通过键盘访问的元素?4)焦点顺序是否有意义?列出每个问题和建议。添加注释“需要真实测试”。配方:<<文本>>
建议这些图像的替代文本。规则:传达图像的功能/含义,而不是装饰细节。编写按钮图标的操作。对于装饰图像,请说“替代文本应留空”。上下文和图像描述:<<列表>>
检查这些文本中的包容性语言:是否存在性别假设、基于能力的排斥性语言(例如“看到”、“听到”)、文化假设?建议保持自然的替代方案;不要矫枉过正。文本:<<列表>>
为此表单编写可访问的错误和标签文本:每个字段的可见标签、屏幕阅读器的说明以及描述错误的消息,无论颜色如何(文本 + 图标)。语音和语气:<<卡片>>表单字段:<<列表>>
弱提示/强提示
弱:“为此图像编写替代文本。”
结果是:“图像”或过于描述性的文本而忽略了功能。
强:“为这些图像建议替代文本;传达图像的功能/含义;为按钮图标编写操作;将装饰性图标标记为‘必须留空’。”
结果是:上下文相关、功能导向、准确的潜台词。
区别:强烈的提示带来功能焦点+按钮约定+装饰区别。
常见错误
- 误将人工智能认可视为可访问性的保证。它不能替代实际测试。
- 只是将信息加载到颜色中。色盲用户会错过信息。
- 在替代文本中解释图像,而不是功能。必须为按钮图标编写一个操作。
- 把可访问性留到最后。如果在线框图阶段不开始,后期修补的成本将会很高。
- 语言矫枉过正。失去自然性的包容性语言也会损害可理解性。
综上所述
可访问性意味着每个人都可以使用该产品;它不是额外的,而是必不可少的,并且在大多数地方,这是一项法律责任。人工智能作为快速预检和草稿生成器非常有价值,可用于对比度、替代文本、键盘访问和包容性语言扫描。但自动批准只能捕获部分 WCAG 错误;实际的可访问性是通过屏幕阅读器和真正的辅助技术用户进行测试来确认的。使用模型作为前端浏览器,从实际测试中得到证明。
应用任务
- 在第一次提示时预扫描界面描述以实现可访问性。
- 仅更正基于颜色的信息或未标记的项目。
- 使用第二个提示为屏幕上的视觉效果生成面向功能的替代文本。
- 使用第三个提示检查您的文本是否包含包容性语言。
- 如果可能,请尝试使用屏幕阅读器进行实际测试,并记下自动扫描遗漏的内容。
清单
- [ ] 我预先扫描了对比度、键盘访问和标签。
- [ ] 我没有仅仅根据颜色留下信息。
- [ ] 我以功能性的方式编写了潜台词,而将装饰性的潜台词留空。
- [ ] 我做了包容性的语言控制,我保留了自然性。
- [ ] 我不认为自动批准是可访问性的保证。
- [ ] 我计划/实施了实际的辅助技术测试。