2.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d774c367417b2b2512a9d	了解 Alt 文本留空的情景	0	https://scrimba.com/c/cM9P4t2	301019	know-when-alt-text-should-be-left-blank

--description--

在上一个挑战中，我们了解到 img 标签必须有一个 alt 属性。不过在图片已经有标题作为文字说明，或者图片仅用作装饰的情况下，alt 属性似乎有些多余。

即便如此，我们仍然需要为 img 标签添加 alt 属性，但这时我们应把它的属性值设为空，例如：

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

比如，背景图片通常起装饰作用。但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器无法读取。

**注意：**对于有标题的图片，我们依然需要添加 alt 属性，因为这样有助于搜索引擎记录图片内容。

--instructions--

Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的 alt 属性（注意：这里 img 标签的 src 属性提供的链接是无效的，因此页面上不会显示任何忍者刀的图片，不用担心）。

--hints--

img 标签应具有 alt 属性。

assert(!($('img').attr('alt') == undefined));

alt 的属性值应为空。

assert($('img').attr('alt') == '');

--seed--

--seed-contents--

<h1>Deep Thoughts with Master Camper Cat</h1>
<article>
  <h2>Defeating your Foe: the Red Dot is Ours!</h2>
  <p>To Come...</p>
</article>

<img src="samuraiSwords.jpeg">

<article>
  <h2>Is Chuck Norris a Cat Person?</h2>
  <p>To Come...</p>
</article>

--solutions--

<h1>Deep Thoughts with Master Camper Cat</h1>
<article>
  <h2>Defeating your Foe: the Red Dot is Ours!</h2>
  <p>To Come...</p>
</article>

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

<article>
  <h2>Is Chuck Norris a Cat Person?</h2>
  <p>To Come...</p>
</article>

2.0 KiB Raw Blame History