使用图像
有视觉障碍或其他认知障碍的人,如果没有文字的帮助,往往无法理解通过图像传达的信息。 妨碍可访问性的基于图像的内容包括图表、图形和其他非文本内容。
为了使图像的内容和目的易于理解,文本替代方案伴随着图像。 所有替代方案都需要与屏幕读取软件兼容。
Alternative text for images on web pages is provided via the alt attribute on the < img > and <input type="image"> tags. Always include the alt attribute on these tags.
避免在图像中嵌入文本. 某些用户无法读取嵌入的文本,也无法被屏幕阅读器软件识别。 当在图像上放置文本时,应该使用正确的HTML标记使其可见和可读,并使用适当的对比度以提高可读性。
指导方针
所使用的替代文本应遵循以下考虑:
- 如果图片是理解页面内容所必需的, equivalent information should be communicated as text using the
altattribute. - 如果图像是装饰性的 and not necessary for understanding the page content, the
altattribute should be empty (alt="").- 空属性告诉屏幕读取软件完全忽略图像。
- 如果图片被用在链接或按钮中, the alternative text should describe the link's destination or the button's purpose.
- 如果需要在图片上方添加文字, 使用适当的HTML标记在图像上方放置可读的文本,并通过适当的对比度提高可读性。 避免在图像中嵌入文本。
资源
好处
这些措施使视力有障碍的用户能够理解使用图像传达的信息,以及图像链接和控件的目的地或目的。
这些措施还会指示屏幕阅读软件忽略仅用于装饰的图像,从而使浏览内容变得更快、更容易。
最佳实践
- An alternative text attribute should accompany all
imgandinput[type="image"]elements. - 保持备选文本简洁,例如不超过10-15个单词。
- 在替代文本中包括在信息图像中出现的任何单词。
- 验证链接或控件的替代文本有助于形成链接文本和/或控件标签。
- 如果建议的替代文本会重复相邻的文本,则将图像视为装饰性的。
- Use an empty alt="" attribute for decorative images to indicate that it should not be announced.
检查正确用法
- 所有图像都需要有一个替代文本属性。
- 信息性图像的替代文本需要提供与图像相同的信息。
- Each decorative image should have an alternative text attribute with an empty string (alt="").
- 链接或按钮中使用的图像的替代文本必须描述链接的功能或目的地,即使在脱离上下文阅读时也是如此。
新葡京app