freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.chinese.md

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
587d774c367417b2b2512a9c	Add a Text Alternative to Images for Visually Impaired Accessibility	0		为视力受损的辅助功能添加图像替代文字

Description

很可能你在其他挑战中看到了img标签的alt属性。 Alt文本描述图像的内容并提供文本替代。这有助于在图像无法加载或用户无法看到的情况下。它也被搜索引擎用来理解图像包含的内容，以便将其包含在搜索结果中。这是一个例子： <img src="importantLogo.jpeg" alt="Company logo">有视觉障碍的人依靠屏幕阅读器将网络内容转换为音频界面。如果仅以视觉方式呈现，他们将无法获取信息。对于图像，屏幕阅读器可以访问alt属性并读取其内容以提供关键信息。好的alt文字虽然简短但具有描述性，并且旨在简要地传达图像的含义。您应该始终在图像上包含alt属性。根据HTML5规范，现在认为这是强制性的。

Instructions

Camper Cat就是编码高手和实际上的高手，他建立一个网站来分享他的知识。他想要使用的个人资料图片显示了他的技能，所有网站访问者都应该欣赏。在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