万博体育官网网址 Images

大多数人都知道您需要为图像提供替代文本有更多的可访问性不仅仅是其形象ALT文本有许多额外的可访问性原则和技术对图像。

重要

另见我们的article on alternative text有关图像替代和长描述的其他信息。

图像可以增强理解力

有些人错误地认为图像对可访问性不利,因为ALTtext本质上用该图像的纯文本版本替换图像认为是文本的逻辑扩展网站是理想的可访问性然而,这种逻辑的问题在于它基于只有一种残疾的人的需求:失明这些和其他障碍,或者没有障碍,可以受益于图像在屏幕阅读器用户提供替代文本。

插图,地图等

通过添加插图,地图,图表等,可以更有效地传达许多概念想象一下,尝试从没有插图的书籍(或网站)学习人体解剖学How effective would it be? Here is an example of an illustration of the muscles in the hand.

医疗插图的肌肉的手

你可能很难想象,一个文本描述仅可能可以理解为文本加上插图在这种情况下,图片至少值10,000字插图、地图、图表等可以增强理解力,特别是对于有学习障碍或阅读障碍的人。

动画

动画很少用于增强Web内容的可访问性大多数时候他们只是令人讨厌,令人分心的横幅广告通常动画分散我们的注意力从一个web页面的主要目的。

然而,精心设计的动画可用于通过呈现媒体内容或通过关注重要内容来增强内容动画图形可以呈现一系列图像,这些图像传达不能充分呈现给一个静态图像的内容突出显示或其他动画可以使用户专注于重要信息,例如错误消息或所需输入如果你激活一个“文章内容”这个页面的顶部的链接,您会注意到,一个动画帮助提供视觉焦点到目标内容区域。

请注意

动画几乎总是应该用户控制要么持续时间很短持续动画的图像可能会导致页面的其余部分变得更加困难,或者对于具有高度分散注意力的用户而言,完全在万维网中。

WCAG 2.0成功标准2.2.2(A级)要求自动移动,眨眼,或滚动内容,持续时间超过5秒可以暂停,停止,由用户或隐藏。

图标

Internet Explorer中“后退”,“前进”,“停止加载页面”,“刷新页面”和“主页”的图标许多网页,尤其是Web应用程序使用图标来补充或替换文本复杂的内容和功能,比如在浏览器中单击家里图标去你的主页,可以很容易地通过一个非常小的图标图标需要简单,他们需要易于理解图标几乎总是需要熟悉才能有用跨文化和语言,图标可以很容易被误解。

如果您使用图标,请注意确保图标设计合理,易于理解并始终如一地使用在许多情况下,可能需要文本来代替或不包括不清楚或可能模糊的图标。

颜色和对比

与文本、颜色不能作为唯一的手段传达意义或内容What does it mean to convey meaning with color alone within images? Let's take a look at this map of the London Underground:

彩色编码的地下地铁路线地图。

一个能看到颜色的人可以毫不费力地区分红线,深蓝线,浅蓝线等等一个人不能看到颜色,由于色盲或低视力,可能会无法区分不同的路线Remember, some users may override your page colors to a high contrast color combination they require失明的人根本无法看到他们让我们从这张图片中取出颜色:

黑色和白色版本的彩色地图的地下线路

删除颜色后,地图几乎无法使用测试您的网页,确保没有失去的意思是当你删除的颜色,即使在图像您可以通过在黑白打印机上打印页面来完成此操作,确保将打印首选项设置为打印背景颜色也有一些工具,如Vischeck,这将删除所有的页面颜色或模拟色盲。

除了颜色依赖之外,传达文本的图像必须以足够的对比度呈现该文本如果图像质量低或图像放大,图像中的文本对比度尤为重要。

请注意

WCAG 2.0集文本和文本图像的最小对比度阈值对比试验值在图像可以更加困难(通常是没有定义的RGB颜色值很容易访问),但常识通常可以告诉你如果一个图像的对比度不足。

放大图像的像素

视力低下的一些用户使用程序,扩大的元素在他们的屏幕上,这样他们可以更容易地看到它们当图像放大,他们可以成为像素化,更难以阅读让我们来看一个例子:

像素化的图像,上面写着“大学”,但很难读懂

图形放大到500%正常大小您可以看到文本难以阅读如果真正的文本被使用,这将是更容易阅读,如以下示例:

大学

So does this mean you shouldn't use text in your graphics? Not necessarily, though true text should be used when practicable.

请注意

WCAG 2.0成功标准1.4.5(AA级)要求如果可以仅使用文本进行相同的视觉呈现,则不使用图像来呈现该文本使用真实文本而不是图像有很多好处(较低的带宽,平移,更容易创作等),但主要原因是真正的文本可以很容易地放大而不会出现任何像素化或图像质量下降值得注意的是,商标是免除WCAG要求。

幸运的是,现代浏览器在扩展图形内容方面比过去几年做得更好使用CSS(尤其是CSS3),可以更容易地设置真实文本的样式以实现所需的视觉呈现考虑图像中文本的可读性,如果可行,请使用真实文本。

导致癫痫发作的图形

重要

明亮、选通图像或媒体会导致photoepileptic发作癫痫发作可能是危险的,甚至危及生命不负责导致他们。

为了有可能引起用户与光敏性癫痫的发作,闪烁的图片或多媒体必须:

  1. 每秒闪烁超过3次(请注意,第508节规定每秒2次)。
  2. 是足够大的一个很小的闪烁的图像,如一个游标,不会导致癫痫发作。
  3. 亮必须有明显的对比闪光

此外,红色也更有可能引起癫痫发作虽然大而闪烁的图像在网络上并不常见然而,诱发癫痫发作的媒体在网络视频中变得越来越普遍,尤其是包括选通特殊效果的高清质量视频必须避免这种媒体!

请注意

WCAG 2.0成功标准2.3.1(A级)提供选通图像的频率,大小,对比度和颜色的阈值。