学习WCAG 1.1:替代文本

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

第一WCAG指导方针,替代文本,是可感知原则的一部分。该指引状态

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

可选文字对于图片

在替代文本指引最著名的应用是在开发商提供的图像替代文本。

如果图像是纯粹的装饰,丰富多彩的边界,或许,也没有必要提供备用说明,如屏幕阅读器用户不从具有图像描述中受益。

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

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

请看下面的图片:

不要太短暂

“小猫”

这说明不是特别丰富。小猫戴着一个可爱的毛衣,毕竟。

没有的东西你的描述充满关键字

“小猫kitty可爱毛衣星可爱照片可爱的小猫甜猫猫活泼”

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

请提供有用的细节

“小猫灰色条纹毛皮穿着淡紫色毛衣用金星”

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

复杂的图像和图表

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

例如,示出的一个代码段的图像将是很难有效地描述。相反,使用的组合<代码>

和<代码><代码>元素来标记你的HTML代码示例。

当谈到描述图表,你可能能够传达使用最重要的细节<代码>ALT属性。在中一篇题为写替代文字数据可视化艾米Cesal提出了下面的例子:

Cesal表明,张贴在纽约时报的文章这个图表时如何减少枪击事件在社交媒体上,包括一个链接到文章和写以下替代文本:

ALT =“每10万人,其中美国的谋杀率比加拿大更糟糕的6倍枪谋杀的条形图和30次澳大利亚”

如果图表图像是一个alt描述过于复杂,创建一个表来描述图表可能是必要的。看到桌视觉障碍的用户在Mozilla对HTML表格先进的功能和可访问性的文章。

CAPTCHA

许多网站使用CAPTCHAS试图人类与机器人之间的区别。不幸的是,许多这些方法都是无法访问。

变形文字

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

如果没有一个alt描述,然而,这种方法是无法访问盲人用户。提供了一个alt描述允许机器人识别的文本。

图像识别

另一种常见的CAPTCHA图案要求用户识别图像的图像,或部件,匹配特定词。

这些也同样无法进入盲人用户,并可能会阻碍色盲用户和那些有认知困难。

音频CAPTCHA

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

逻辑难题

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

拼图像这些可能会阻碍用户使用的语言,学习,或认知障碍。

如果CAPTCHA不是特别必要到您的网站或应用程序,考虑去没有它。如果人类与机器人之间的区分是必要的,考虑谷歌的验证码,其中在写这篇文章的具有最长无障碍的考虑名单任何CAPTCHA服务。

发表评论

想了解更多关于Design?

设计是指视觉,交互流动,线框,品牌,等等。了解如何使用好设计,以提高你的网站,移动应用或业务。

学到更多