学习WCAG 1.1:文本替代

安瓦尔Montasir(他/他)
写到2020年10月6日,

第一份WCAG指南,文本的替代品,是可感知原则的一部分。指导国家

规定任何非文本内容替代文本,以便它可以转换成其他形式的人的需要,如大字体,盲文,语音,符号或简单的语言。

图像的替代文本

文本替代指南最著名的应用是开发人员为图像提供替代文本。

如果图像是纯装饰的——也许是彩色边框——就没有必要提供替代描述,因为屏幕阅读器用户不会从描述图像中获益。

对于包含有意义内容的图像,保持替代文本简短但具有描述性。引用Mozilla的图像替换文本,

如果你可以闭上眼睛,已经有人读alt文本你,想象中的形象相当准确的版本,你在正确的轨道上。

考虑以下图像:

不要太简短

< img src = " kitten.jpg " alt = "小猫" >

这种描述并不是特别有用。毕竟,这只小猫穿着一件可爱的毛衣。

不要用关键词填充你的描述

小猫小猫可爱的毛衣明星可爱的照片最可爱的小猫甜猫猫活泼的

这是一个搜索引擎关键词列表,而不是一个有意义的描述。

提供有用的细节

灰色条纹皮毛的小猫,穿着淡紫色金色星星毛衣

现在用户可以想象我们的小猫照片的一个相当准确的版本。

复杂图像和图表

有些图片是比别人更容易来形容。如果你发现自己挣扎着拿出一个描述,考虑是否有呈现内容更有效的方式。

例如,显示代码片段的图像很难有效地描述。相反,使用的组合<代码>< >之前和<代码><代码>元素,以在HTML中标记代码示例。

当描述图表时,您可以使用<代码>alt属性。在一篇题为写替代文字数据可视化艾米Cesal提出了下面的例子:

塞萨尔在发布纽约时报文章中的图表时表示如何减少枪击在社交媒体上添加文章链接,并写出以下alt文本:

alt="每10万人中枪支谋杀案的条形图,美国的谋杀率是加拿大的6倍,是澳大利亚的30倍"

如果图表图像太复杂,无法用alt描述,则可能需要创建一个表格来描述图表。看到为视障用户提供的表在Mozilla关于HTML表高级特性和可访问性的文章中。

CAPTCHA

许多网站使用验证码来区分人与机器人。不幸的是,其中许多方法是不可访问的。

扭曲的文本

最常见的验证码方法包括识别扭曲的文本字符。

但是,如果没有alt描述,盲人用户就无法使用这种方法。提供alt描述允许机器人识别文本。

识别图片

另一种常见的验证码模式要求用户识别图像或图像的一部分,以匹配特定的单词。

同样,盲人也无法接触到这些信息,这可能会让色盲用户和有认知困难的人感到沮丧。

音频验证码

语音CAPTCHA涉及到要求用户识别口语单词或短语,但这些都无法访问聋哑用户和用户提供听觉处理障碍。并明确说出的词或短语可以由机器人来识别。

逻辑难题

一些验证码要求用户解决一个逻辑难题,比如一个数学公式。

像这样的谜题会让使用者在语言、学习或认知上有障碍。

如果验证码对你的网站或应用程序不是特别必要,考虑不用它。如果区分人类和机器人是必要的,考虑谷歌reCAPTCHA,是迄今为止这篇文章中最长的可访问性考虑事项列表任何验证码服务。

发表评论

想了解更多关于Design?

设计指的是视觉效果、交互流程、线框图、品牌等等。学习如何使用好的设计来增强你的网站,手机应用程序,或业务。

了解更多