css 应用和辅助功能

为视觉障碍者的图像添加文本替代

在其他挑战中,您可能已经看到标签alt上的属性imgAlt文本描述了图像的内容,并为其提供了替代文本。这在图像无法加载或用户看不到的情况下有帮助。搜索引擎还使用它来了解图像包含的内容,以将其包含在搜索结果中。这是一个例子:

<img src="importantLogo.jpeg" alt="Company logo">

视障人士依靠屏幕阅读器将Web内容转换为音频界面。如果仅以视觉方式呈现,他们将不会获得信息。对于图像,屏幕阅读器可以访问alt属性并读取其内容以传递关键信息。

好的alt文字为读者提供了对图像的简短描述。您应该始终alt在图像上包含属性。根据HTML5规范,现在认为这是强制性的。

知道何时应将替代文本留空

有时图像会与已经描述它们的标题分组在一起,或者仅用于装饰。在这些情况下,alt文本可能显得多余或不必要。

在图像已经用文本内容解释或未在页面中添加含义的情况下,img仍然需要一个alt属性,但可以将其设置为空字符串。
这是一个例子:

<img src="visualDecoration.jpeg" alt="">

使用标题显示内容的层次关系

css 应用和辅助功能

上一篇:Web开发(F12调试)


下一篇:js_Function对象详解 (创建方式、调用)