为视觉障碍者的图像添加文本替代
在其他挑战中,您可能已经看到标签alt
上的属性img
。Alt
文本描述了图像的内容,并为其提供了替代文本。这在图像无法加载或用户看不到的情况下有帮助。搜索引擎还使用它来了解图像包含的内容,以将其包含在搜索结果中。这是一个例子:
<img src="importantLogo.jpeg" alt="Company logo">
视障人士依靠屏幕阅读器将Web内容转换为音频界面。如果仅以视觉方式呈现,他们将不会获得信息。对于图像,屏幕阅读器可以访问alt属性并读取其内容以传递关键信息。
好的alt文字为读者提供了对图像的简短描述。您应该始终alt在图像上包含属性。根据HTML5规范,现在认为这是强制性的。
知道何时应将替代文本留空
有时图像会与已经描述它们的标题分组在一起,或者仅用于装饰。在这些情况下,alt文本可能显得多余或不必要。
在图像已经用文本内容解释或未在页面中添加含义的情况下,img仍然需要一个alt属性,但可以将其设置为空字符串。
这是一个例子:
<img src="visualDecoration.jpeg" alt="">