2.2 KiB
2.2 KiB
id | title | challengeType | videoUrl | guideUrl | localeTitle |
---|---|---|---|---|---|
587d774c367417b2b2512a9c | Add a Text Alternative to Images for Visually Impaired Accessibility | 0 | https://chinese.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility | 为视力受损的辅助功能添加图像替代文字 |
Description
img
标签的alt
属性。 Alt
文本描述图像的内容并提供文本替代。这有助于在图像无法加载或用户无法看到的情况下。它也被搜索引擎用来理解图像包含的内容,以便将其包含在搜索结果中。这是一个例子: <img src="importantLogo.jpeg" alt="Company logo">
有视觉障碍的人依靠屏幕阅读器将网络内容转换为音频界面。如果仅以视觉方式呈现,他们将无法获取信息。对于图像,屏幕阅读器可以访问alt
属性并读取其内容以提供关键信息。好的alt
文字虽然简短但具有描述性,并且旨在简要地传达图像的含义。您应该始终在图像上包含alt
属性。根据HTML5规范,现在认为这是强制性的。 Instructions
img
标签中添加alt
属性,这解释了Camper Cat正在做空手道。 (图像src
没有链接到实际文件,因此您应该在显示中看到alt
文本。) Tests
tests:
- text: 你的<code>img</code>标签应该有一个<code>alt</code>属性,它不应该是空的。
testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'
Challenge Seed
<img src="doingKarateWow.jpeg">
Solution
// solution required