gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(i18n): update Chinese translation of applied accessibility (#37920)

Browse Source
This commit is contained in:
ZhichengChen
2020-02-11 17:06:41 +08:00
committed by GitHub
parent 5eed674c3a
commit 3c743574f6
23 changed files with 639 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,23 +2,33 @@
id: 587d774c367417b2b2512a9c
title: Add a Text Alternative to Images for Visually Impaired Accessibility
challengeType: 0
videoUrl: ''
localeTitle: 为视力受损的辅助功能添加图像替代文字
videoUrl: 'https://scrimba.com/c/cPp7VfD'
forumTopicId: 16628
localeTitle: 为视觉障碍用户添加替代图像的文本
---
## Description
<section id="description">很可能你在其他挑战中看到了<code>img</code>标签的<code>alt</code>属性。 <code>Alt</code>文本描述图像的内容并提供文本替代。这有助于在图像无法加载或用户无法看到的情况下。它也被搜索引擎用来理解图像包含的内容，以便将其包含在搜索结果中。这是一个例子： <code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>有视觉障碍的人依靠屏幕阅读器将网络内容转换为音频界面。如果仅以视觉方式呈现，他们将无法获取信息。对于图像，屏幕阅读器可以访问<code>alt</code>属性并读取其内容以提供关键信息。好的<code>alt</code>文字虽然简短但具有描述性，并且旨在简要地传达图像的含义。您应该始终在图像上包含<code>alt</code>属性。根据HTML5规范，现在认为这是强制性的。 </section>
<section id='description'>
在其他挑战里你应该已经见到过<code>img</code>标签的<code>alt</code>属性了。<code>alt</code>属性中的文本作为备用文字描述了图片的内容，这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如：
<code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>
视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别<code>alt</code>属性，朗读其中的内容，来告知用户图片包含的关键信息。
良好的<code>alt</code>文本可以简明扼要地描述图片信息，所以你应该为图片添加<code>alt</code>属性。另外，HTML5 标准也在考虑强制要求对图片添加<code>alt</code>属性。
</section>
## Instructions
<section id="instructions"> Camper Cat就是编码高手和实际上的高手，他建立一个网站来分享他的知识。他想要使用的个人资料图片显示了他的技能，所有网站访问者都应该欣赏。在<code>img</code>标签中添加<code>alt</code>属性，这解释了Camper Cat正在做空手道。 （图像<code>src</code>没有链接到实际文件，因此您应该在显示中看到<code>alt</code>文本。） </section>
<section id='instructions'>
碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。在这个网站中，他使用一张简介图片来展示技能。给<code>img</code>标签添加一个<code>alt</code>属性，说明 Camper Cat 在学习空手道（图片的<code>src</code>属性没有指向任何链接，因此你可以看到<code>alt</code>属性中的文本）。
</section>
## Tests
<section id='tests'>
```yml
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.");'
- text: '你的<code>img</code>标签应该包含一个非空的<code>alt</code>属性。'
testString: assert($('img').attr('alt'));
```
@ -31,7 +41,6 @@ tests:
```html
<img src="doingKarateWow.jpeg">
```
</div>
@ -43,7 +52,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

47
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.chinese.md
View File

@ -2,29 +2,43 @@
id: 587d778b367417b2b2512aa8
title: Add an Accessible Date Picker
challengeType: 0
videoUrl: ''
localeTitle: 添加无障碍日期选择器
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
forumTopicId: 301008
localeTitle: 添加可访问的日期选择器
---
## Description
<section id="description">表单通常包含<code>input</code>字段，可用于创建多个不同的表单控件。此元素的<code>type</code>属性指示将创建哪种输入。您可能已经注意到<code>text</code>并在先前的挑战中<code>submit</code>输入类型，HTML5引入了一个指定<code>date</code>字段的选项。根据浏览器支持，当日期选择器处于焦点时，它会在<code>input</code>字段中显示，这使得所有用户都可以更轻松地填写表单。对于旧版浏览器，该类型将默认为<code>text</code> ，因此有助于向用户显示标签中的预期日期格式或以及占位符文本以防万一。这是一个例子： <blockquote> &lt;label for =“input1”&gt;输入日期：&lt;/ label&gt; <br> &lt;input type =“date”id =“input1”name =“input1”&gt; <br></blockquote></section>
<section id='description'>
表单中经常出现<code>input</code>标签，它可以用来创建多种表单控件。它的<code>type</code>属性指定了所要创建的<code>input</code>标签类型。
在以前的挑战中，你可能已经见过<code>text</code>与<code>submit</code>类型的<code>input</code>标签，HTML5 引入了<code>date</code>类型来创建时间选择器。依赖于浏览器的支持，当点击<code>input</code>标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。
对于旧版本的浏览器，<code>type</code>属性的默认值是<code>text</code>。这种情况下，可以利用<code>label</code>标签或者占位文本来提示用户<code>input</code>标签的输入类型为日期。
举个例子：
```html
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
```
</section>
## Instructions
<section id="instructions"> Camper Cat正在举办一场真人快打比赛，并想让他的竞争对手看看哪个日期效果最佳。添加一个<code>input</code>标记，其<code>type</code>属性为“date”， <code>id</code>属性为“pickdate”， <code>name</code>属性为“date”。 </section>
<section id='instructions'>
Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。请为 Camper Cat 的页面添加一个<code>input</code>标签，其<code>type</code>属性值为 date，<code>id</code>属性为 pickdate，<code>name</code>属性为 date。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应为日期选择器字段添加一个<code>input</code>标记。
testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
- text: 您的<code>input</code>标记应具有值为date的<code>type</code>属性。
testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
- text: 您的<code>input</code>标记应具有值为pickdate的<code>id</code>属性。
testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
- text: 您的<code>input</code>标记应具有值为date的<code>name</code>属性。
testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'
- text: '你的代码中应该有 1 个<code>input</code>标签。'
testString: assert($('input').length == 2);
- text: '你的<code>input</code>标签的<code>type</code>属性值应该为 date。'
testString: assert($('input').attr('type') == 'date');
- text: '你的<code>input</code>标签的<code>id</code>属性值应该为 pickdate。'
testString: assert($('input').attr('id') == 'pickdate');
- text: '你的<code>input</code>标签的<code>name</code>属性值应该为 date。'
testString: assert($('input').attr('name') == 'date');
```
@ -46,20 +60,19 @@ tests:
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<!-- Add your code below this line -->
<!-- Add your code above this line -->
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
</div>
@ -71,7 +84,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

24
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.chinese.md
View File

@ -2,23 +2,30 @@
id: 587d778f367417b2b2512aad
title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
challengeType: 0
videoUrl: ''
localeTitle: 通过仔细选择传达信息的颜色来避免色盲问题
videoUrl: 'https://scrimba.com/c/c437as3'
forumTopicId: 301011
localeTitle: 考虑色盲用户的需求仔细选择传达信息的颜色
---
## Description
<section id="description">有各种形式的色盲。这些范围可以从对特定波长的光的灵敏度降低到根本无法看到颜色。最常见的形式是检测果岭的灵敏度降低。例如，如果两个相似的绿色是内容的前景色和背景色，则色盲用户可能无法区分它们。关闭颜色可以被认为是色轮上的邻居，并且在传达重要信息时应该避免这些组合。 <strong>注意</strong> <br>一些在线颜色挑选工具包括颜色如何针对不同类型的颜色盲目出现的视觉模拟。除在线对比度检查计算器外，这些都是很好的资源。 </section>
<section id='description'>
色盲的形式有很多种，它的表现可以从对特定波长光波的感知度较低，到几乎无法看到颜色。最常见的形式是对绿色的低感知度。
例如：如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法识别它们。可以认为色轮上相邻的颜色是相近的，在表示重要信息的时候应避免使用这些颜色的组合。
<strong>注意：</strong><br>一些在线颜色拾取器有色盲模拟功能，可以模拟颜色在不同形式色盲的视觉中的呈现结果，它们和在线对比度检查器一样，都是很好的工具。
</section>
## Instructions
undefined
<section id='instructions'>
Camper Cat 正在测试一个重要按钮的不同样式。在色轮上，黄色（<code>#FFFF33</code>）的<code>background-color</code>和绿色（<code>#33FF33</code>）的文本<code>color</code>是相邻的色调，一些色盲用户几乎无法区分它们，而且这两个颜色的亮度相近，对比度太小。为了解决这两个问题，请将文本的<code>color</code>修改为深蓝色（<code>#003366</code>）。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应将<code>button</code>的文本<code>color</code>更改为深蓝色。
testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.");'
- text: '<code>button</code>的文本<code>color</code>应该是深蓝色。'
testString: assert($('button').css('color') == 'rgb(0, 51, 102)');
```
@ -46,7 +53,6 @@ tests:
</header>
<button>Delete Internet</button>
</body>
```
</div>
@ -58,7 +64,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

29
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.chinese.md
View File

@ -2,25 +2,33 @@
id: 587d778f367417b2b2512aac
title: Avoid Colorblindness Issues by Using Sufficient Contrast
challengeType: 0
videoUrl: ''
localeTitle: 使用足够的对比度避免色盲问题
videoUrl: 'https://scrimba.com/c/cmzMEUw'
forumTopicId: 301012
localeTitle: 考虑色盲用户的需求设置合适的对比度
---
## Description
<section id="description">颜色是视觉设计的重要组成部分，但它的使用引入了两个可访问性问题。首先，不应仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器用户不会看到它。其次，前景色和背景色需要足够的对比度，因此色盲用户可以区分它们。以前的挑战包括解决第一个问题的文本替代方案。最后一项挑战引入了对比度检查工具来帮助第二个。 WCAG建议的对比度为4.5：1适用于颜色使用以及灰度组合。色盲用户无法区分某些颜色与其他颜色 - 通常是色调，但有时也很轻。您可能会想起使用前景色和背景色的相对亮度（或亮度）值来计算对比度。在实践中，通过使用颜色对比度检查器使较暗的颜色变暗并使较浅的颜色变淡来达到4.5：1的比例。色轮上较暗的颜色被认为是蓝色，紫罗兰，洋红色和红色，而较浅的颜色是橙色，黄色，绿色和蓝绿色。 </section>
<section id='description'>
颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以识别它们。
在之前的挑战中，我们用文本备用方案解决了第一个问题。在上一个挑战中，我们使用对比度检测工具解决了第二问题。WCAG 建议为颜色及灰度组合使用 4.5 : 1 的对比度。
色盲用户无法将一些颜色与另一些颜色区分出来——通常是因为色调，也有时候是因为亮度。你可能想起对比度是用前景色与背景色的相对亮度计算的。
实践中，在对比度检测工具的帮助下，我们可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5 : 1。在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。
</section>
## Instructions
<section id="instructions"> Camper Cat正在尝试使用颜色作为他的博客文字和背景，但他目前的绿色<code>background-color</code>与栗色文字<code>color</code>具有2.5：1的对比度。您可以轻松调整颜色的亮度，因为他通过更改第三个参数使用CSS <code>hsl()</code>属性（代表色调，饱和度，亮度）来声明它们。将<code>background-color</code>亮度值从35％增加到55％，并将<code>color</code>亮度值从20％降低到15％。这将对比度提高到5.9：1。 </section>
<section id='instructions'>
Camper Cat 正在尝试为他的博客文本与背景使用颜色，但是他目前使用的组合是绿色的<code>background-color</code>与栗色的<code>color</code>，它们的对比度为 2.5 : 1。Camper Cat 使用了 CSS 的<code>hsl()</code>（hsl 为 hue, saturation, lightness 的缩写）属性来设置颜色，所以通过修改<code>hsl()</code>属性的第三个参数，可以很容易地调整颜色的亮度。请将<code>background-color</code>的亮度从 35% 增加到 55%，<code>color</code>的亮度从 20% 减少到 15%，这样可以使对比度达到 5.9 : 1。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码只应将文本<code>color</code>属性的亮度值更改为15％的值。
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.");'
- text: 您的代码应仅将<code>background-color</code>属性的亮度值更改为值55％。
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.");'
- text: '你应该将<code>color</code>属性的亮度值设置为 15%。'
testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));'
- text: '你应该将<code>background-color</code>属性的亮度值设置为 55%。'
testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));'
```
@ -50,7 +58,6 @@ tests:
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
</article>
</body>
```
</div>
@ -62,7 +69,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

29
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.chinese.md
View File

@ -2,25 +2,33 @@
id: 587d778f367417b2b2512aae
title: Give Links Meaning by Using Descriptive Link Text
challengeType: 0
videoUrl: ''
localeTitle: 通过使用描述性链接文本给出链接含义
videoUrl: 'https://scrimba.com/c/c437DcV'
forumTopicId: 301013
localeTitle: 使用描述性链接文本赋予链接含义
---
## Description
<section id="description">屏幕阅读器用户对其设备读取的内容类型有不同的选择。这包括跳过（或覆盖）地标元素，跳转到主要内容或从标题中获取页面摘要。另一种选择是仅听取页面上可用的链接。屏幕阅读器通过阅读链接文本或锚（ <code>a</code> ）标签之间的内容来完成此操作。列出“点击此处”或“阅读更多”链接的作用不大。相反，您应该在<code>a</code>标签中使用简短但具有描述性的文本，以便为这些用户提供更多资讯。 </section>
<section id='description'>
屏幕阅读器用户可以选择其设备读取的内容的类型，这包括跳转到（或跳过）标志标签，跳转到主要内容，或者从标题中获取页面摘要，还可以选择只听取页面中的有效链接。
屏幕阅读器通过阅读链接文本或者锚点标签（<code>a</code>）之间的内容来完成这个操作。使用 "click here" 或者 "read more" 作为链接文本并没有多少帮助。相反地，应该在<code>a</code>标签中使用简洁的描述性语言来为用户提供更多的信息。
</section>
## Instructions
<section id="instructions">如果没有上下文，Camper Cat正在使用的链接文字不是很具描述性。移动 <code>a</code> 标签，使它们环绕文本“有关电池的信息”而不是环绕着“点击此处”。 </section>
<section id='instructions'>
Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。请修改锚点标签（<code>a</code>），将其包含的文本从 "click here" 改为 "information about batteries"。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您应将<code>a</code>标签从“点击这里”移动，让其环绕在“关于电池的信息”。
testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".");'
- text: 确保您<code>a</code>元素具有结束标记。
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(""|"")>/g).length, "Make sure your <code>a</code> element has a closing tag.");'
- text: '请修改<code>a</code>标签，将其包含的文本从 "click here" 改为 "information about batteries"。'
testString: assert($('a').text().match(/^(information about batteries)$/g));
- text: '<code>a</code>元素应该有一个<code>href</code>属性，且值为空字符串'
testString: assert($('a').attr('href') === '');
- text: '<code>a</code> 元素应该有一个结束标记'
testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length);
```
@ -41,7 +49,6 @@ tests:
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
</article>
</body>
```
</div>
@ -53,7 +60,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

64
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.chinese.md
View File

@ -2,35 +2,52 @@
id: 587d7789367417b2b2512aa4
title: Improve Accessibility of Audio Content with the audio Element
challengeType: 0
videoUrl: ''
localeTitle: 使用音频元素改善音频内容的可访问性
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
forumTopicId: 301014
localeTitle: 使用 audio 元素提高音频内容的可访问性
---
## Description
<section id="description">当HTML5的<code>audio</code>元素包含标记中的声音或音频流内容时，它会提供语义含义。音频内容还需要一个文本替代品，以便耳聋或听力障碍的人可以访问。这可以通过页面上的附近文本或转录本的链接来完成。 <code>audio</code>标签支持<code>controls</code>属性。这显示了浏览器的默认播放，暂停和其他控件，并支持键盘功能。这是一个布尔属性，意味着它不需要值，它在标签上的存在会打开设置。这是一个例子： <blockquote> &lt;audio id =“meowClip”controls&gt; <br> &lt;source src =“audio / meow.mp3”type =“audio / mpeg”/&gt; <br> &lt;source src =“audio / meow.ogg”type =“audio / ogg”/&gt; <br> &lt;/音频&gt; <br></blockquote> <strong>注意</strong> <br>多媒体内容通常具有视觉和听觉组件。它需要同步标题和成绩单，以便具有视觉和/或听觉障碍的用户可以访问它。通常，Web开发人员不负责创建字幕或脚本，但需要知道包含它们。 </section>
<section id='description'>
HTML5 的<code>audio</code>标签用于呈现音频内容，它也具有语义化特性。可以在<code>audio</code>上下文中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。
<code>audio</code>支持<code>controls</code>属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。<code>controls</code>属性是一个布尔属性，只要这个属性出现在<code>audio</code>标签中，浏览器就会开启播放控件。
举个例子：
```html
<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>
```
<strong>注意：</strong><br>多媒体内容通常同时包含音频与视频部分，它需要同步音频与字幕，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不需要创建音频与字幕，但是需要将它们添加到多媒体中。
</section>
## Instructions
<section id="instructions">是时候从Camper Cat休息一下，与露营者Zersiax（@zersiax）会面，这是一个可访问性和屏幕阅读器用户的冠军。要听到屏幕阅读器的剪辑，请在<code>p</code>后添加<code>audio</code>元素。包含<code>controls</code>属性。然后将<code>source</code>标记放在<code>audio</code>标记内， <code>src</code>属性设置为“https://s3.amazonaws.com/freecodecamp/screen-reader.mp3”，并将<code>type</code>属性设置为“audio / mpeg”。 <strong>注意</strong> <br>音频剪辑可能听起来很快并且难以理解，但这对于屏幕阅读器用户来说是正常的速度。 </section>
<section id='instructions'>
是时候让 Camper Cat 休息一下，并与朋友 camper Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验 Zersiax 的屏幕阅读器的朗读效果，请在<code>p</code>标签之后添加一个具有<code>controls</code>属性的<code>audio</code>标签。然后在<code>audio</code>标签内添加一个<code>source</code>标签，并且设置<code>src</code>属性为"https://s3.amazonaws.com/freecodecamp/screen-reader.mp3"，并且设置<code>type</code>属性为"audio/mpeg".
<strong>注意：</strong><br>音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该有一个<code>audio</code>标记。
testString: 'assert($("audio").length === 1, "Your code should have one <code>audio</code> tag.");'
- text: 确保您的<code>audio</code>元素具有结束标记。
testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), "Make sure your <code>audio</code> element has a closing tag.");'
- text: <code>audio</code>标签应该具有<code>controls</code>属性。
testString: 'assert($("audio").attr("controls"), "The <code>audio</code> tag should have the <code>controls</code> attribute.");'
- text: 您的代码应该有一个<code>source</code>标记。
testString: 'assert($("source").length === 1, "Your code should have one <code>source</code> tag.");'
- text: 您的<code>source</code>标记应位于<code>audio</code>标记内。
testString: 'assert($("audio").children("source").length === 1, "Your <code>source</code> tag should be inside the <code>audio</code> tags.");'
- text: <code>source</code>标记上<code>src</code>属性的值应与指令中的链接完全匹配。
testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.");'
- text: 您的代码应在<code>source</code>标记上包含<code>type</code>属性，其值为audio / mpeg。
testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.");'
- text: '你的代码应该包含一个<code>audio</code>标签。'
testString: assert($('audio').length === 1);
- text: '确保你的<code>audio</code>标签是闭合的。'
testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g));
- text: '<code>audio</code>标签应具有<code>controls</code>属性。'
testString: assert($('audio').attr('controls'));
- text: '你的代码应具有<code>source</code>标签。'
testString: assert($('source').length === 1);
- text: '<code>source</code>标签应该在<code>audio</code>标签中。'
testString: assert($('audio').children('source').length === 1);
- text: '<code>source</code>标签中<code>src</code>属性的值应该与教程中的链接一致。'
testString: 'assert($(''source'').attr(''src'') === ''https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'');'
- text: '<code>source</code>标签中应具有<code>type</code>属性，其值为 audio/mpeg。'
testString: assert($('source').attr('type') === 'audio/mpeg');
```
@ -48,12 +65,11 @@ tests:
</header>
<main>
<p>A sound clip of Zersiax's screen reader in action.</p>
</main>
</body>
```
</div>
@ -65,7 +81,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

59
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.chinese.md
View File

@ -2,33 +2,51 @@
id: 587d778a367417b2b2512aa5
title: Improve Chart Accessibility with the figure Element
challengeType: 0
videoUrl: ''
localeTitle: 使用图元素改进图表可访问性
videoUrl: 'https://scrimba.com/c/cGJMqtE'
forumTopicId: 301015
localeTitle: 使用 figure 元素提高图表的可访问性
---
## Description
<section id="description"> HTML5引入了<code>figure</code>元素以及相关的<code>figcaption</code> 。这些项目一起使用，包含可视化表示（如图像，图表或图表）及其标题。通过语义分组相关内容和提供解释<code>figure</code>的文本替代，这提供了双倍的可访问性提升。对于图表等数据可视化，可以使用标题简要说明视力障碍用户的趋势或结论。另一个挑战包括如何为屏幕阅读器用户在屏幕外（使用CSS）移动图表数据的表格版本。这是一个例子 - 请注意， <code>figcaption</code>位于<code>figure</code>标签内部，可以与其他元素组合： <blockquote> &lt;图&gt; <br> &lt;img src =“roundhouseDestruction.jpeg”alt =“露营猫执行圆屋踢的照片”&gt; <br>点击<br> &lt;figcaption&gt; <br> Master Camper Cat展示了适当形式的圆屋踢。 <br> &lt;/ figcaption&gt; <br> &lt;/图&gt; <br></blockquote></section>
<section id='description'>
HTML5 引入了<code>figure</code>标签以及与之相关的<code>figcaption</code>标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。这样通过语义化对内容进行分组并配以用于解释<code>figure</code>的文字，可以极大地提升内容的可访问性。
对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何处理那些超出屏幕可视范围（使用 CSS）的表格版本的图表数据，以使屏幕阅读器用户也可以获取信息。
举个例子——注意<code>figcaption</code>包含在<code>figure</code>标签中，并且可以与其他标签组合使用：
```html
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
```
</section>
## Instructions
<section id="instructions"> Camper Cat正在努力创建一个堆积条形图，显示每周花在隐形，战斗和武器上的训练时间。通过将用于<code>figure</code>标记的<code>div</code>标签和包含标题的<code>p</code>标签更改为<code>figcaption</code>标记，帮助他更好地构建页面。 </section>
<section id='instructions'>
Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。请帮助完善他的页面，将他的用于呈现图表的<code>div</code>标签修改为<code>figure</code>标签，用于呈现图表标题的<code>p</code>标签改为<code>figcaption</code>标签。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该有一个<code>figure</code>标记。
testString: 'assert($("figure").length == 1, "Your code should have one <code>figure</code> tag.");'
- text: 您的代码应该有一个<code>figcaption</code>标记。
testString: 'assert($("figcaption").length == 1, "Your code should have one <code>figcaption</code> tag.");'
- text: 您的代码不应包含任何<code>div</code>标记。
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: 您的代码不应包含任何<code>p</code>标记。
testString: 'assert($("p").length == 0, "Your code should not have any <code>p</code> tags.");'
- text: <code>figcaption</code>应该是<code>figure</code>标签的子<code>figcaption</code> 。
testString: 'assert($("figure").children("figcaption").length == 1, "The <code>figcaption</code> should be a child of the <code>figure</code> tag.");'
- text: 确保您的<code>figure</code>元素有一个结束标记。
testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, "Make sure your <code>figure</code> element has a closing tag.");'
- text: '你的代码应该有 1 个<code>figure</code>标签。'
testString: assert($('figure').length == 1);
- text: '你的代码应该有 1 个<code>figcaption</code>标签。'
testString: assert($('figcaption').length == 1);
- text: '你的代码不应有<code>div</code>标签。'
testString: assert($('div').length == 0);
- text: '你的代码不应有<code>p</code>标签。'
testString: assert($('p').length == 0);
- text: '<code>figcaption</code>应该为<code>figure</code>的子标签。'
testString: assert($('figure').children('figcaption').length == 1);
- text: '请确保你的<code>figure</code>标签是闭合的。'
testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length);
```
@ -53,7 +71,7 @@ tests:
</header>
<main>
<section>
<!-- Add your code below this line -->
<div>
<!-- Stacked bar chart will go here -->
@ -61,7 +79,7 @@ tests:
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
</div>
<!-- Add your code above this line -->
</section>
<section id="stealth">
<h2>Stealth &amp; Agility Training</h2>
@ -81,7 +99,6 @@ tests:
</main>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
</div>
@ -93,7 +110,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

45
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.chinese.md
View File

@ -2,25 +2,41 @@
id: 587d778a367417b2b2512aa6
title: Improve Form Field Accessibility with the label Element
challengeType: 0
videoUrl: ''
localeTitle: 使用标签元素改进表单字段可访问性
videoUrl: 'https://scrimba.com/c/cGJMMAN'
forumTopicId: 301016
localeTitle: 使用 label 元素提高表单的可访问性
---
## Description
<section id="description">使用语义HTML标记提高可访问性适用于使用适当的标记名称和属性。接下来的几个挑战包括使用表单中的属性的一些重要场景。 <code>label</code>标签包装特定表单控件项的文本，通常是选项的名称或标签。这与项目的意义联系在一起，使表单更具可读性。 <code>label</code>标签上的<code>for</code>属性明确地将该<code>label</code>与表单控件相关联，并由屏幕阅读器使用。您在“基本HTML”部分的课程中了解了单选按钮及其标签。在该课程中，我们将单选按钮输入元素与标签文本一起包装在<code>label</code>元素中，以使文本可单击。另一种实现此目的的方法是使用本课程中介绍的<code>for</code>属性。 <code>for</code>属性的值必须与表单控件的<code>id</code>属性的值相同。这是一个例子： <blockquote> &lt;FORM&gt; <br> &lt;label for =“name”&gt;名称：&lt;/ label&gt; <br> &lt;input type =“text”id =“name”name =“name”&gt; <br> &lt;/ FORM&gt; <br></blockquote></section>
<section id='description'>
合理地使用语义化的 HTML 标签和属性可以提升页面可访问性。在接下来的挑战中，你将会看到使用表单属性的重要场景。
<code>label</code>标签用于呈现特定表单控件的文本，通常是选项的名称。这些文本代表了选项的含义，使表单具有更好的可读性。<code>label</code>标签的<code>for</code>属性指定了与<code>label</code>绑定的表单控件，并且屏幕阅读器也会读取<code>for</code>属性。
在 HTML 基础章节的课程中，我们已经了解了单选按钮标签。在那节课程中，我们为了可以点击单选按钮的名称，将<code>input</code>标签放在<code>label</code>标签中。在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用<code>for</code>属性。
<code>for</code>属性的值必须与表单控件的<code>id</code>属性的值相同。举个例子：
```html
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
```
</section>
## Instructions
<section id="instructions"> Camper Cat期望对他有思想的博客文章感兴趣，并希望包含一个电子邮件注册表单。在电子邮件<code>label</code>上添加与其<code>input</code>字段中的<code>id</code>匹配的<code>for</code>属性。 </section>
<section id='instructions'>
Camper Cat 希望他的博客文章能有很多订阅，他想添加一个电子邮件注册表单。请为表示电子邮件的<code>label</code>标签添加<code>for</code>属性，并设置属性值与<code>input</code>标签的<code>id</code>属性值相同。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该在<code>label</code>标签上具有非空的<code>for</code>属性。
testString: 'assert($("label").attr("for"), "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.");'
- text: 您的<code>for</code>属性值应与电子邮件<code>input</code>中的<code>id</code>值匹配。
testString: 'assert($("label").attr("for") == "email", "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.");'
- text: '你的<code>label</code>标签应该有 1 个非空的<code>for</code>属性。'
testString: assert($('label').attr('for'));
- text: '<code>for</code>属性的值应该与<code>input</code>标签的 id 值 email 相同。'
testString: assert($('label').attr('for') == 'email');
```
@ -39,12 +55,12 @@ tests:
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label>Email:</label>
<input type="text" id="email" name="email">
<input type="submit" name="submit" value="Submit">
</form>
</section>
@ -64,7 +80,6 @@ tests:
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
</div>
@ -76,7 +91,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

25
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.chinese.md
View File

@ -2,25 +2,31 @@
id: 587d778e367417b2b2512aab
title: Improve Readability with High Contrast Text
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/cKb3nCq'
forumTopicId: 301017
localeTitle: 使用高对比度文本提高可读性
---
## Description
<section id="description">前景色和背景色之间的低对比度会使文本难以阅读。充足的对比度可以提高内容的可读性，但“足够”究竟意味着什么呢？ Web内容可访问性指南（WCAG）建议正常文本的对比度至少为4.5：1。通过比较两种颜色的相对亮度值来计算该比率。对于相同的颜色，或者没有对比度，其范围从1：1到白色与黑色的21：1，最强的对比度。网上有许多对比度检查工具可以为您计算这个比率。 </section>
<section id='description'>
低对比度的前景色与背景色会使文本难以阅读。足够的对比度可以提高内容的可读性，但是怎样的对比度才算是 “足够” 的？
Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的，其范围是从相同颜色的 1 : 1（无对比度）到白色与黑色的最高对比度 21 : 1。网上有很多可以帮助你计算对比度的工具。
</section>
## Instructions
<section id="instructions"> Camper Cat在他最近的博客文章中选择浅灰色文本在白色背景上具有1.5：1的对比度，使其难以阅读。将文本<code>color</code>从当前灰色（ <code>#D3D3D3</code> ）更改为深灰色（ <code>#636363</code> ），将对比度提高到6：1。 </section>
<section id='instructions'>
Camper Cat 为他的博客选择了白色背景，浅灰色文字，对比度为 1.5 : 1，这使博客文章难以阅读。请将文字的<code>color</code>从当前的浅灰色（<code>#D3D3D3</code>）修改为深灰色（<code>#636363</code>），以使对比度提升到 6 : 1。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该改变文字<code>color</code>为<code>body</code>的深灰色。
testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.");'
- text: 您的代码不应更改<code>body</code>的<code>background-color</code> 。
testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the <code>background-color</code> for the <code>body</code>.");'
- text: '你应该将<code>body</code>的<code>color</code>修改为深灰色。'
testString: assert($('body').css('color') == 'rgb(99, 99, 99)');
- text: '你不应该修改<code>body</code>的<code>background-color</code>。'
testString: assert($('body').css('background-color') == 'rgb(255, 255, 255)');
```
@ -50,7 +56,6 @@ tests:
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
</article>
</body>
```
</div>
@ -62,7 +67,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

29
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.chinese.md
View File

@ -2,25 +2,33 @@
id: 587d774e367417b2b2512a9f
title: Jump Straight to the Content Using the main Element
challengeType: 0
videoUrl: ''
localeTitle: 使用主元素直接跳转到内容
videoUrl: 'https://scrimba.com/c/cPp7zuE'
forumTopicId: 301018
localeTitle: 使用 main 元素包裹主题内容
---
## Description
<section id="description"> HTML5引入了许多新元素，为开发人员提供了更多选项，同时还包含了辅助功能。这些标签包括<code>main</code> ， <code>header</code> ， <code>footer</code> ， <code>nav</code> ， <code>article</code>和<code>section</code>等。默认情况下，浏览器渲染这些元素与简单的<code>div</code>类似。但是，在适当的地方使用它们会在标记中提供额外的含义。标记名称本身可以指示它包含的信息类型，这为该内容添加了语义含义。辅助技术可以访问此信息，以便为其用户提供更好的页面摘要或导航选项。 <code>main</code>元素用于包装（您猜对了）主要内容，每页应该只有一个。它旨在包含与页面中心主题相关的信息。它并不意味着包含跨页面重复的项目，例如导航链接或横幅。 <code>main</code>标签还具有嵌入式地标功能，辅助技术可用于快速导航到主要内容。如果您曾在页面顶部看到“跳转到主要内容”链接，则使用主标签会自动为辅助设备提供该功能。 </section>
<section id='description'>
HTML5 添加了诸如<code>main</code>、<code>header</code>、<code>footer</code>、<code>nav</code>、<code>article</code>、<code>section</code>等大量新标签，开发人员提供更多的选择，也兼顾了无障碍特性。
默认情况下，浏览器呈现这些新标签的方式与<code>div</code>相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。
<code>main</code>标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。
<code>main</code>标签的语义化特性可以使辅助技术快速定位到页面的主体。 如果页面顶部有一个 “跳转到主要内容” 的链接，那么辅助设备会自动识别<code>main</code>标签，实现这个功能。
</section>
## Instructions
<section id="instructions"> Camper Cat对他的忍者武器页面有一些重要的想法。通过在<code>header</code>和<code>footer</code>之间添加打开和关闭<code>main</code>标记来帮助他设置标记（在其他挑战中涵盖）。暂时保持<code>main</code>标签为空。 </section>
<section id='instructions'>
Camper Cat 对他的忍者武器页面有一些新的想法，请帮助他在<code>header</code>标签和<code>footer</code>标签（在接下来的挑战中会详细介绍）之间添加完整<code>main</code>标签来使页面语义化。在这个挑战中，你可以先让<code>main</code>为空。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该有一个<code>main</code>标记。
testString: 'assert($("main").length == 1, "Your code should have one <code>main</code> tag.");'
- text: <code>main</code>标记应位于结束<code>header</code>标记和开放<code>footer</code>标记之间。
testString: 'assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.");'
- text: '你的代码应该有一个<code>main</code>标签。'
testString: assert($('main').length == 1);
- text: '<code>main</code>标签应该在<code>header</code>标签与<code>footer</code>标签之间。'
testString: assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
```
@ -39,7 +47,6 @@ tests:
<footer></footer>
```
</div>
@ -51,7 +58,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

30
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.chinese.md
View File

@ -2,25 +2,34 @@
id: 587d774c367417b2b2512a9d
title: Know When Alt Text Should be Left Blank
challengeType: 0
videoUrl: ''
localeTitle: 知道Alt文本应该留空
videoUrl: 'https://scrimba.com/c/cM9P4t2'
forumTopicId: 301019
localeTitle: 知道 Alt 文本何时应该留空
---
## Description
<section id="description">在上一个挑战中，您了解到在img标记上包含<code>alt</code>属性是必需的。但是，有时图像与已经描述它们的标题分组，或仅用于装饰。在这些情况下， <code>alt</code>文本可能看似多余或不必要。在已经使用文本内容解释图像或者没有为页面添加含义的情况下， <code>img</code>仍然需要<code>alt</code>属性，但可以将其设置为空字符串。这是一个例子： <code>&lt;img src=&quot;visualDecoration.jpeg&quot; alt=&quot;&quot;&gt;</code>背景图片通常也属于“装饰”标签。但是，它们通常应用CSS规则，因此不是标记屏幕阅读器进程的一部分。 <strong>注意</strong> <br>对于带有标题的图像，您可能仍希望包含<code>alt</code>文本，因为它有助于搜索引擎对图像内容进行编目。 </section>
<section id='description'>
在上一个挑战中，我们了解到<code>img</code>标签必须有一个<code>alt</code>属性。在图片已经有了文字说明，或者仅仅为了美化页面的情况下，<code>alt</code>属性似乎有些多余。
即便如此，我们仍然需要为<code>img</code>标签添加<code>alt</code>属性，这时可以把它设为空，例如：
<code>&lt;img src=&quot;visualDecoration.jpeg&quot; alt=&quot;&quot;&gt;</code>
背景图片通常起装饰作用，而且含有 CSS 类，所以屏幕阅读器无法读取。
<strong>注意：</strong><br>对于有标题的图片，我们依然需要添加<code>alt</code>属性，因为这样有助于搜索引擎记录图片内容。
</section>
## Instructions
<section id="instructions"> Camper Cat已为其网站的博客部分编写了一个骨架页面。他计划在他的两篇文章之间用武士刀的装饰图像添加一个视觉中断。将<code>alt</code>属性添加到<code>img</code>标记并将其设置为空字符串。 （请注意，图像<code>src</code>不会链接到实际文件 - 不要担心显示屏中没有显示剑。） </section>
<section id='instructions'>
Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的<code>alt</code>属性（注意：这里<code>img</code>标签的<code>src</code>属性提供的链接是无效的，因此页面上可能不会显示图片，不用担心）。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 你的<code>img</code>标签应该有一个<code>alt</code>属性。
testString: 'assert(!($("img").attr("alt") == undefined), "Your <code>img</code> tag should have an <code>alt</code> attribute.");'
- text: <code>alt</code>属性应设置为空字符串。
testString: 'assert($("img").attr("alt") == "", "The <code>alt</code> attribute should be set to an empty string.");'
- text: '你的<code>img</code>标签应该包含<code>alt</code>属性。'
testString: assert(!($('img').attr('alt') == undefined));
- text: '<code>alt</code>属性对应的值应该为空。'
testString: assert($('img').attr('alt') == '');
```
@ -44,7 +53,6 @@ tests:
<h2>Is Chuck Norris a Cat Person?</h2>
<p>To Come...</p>
</article>
```
</div>
@ -56,7 +64,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

55
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.chinese.md
View File

@ -2,29 +2,53 @@
id: 587d778d367417b2b2512aaa
title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
challengeType: 0
videoUrl: ''
localeTitle: 使用自定义CSS使元素仅对屏幕阅读器可见
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
forumTopicId: 301020
localeTitle: 使用自定义 CSS 让元素仅对屏幕阅读器可见
---
## Description
<section id="description">您是否注意到目前为止所有应用的可访问性问题都没有使用任何CSS？这是为了展示逻辑文档大纲的重要性，并在介绍视觉设计方面之前在您的内容周围使用具有语义意义的标记。但是，当您想要在视觉上隐藏仅供屏幕阅读器使用的内容时，CSS的魔力还可以改善页面的可访问性。当信息采用可视格式（如图表）时会发生这种情况，但屏幕阅读器用户需要使用替代演示（如表格）来访问数据。 CSS用于将屏幕阅读器元素定位在浏览器窗口的可视区域之外。这是完成此任务的CSS规则的示例： <blockquote> .sr-only { <br>位置：绝对; <br>左：-10000px; <br>宽度：1px; <br>身高：1px; <br>顶部：汽车; <br>溢出：隐藏; <br> } </blockquote> <strong>注意</strong> <br>以下CSS方法不会做同样的事情： <ul><li> <code>display: none;</code>或<code>visibility: hidden;</code>隐藏每个人的内容，包括屏幕阅读器用户</li><li>像素大小的零值，例如<code>width: 0px; height: 0px;</code>从文档流中删除该元素，这意味着屏幕阅读器将忽略它</li></ul></section>
<section id='description'>
到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。
然而，如果我们需要在页面中添加一些只对屏幕阅读器可见的内容时，CSS 可以提升页面的可访问性。当信息以可视化形式（如：图表）展示，而屏幕阅读器用户需要一种替代方式（如：表格）来获取信息时，就会出现这种情况。CSS 被用来将这些仅供屏幕阅读器使用的信息定位到浏览器可见区域之外。
举个例子：
```css
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
```
<strong>注意：</strong><br>下面的 CSS 代码与上面的结果不同：
<ul>
<li><code>display: none;</code>或<code>visibility: hidden;</code>会把内容彻底隐藏起来，对于屏幕阅读器也不例外。</li>
<li>如果把值设置为 0px，如<code>width: 0px; height: 0px;</code>，意味着让元素脱离文档流，这样做也会让元素被屏幕阅读器忽略。</li>
</ul>
</section>
## Instructions
<section id="instructions"> Camper Cat为他​​的培训页面创建了一个非常酷的堆积条形图，并将数据放入一个表格中，供视障用户使用。该表已经有一个<code>sr-only</code>类，但CSS规则尚未填写。给<code>position</code>一个绝对值， <code>left</code>是-10000px值， <code>width</code>和<code>height</code>都是1px值。 </section>
<section id='instructions'>
Camper Cat 为他的训练页面创建了一个十分酷炫的条形图，并将数据放入表格中，供屏幕阅读器用户使用。表格已经有了一个<code>sr-only</code>类，但是还没有添加 CSS 规则。请设置<code>position</code>的值为 absolute，<code>left</code> 的值为 -10000px，<code>width</code>与<code>height</code>的值为 1px。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该将<code>sr-only</code>类的<code>position</code>属性设置为absolute的值。
testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.");'
- text: 您的代码应将<code>sr-only</code>类的<code>left</code>属性设置为-10000px的值。
testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.");'
- text: 您的代码应将<code>sr-only</code>类的<code>width</code>属性设置为1像素的值。
testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
- text: 您的代码应将<code>sr-only</code>类的<code>height</code>属性设置为1像素的值。
testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.");'
- text: '<code>sr-only</code>类中的<code>position</code>属性的值应为 absolute。'
testString: assert($('.sr-only').css('position') == 'absolute');
- text: '<code>sr-only</code>类中的<code>left</code>属性的值应为 -10000px。'
testString: assert($('.sr-only').css('left') == '-10000px');
- text: '<code>sr-only</code>类中的<code>width</code>属性的值应为 1px。'
testString: 'assert(code.match(/width:\s*?1px/gi));'
- text: '<code>sr-only</code>类中的<code>height</code>属性的值应为 1px。'
testString: 'assert(code.match(/height:\s*?1px/gi));'
```
@ -75,7 +99,7 @@ tests:
<th scope="col">Stealth &amp; Agility</th>
<th scope="col">Combat</th>
<th scope="col">Weapons</th>
<th scope="col">Total</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
@ -120,7 +144,6 @@ tests:
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
</div>
@ -132,7 +155,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

85
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.chinese.md Normal file
View File

@ -0,0 +1,85 @@
---
id: 587d7790367417b2b2512aaf
title: Make Links Navigable with HTML Access Keys
challengeType: 0
videoUrl: 'https://scrimba.com/c/cQvmaTp'
forumTopicId: 1
localeTitle: 通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航
---
## Description
<section id='description'>
HTML 提供<code>accesskey</code>属性，用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加便捷。
HTML5 允许在任何标签上使用这个属性。该属性 （如链接、按钮、表单控件等）十分有用。
举个例子：
<code>&lt;button accesskey=&quot;b&quot;&gt;Important Button&lt;/button&gt;</code>
</section>
## Instructions
<section id='instructions'>
Camper Cat 希望为他的两篇博客的标题的链接设置快捷键，以使用户可以快速导航到文章的全文。请为这两个链接添加<code>accesskey</code>属性，并将第一个设置为 "g"（表示 Garfield），第二个设置为 "c"（表示 Chuck Norris）。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: '你应该为<code>id</code>是 "first" 的<code>a</code>标签添加<code>accesskey</code>属性。'
testString: assert($('#first').attr('accesskey'));
- text: '你应该为<code>id</code>是 "second" 的<code>a</code>标签添加<code>accesskey</code>属性。'
testString: assert($('#second').attr('accesskey'));
- text: '你应该将<code>id</code>是 "first" 的<code>a</code>标签的<code>accesskey</code>属性值设置为小写 "g"。'
testString: assert($('#first').attr('accesskey') == 'g');
- text: '你应该将<code>id</code>是 "second" 的<code>a</code>标签的<code>accesskey</code>属性值设置为小写 "c"。'
testString: assert($('#second').attr('accesskey') == 'c')
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2><a id="first" href="">The Garfield Files: Lasagna as Training Fuel?</a></h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<article>
<h2><a id="second" href="">Is Chuck Norris a Cat Person?</a></h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```html
// solution required
```
</section>

76
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.chinese.md
View File

@ -1,76 +0,0 @@
---
id: 587d7790367417b2b2512aaf
title: Make Links Navigatable with HTML Access Keys
challengeType: 0
videoUrl: ''
localeTitle: 使链接可以使用HTML访问密钥进行导航
---
## Description
<section id="description"> HTML提供了<code>accesskey</code>属性，用于指定要激活元素或将焦点置于元素的快捷键。这可以使键盘用户的导航更有效。 HTML5允许在任何元素上使用此属性，但在与交互元素一起使用时，它特别有用。这包括链接，按钮和表单控件。这是一个例子： <code>&lt;button accesskey=&quot;b&quot;&gt;Important Button&lt;/button&gt;</code> </section>
## Instructions
<section id="instructions"> Camper Cat希望两个博客文章标题之间的链接具有键盘快捷键，这样他的网站用户就可以快速浏览完整的故事。为两个链接添加一个<code>accesskey</code>属性，并将第一个设置为“g”（对于加菲猫），将第二个设置为“c”（对于Chuck Norris）。 </section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该为<code>id</code>为“first” <code>a</code>标记添加一个<code>accesskey</code>属性。
testString: 'assert($("#first").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".");'
- text: 您的代码应该为<code>id</code>为“second” <code>a</code>标记添加一个<code>accesskey</code>属性。
testString: 'assert($("#second").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".");'
- text: 您的代码应在<code>id</code>为“first”到“g” <code>a</code>标记上设置<code>accesskey</code>属性。请注意，案件很重要。
testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.");'
- text: 您的代码应设置<code>accesskey</code>的属性<code>a</code>标签与<code>id</code> “第二”到“C”的。请注意，案件很重要。
testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<article>
<h2><a id="first" href="">The Garfield Files: Lasagna as Training Fuel?</a></h2>
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>
<article>
<h2><a id="second" href="">Is Chuck Norris a Cat Person?</a></h2>
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

30
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.chinese.md
View File

@ -2,27 +2,32 @@
id: 587d7788367417b2b2512aa3
title: Make Screen Reader Navigation Easier with the footer Landmark
challengeType: 0
videoUrl: ''
localeTitle: 使用页脚Landmark使屏幕阅读器导航更轻松
videoUrl: 'https://scrimba.com/c/crVrDh8'
forumTopicId: 301022
localeTitle: 使用 footer 元素使屏幕阅读器更容易导航
---
## Description
<section id="description">与<code>header</code>和<code>nav</code>类似， <code>footer</code>元素具有内置的地标功能，允许辅助设备快速导航到它。它主要用于包含版权信息或链接到通常位于页面底部的相关文档。 </section>
<section id='description'>
与<code>header</code>和<code>nav</code>类似，<code>footer</code>也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。
</section>
## Instructions
<section id="instructions"> Camper Cat的培训页面正在取得良好进展。将用于将其版权信息包含在页面底部的<code>div</code>更改为<code>footer</code>元素。 </section>
<section id='instructions'>
Camper Cat 的忍者训练页面进展顺利。请将他在页面底部呈现版权信息的<code>div</code>标签更改为<code>footer</code>标签。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该有一个<code>footer</code>标记。
testString: 'assert($("footer").length == 1, "Your code should have one <code>footer</code> tag.");'
- text: 您的代码不应包含任何<code>div</code>标记。
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: 您的代码应该有一个开始和结束<code>footer</code>标记。
testString: 'assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g), "Your code should have an opening and closing <code>footer</code> tag.");'
- text: '你的代码中应该包含 1 个<code>footer</code>标签。'
testString: assert($('footer').length == 1);
- text: '你的代码中不应包含<code>div</code>标签。'
testString: assert($('div').length == 0);
- text: '你代码中的<code>footer</code>应该是闭合的。'
testString: assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g));
```
@ -68,7 +73,6 @@ tests:
</body>
```
</div>
@ -80,7 +84,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

36
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.chinese.md
View File

@ -2,29 +2,36 @@
id: 587d7787367417b2b2512aa1
title: Make Screen Reader Navigation Easier with the header Landmark
challengeType: 0
videoUrl: ''
localeTitle: 使用标题Landmark使屏幕阅读器导航更轻松
videoUrl: 'https://scrimba.com/c/cB76vtv'
forumTopicId: 301023
localeTitle: 使用 header 元素使屏幕阅读器更容易导航
---
## Description
<section id="description">下一个添加语义含义并提高可访问性的HTML5元素是<code>header</code>标记。它用于为其父标记包装介绍性信息或导航链接，并且可以很好地处理在多个页面顶部重复的内容。 <code>header</code>分享了您在<code>main</code>看到的嵌入式地标功能，允许辅助技术快速导航到该内容。 <strong>注意</strong> <br> <code>header</code>适用于HTML文档的<code>body</code>标记。这与<code>head</code>元素不同， <code>head</code>元素包含页面标题，元信息等。 </section>
<section id='description'>
<code>header</code>也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
与<code>main</code>类似，<code>header</code>的语义化特性也可以使辅助技术快速定位到它的内容。
<strong>注意：</strong><br><code>header</code>用在 HTML 文档的<code>body</code>标签中。这点与包含页面标题、元信息的<code>head</code>标签不同。
</section>
## Instructions
<section id="instructions"> Camper Cat正在撰写一些关于忍者训练的精彩文章，并希望为他们的网站添加一个页面。将当前包含<code>h1</code>的顶部<code>div</code>更改为<code>header</code>标记。 </section>
<section id='instructions'>
Camper Cat 正在写一些训练忍者的精彩文章，并为它们建立一个新的页面。请使用<code>header</code>替换页面顶端包含<code>h1</code>的<code>div</code>标签。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该有一个<code>header</code>标记。
testString: 'assert($("header").length == 1, "Your code should have one <code>header</code> tag.");'
- text: 您的<code>header</code>标记应该环绕<code>h1</code> 。
testString: 'assert($("header").children("h1").length == 1, "Your <code>header</code> tags should wrap around the <code>h1</code>.");'
- text: 您的代码不应包含任何<code>div</code>标记。
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: 确保您的<code>header</code>元素具有结束标记。
testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, "Make sure your <code>header</code> element has a closing tag.");'
- text: '你的代码应该包含 1 个<code>header</code>标签。'
testString: assert($('header').length == 1);
- text: '你的<code>header</code>标签应该包含<code>h1</code>。'
testString: assert($('header').children('h1').length == 1);
- text: '你的代码不应有任何<code>div</code>标签。'
testString: assert($('div').length == 0);
- text: '确保你的<code>header</code>标签是闭合的。'
testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length);
```
@ -61,7 +68,6 @@ tests:
</section>
</main>
</body>
```
</div>
@ -73,7 +79,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

35
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.chinese.md
View File

@ -2,29 +2,35 @@
id: 587d7788367417b2b2512aa2
title: Make Screen Reader Navigation Easier with the nav Landmark
challengeType: 0
videoUrl: ''
localeTitle: 使用导航Landmark使屏幕阅读器导航更轻松
videoUrl: 'https://scrimba.com/c/czVwWSv'
forumTopicId: 301024
localeTitle: 使用 nav 元素使屏幕阅读器更容易导航
---
## Description
<section id="description"> <code>nav</code>元素是另一个HTML5项目，具有嵌入的地标功能，便于屏幕阅读器导航。此标记用于包围页面中的主导航链接。如果页面底部有重复的站点链接，则没有必要标记带有<code>nav</code>标签的链接。使用<code>footer</code> （在下一个挑战中涵盖）就足够了。 </section>
<section id='description'>
<code>nav</code>也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。
对于在多个页面底部出现的站点链接，不需要使用<code>nav</code>，用<code>footer</code>（在下个挑战中介绍）会更好。
</section>
## Instructions
<section id="instructions"> Camper Cat在他的训练页面顶部包含了导航链接，但是将它们包裹在一个<code>div</code> 。将<code>div</code>更改为<code>nav</code>标记以改善其页面上的可访问性。 </section>
<section id='instructions'>
Camper Cat 在他的忍者训练页面顶端使用了很多导航链接，但把它们写在了<code>div</code>中。请将<code>div</code>更改为<code>nav</code>标签，以提升页面的可访问性。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该有一个<code>nav</code>标记。
testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");'
- text: 你的<code>nav</code>标签应该包裹<code>ul</code>及其列表项。
testString: 'assert($("nav").children("ul").length == 1, "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.");'
- text: 您的代码不应包含任何<code>div</code>标记。
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: 确保您的<code>nav</code>元素具有结束标记。
testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, "Make sure your <code>nav</code> element has a closing tag.");'
- text: '你的代码应该有 1 个<code>nav</code>标签。'
testString: assert($('nav').length == 1);
- text: '你的<code>nav</code>标签应该包含<code>ul</code>标签及其列表项。'
testString: assert($('nav').children('ul').length == 1);
- text: '你的代码不应包含<code>div</code>标签。'
testString: assert($('div').length == 0);
- text: '确保你的<code>nav</code>标签是闭合的。'
testString: assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length);
```
@ -67,7 +73,6 @@ tests:
</section>
</main>
</body>
```
</div>
@ -79,7 +84,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

56
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.chinese.md
View File

@ -2,30 +2,36 @@
id: 587d778c367417b2b2512aa9
title: Standardize Times with the HTML5 datetime Attribute
challengeType: 0
videoUrl: ''
localeTitle: 使用HTML5 datetime属性标准化Times
videoUrl: 'https://scrimba.com/c/cmzMgtz'
forumTopicId: 301025
localeTitle: 使用 HTML5 的 datatime 属性标准化时间
---
## Description
<section id="description">继续使用日期主题，HTML5还引入了<code>time</code>元素和<code>datetime</code>属性来标准化时间。这是一个可以在页面上包装日期或时间的内联元素。该日期的有效格式由<code>datetime</code>属性保存。这是辅助设备访问的值。它通过陈述标准化版本的时间来避免混淆，即使它是在文本中以非正式或口语方式编写的。以下是一个例子： <code>&lt;p&gt;Master Camper Cat officiated the cage match between Goro and Scorpion &lt;time datetime=&quot;2013-02-13&quot;&gt;last Wednesday&lt;/time&gt;, which ended in a draw.&lt;/p&gt;</code> </section>
<section id='description'>
继续日期主题。HTML5 还引入了<code>time</code>标签与<code>datetime</code>属性来标准化时间。<code>time</code>是一个行内标签，用于在页面中呈现日期或时间，而<code>datetime</code>属性保存了日期的有效格式，辅助设备可以访问这个值。通过标准化时间格式，即使时间在文本中是以非正式的或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。
举个例子：
<code>&lt;p&gt;Master Camper Cat officiated the cage match between Goro and Scorpion &lt;time datetime=&quot;2013-02-13&quot;&gt;last Wednesday&lt;/time&gt;, which ended in a draw.&lt;/p&gt;</code>
</section>
## Instructions
<section id="instructions">露营猫的真人快打调查结果在！在文本“9月15日星期四&lt;sup&gt; th &lt;/ sup&gt;”周围包装一个<code>time</code>标记，并为其设置“2016-09-15”添加<code>datetime</code>属性。 </section>
<section id='instructions'>
Camper Cat 的比武大会的时间确定了！请使用<code>time</code>标签包含文本 "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;"，并将<code>datetime</code>属性设置为 "2016-09-15"。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 你的<code>time</code>标签应该包含“9月15日星期四&lt;sup&gt; th &lt;/ sup&gt;”的文字。
testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".");'
- text: 您的<code>time</code>标记应具有非空的<code>datetime</code>属性。
testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");'
- text: 您的<code>datetime</code>属性应设置为2016-09-15的值。
testString: 'assert($("time").attr("datetime") === "2016-09-15", "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.");'
- text: 确保您的<code>time</code>元素具有结束标记。
testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, "Make sure your <code>time</code> element has a closing tag.");'
- text: '<code>time</code>标签应该包含文本"Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;"。'
testString: assert($('time').text().match(/Thursday, September 15th/g));
- text: '<code>time</code>标签应该有 1 个非空的<code>datetime</code>属性。'
testString: assert($('time').attr('datetime'));
- text: '<code>datetime</code>属性的值应该为 2016-09-15。'
testString: assert($('time').attr('datetime') === "2016-09-15");
- text: '确保<code>time</code>标签是闭合的。'
testString: assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4);
```
</section>
@ -42,13 +48,13 @@ tests:
</header>
<article>
<h2>Mortal Kombat Tournament Survey Results</h2>
<!-- Add your code below this line -->
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
<!-- Add your code above this line -->
<section>
<h3>Comments:</h3>
<article>
@ -67,19 +73,31 @@ tests:
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
</div>
<div id='html-teardown'>
```html
<script>
const pElement = $("article > p")
.filter((_, elem) => $(elem).text().includes("Thank you to everyone for responding to Master Camper Cat's survey."));
const timeElement = pElement[0] ? $(pElement[0]).find("time") : null;
const datetimeAttr = $(timeElement).attr("datetime");
</script>
```
</div>
</section>
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

34
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.chinese.md
View File

@ -2,26 +2,39 @@
id: 587d774d367417b2b2512a9e
title: Use Headings to Show Hierarchical Relationships of Content
challengeType: 0
videoUrl: ''
videoUrl: 'https://scrimba.com/c/cqVEktm'
forumTopicId: 301026
localeTitle: 使用标题显示内容的层次关系
---
## Description
<section id="description">标题（ <code>h1</code>到<code>h6</code>元素）是主力标签，有助于为您的内容提供结构和标签。可以将屏幕阅读器设置为只读取页面上的标题，以便用户获得摘要。这意味着标记中的标题标记具有语义含义并且彼此相关，而不仅仅是因为它们的大小值而被选中是很重要的。 <em>语义</em>意味着您在内容周围使用的标记表示它包含的信息类型。如果你正在撰写一篇带有介绍，正文和结论的论文，那么将结论作为你纲要中正文的一个小节是没有多大意义的。它应该是它自己的部分。同样，网页中的标题标签需要按顺序排列，并指明内容的层次关系。具有相同（或更高）等级的标题开始新的隐含部分，具有较低等级的标题从前一部分的开始子部分开始。例如，带有<code>h2</code>元素的页面后跟几个标有<code>h4</code>标签的子部分会使屏幕阅读器用户<code>h4</code>困惑。有六种选择，使用标签很有吸引力，因为它在浏览器中看起来更好，但您可以使用CSS编辑相对大小。最后一点，每个页面应始终有一个（并且只有一个） <code>h1</code>元素，这是您内容的主要主题。此搜索引擎和其他标题部分由搜索引擎用于理解页面主题。 </section>
<section id='description'>
标题标签（包括<code>h1</code>到<code>h6</code>）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为更快地了解页面内容，可以设置让阅读器只朗读页面标题。这意味着标题标签之间以及标签本身都应语义化，不应仅仅为了获得不同字号而使用不同级别的标题标签。
<em>语义化</em>：标签名能准确地表达它所含内容的信息类型。
对于一篇含有引言、正文、结论的论文，把结论作为引言的一部分没有任何意义，因为结论应该是独立的章节。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。
在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。
举个例子：一个<code>h2</code>标签后紧跟若干<code>h4</code>标签的页面，会让使用屏幕阅读器的用户感到困惑。尽管在页面中，使用这 6 个标题标签可以控制内容的的视觉样式，但我们应该使用 CSS 来调整。
最后一点，每个页面应该只有一个<code>h1</code>标签，用来说明页面主要内容。<code>h1</code>标签和其他的标题标签可以让搜索引擎获取页面的大纲。
</section>
## Instructions
<section id="instructions"> Camper Cat希望他的网站上有一个致力于成为忍者的页面。帮助他修复标题，以便他的标记为内容提供语义含义，并显示其部分的正确父子关系。将所有<code>h5</code>标签更改为正确的标题级别，以指示它们是<code>h2</code>标签的子部分。 </section>
<section id='instructions'>
Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮助他修改标题标签，使它们语义化且顺序正确。你需要将所有的<code>h5</code>标题标签调整为恰当的级别（即<code>h3</code>标题标签），使它们是<code>h2</code>标题标签的子级。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该有六个<code>h3</code>标签。
testString: 'assert($("h3").length === 6, "Your code should have six <code>h3</code> tags.");'
- text: 您的代码不应包含任何<code>h5</code>标记。
testString: 'assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");'
- text: '你的代码应该包含 6 个<code>h3</code>标签。'
testString: assert($('h3').length === 6);
- text: '你的代码不应包含 <code>h5</code> 标签。'
testString: assert($('h5').length === 0);
- text: '代码不应该包含 <code>h5</code> 标记.'
testString: assert($("h5").length === 0);
- text: '代码不应该包含 <code>h5</code> 结束标记。'
testString: assert(/\/h5/.test(code)===false);
```
</section>
@ -46,7 +59,6 @@ tests:
<h5>How to Breathe Properly</h5>
<h5>How to Simplify your Life</h5>
</main>
```
</div>
@ -58,7 +70,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

37
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.chinese.md
View File

@ -2,25 +2,33 @@
id: 587d7790367417b2b2512ab0
title: Use tabindex to Add Keyboard Focus to an Element
challengeType: 0
videoUrl: ''
localeTitle: 使用tabindex将键盘焦点添加到元素
videoUrl: 'https://scrimba.com/c/cmzMDHW'
forumTopicId: 301027
localeTitle: 使用 tabindex 将键盘焦点添加到元素中
---
## Description
<section id="description"> HTML <code>tabindex</code>属性有三个与元素键盘焦点相关的不同功能。当它在标签上时，它表示可以关注元素。值（一个正数，负数或零的整数）决定了行为。当用户在页面中进行选项卡时，某些元素（如链接和表单控件）会自动接收键盘焦点。它与HTML源标记中的元素的顺序相同。通过在其上放置<code>tabindex=&quot;0&quot;</code>属性，可以将相同的功能赋予其他元素，例如<code>div</code> ， <code>span</code>和<code>p</code> 。这是一个例子： <code>&lt;div tabindex=&quot;0&quot;&gt;I need keyboard focus!&lt;/div&gt;</code> <strong>注意</strong> <br>负<code>tabindex</code>值（通常为-1）表示元素是可聚焦的，但键盘无法访问。此方法通常用于以编程方式将焦点集中到内容上（例如，当激活用于弹出窗口的<code>div</code>时），并且超出了这些挑战的范围。 </section>
<section id='description'>
HTML 的<code>tabindex</code>属性有三个不同与标签焦点的功能。当它在标签上时，表示标签可以获得焦点。它的值可以是零、负整数及正整数，并决定了标签的行为。
当用户在页面中使用 tab 键时，有些标签，如：链接、表单控件，可以自动获得焦点。它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将<code>tabindex</code>属性值设为 0，来给其他标签赋予相同的功能，如：<code>div</code>、<code>span</code>、<code>p</code>等。举个例子：
<code>&lt;div tabindex=&quot;0&quot;&gt;I need keyboard focus!&lt;/div&gt;</code>
<strong>注意：</strong><br><code>tabindex</code>属性值为负整数（通常为 -1）的标签也是有焦点的，只是不可以通过 tab 键来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：激活用于弹出框的<code>div</code>标签），但是它超出了当前挑战的范围。
</section>
## Instructions
<section id="instructions"> Camper Cat创建了一项新调查，以收集有关其用户的信息。他知道输入字段会自动获得键盘焦点，但他希望确保键盘用户在指示项目时暂停指示。将<code>tabindex</code>属性添加到<code>p</code>标记并将其值设置为“0”。奖金 - 使用<code>tabindex</code>还可以使CSS伪类<code>:focus</code>在<code>p</code>标签上工作。 </section>
<section id='instructions'>
Camper Cat 新建了一个调查，用来收集他的用户的信息。他知道输入框可以自动获得键盘焦点，但他希望确保当键盘用户切换标签时，焦点可以停留在指示文字上。请给<code>p</code>标签添加<code>tabindex</code>属性，并将它的值设置为 0。注意：使用<code>tabindex</code>属性可以使 CSS 伪类<code>:focus</code>在<code>p</code>标签上生效。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该将<code>tabindex</code>属性添加到包含表单指令的<code>p</code>标记。
testString: 'assert($("p").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.");'
- text: 您的代码应将<code>p</code>标记上的<code>tabindex</code>属性设置为值0。
testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.");'
- text: '你应该为表单中的<code>p</code>标签添加<code>tabindex</code>属性。'
testString: assert($('p').attr('tabindex'));
- text: '你应该将<code>p</code>标签的<code>tabindex</code>属性值设置为 0。'
testString: assert($('p').attr('tabindex') == '0');
```
@ -45,11 +53,11 @@ tests:
</header>
<section>
<form>
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<fieldset>
@ -79,7 +87,6 @@ tests:
</section>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
</div>
@ -91,7 +98,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

47
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.chinese.md
View File

@ -2,29 +2,39 @@
id: 587d7790367417b2b2512ab1
title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements
challengeType: 0
videoUrl: ''
localeTitle: 使用tabindex指定多个元素的键盘焦点顺序
videoUrl: 'https://scrimba.com/c/cmzRRcb'
forumTopicId: 301028
localeTitle: 使用 tabindex 指定多个元素的键盘焦点顺序
---
## Description
<section id="description"> <code>tabindex</code>属性还指定元素的确切Tab键顺序。当属性的值被设置为1或更高的正数时，可以实现这一点。设置tabindex =“1”将首先将键盘焦点放在该元素上。然后循环显示指定<code>tabindex</code>值（2,3等）的序列，然后移至默认值和<code>tabindex=&quot;0&quot;</code>项。重要的是要注意，当以这种方式设置Tab键顺序时，它会覆盖默认顺序（使用HTML源）。这可能会使期望从页面顶部开始导航的用户感到困惑。在某些情况下，这种技术可能是必要的，但就可访问性而言，在应用之前要小心。这是一个例子： <code>&lt;div tabindex=&quot;1&quot;&gt;I get keyboard focus, and I get it first!&lt;/div&gt;</code> <code>&lt;div tabindex=&quot;2&quot;&gt;I get keyboard focus, and I get it second!&lt;/div&gt;</code> </section>
<section id='description'>
<code>tabindex</code>属性还可以指定标签的 tab 键顺序，将它的值设置为大于或等于 1 就可以实现这个功能。
<code>tabindex</code>属性值为 1 的标签将首先获得键盘焦点，然后焦点将按照指定的<code>tabindex</code>的值（如：2，3 等）的顺序进行移动，直到回到默认的或<code>tabindex</code>值为 0 的标签上，如此循环。
需要注意的是，当按照这种方式设置 tab 键顺序时，将会覆盖默认的顺序（标签在文档流中出现的顺序）。这可能会令那些希望从页面顶部开始导航的用户感到困惑。这个技术在某些情况下可能是必要的，但是对可访问性而言，在应用时要十分小心。
举个例子：
<code>&lt;div tabindex=&quot;1&quot;&gt;I get keyboard focus, and I get it first!&lt;/div&gt;</code>
<code>&lt;div tabindex=&quot;2&quot;&gt;I get keyboard focus, and I get it second!&lt;/div&gt;</code>
</section>
## Instructions
<section id="instructions"> Camper Cat在他的Inspirational Quotes页面上有一个搜索字段，他计划使用CSS在右上角定位。他希望搜索<code>input</code>并将<code>input</code>表单控件提交为Tab键顺序中的前两项。将<code>tabindex</code>属性设置为“1”到搜索<code>input</code> ， <code>tabindex</code>属性设置为“2”到提交<code>input</code> 。 </section>
<section id='instructions'>
Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 将这个区域定位在页面的右上角。Camper Cat 希望他的搜索<code>input</code>与提交<code>input</code>表单控件是 tab 键顺序的前两项。请为搜索<code>input</code>添加<code>tabindex</code>属性，其值为 1。为提交<code>input</code>添加<code>tabindex</code>属性，其值为 2。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该向搜索<code>input</code>标记添加<code>tabindex</code>属性。
testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");'
- text: 您的代码应该向提交<code>input</code>标记添加<code>tabindex</code>属性。
testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");'
- text: 您的代码应将搜索<code>input</code>标记上的<code>tabindex</code>属性设置为值1。
testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");'
- text: 您的代码应将submit <code>input</code>标记上的<code>tabindex</code>属性设置为值2。
testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");'
- text: '你应该为搜索<code>input</code>标签添加<code>tabindex</code>属性。'
testString: assert($('#search').attr('tabindex'));
- text: '你应该为提交<code>input</code>标签添加<code>tabindex</code>属性。'
testString: assert($('#submit').attr('tabindex'));
- text: '搜索<code>input</code>标签的<code>tabindex</code>属性值应该为 1。'
testString: assert($('#search').attr('tabindex') == '1');
- text: '提交<code>input</code>标签的<code>tabindex</code>属性值应该为 2。'
testString: assert($('#submit').attr('tabindex') == '2');
```
@ -49,12 +59,12 @@ tests:
</header>
<form>
<label for="search">Search:</label>
<input type="search" name="search" id="search">
<input type="submit" name="submit" value="Submit" id="submit">
</form>
<h2>Inspirational Quotes</h2>
<blockquote>
@ -67,7 +77,6 @@ tests:
</blockquote>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
</div>
@ -79,7 +88,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

36
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.chinese.md
View File

@ -2,25 +2,40 @@
id: 587d774e367417b2b2512aa0
title: Wrap Content in the article Element
challengeType: 0
videoUrl: ''
localeTitle: 在文章元素中包装内容
videoUrl: 'https://scrimba.com/c/cPp79S3'
forumTopicId: 301029
localeTitle: 使用 article 元素包裹文章内容
---
## Description
<section id="description"> <code>article</code>是另一个新的HTML5元素，它为您的标记添加了语义含义。 <code>Article</code>是一个sectioning元素，用于包装独立的，自包含的内容。该标记适用于博客条目，论坛帖子或新闻文章。确定内容是否可以独立通常是一种判断调用，但您可以使用几种简单的测试。问问自己是否删除了所有周围环境，该内容是否仍然有意义？类似地，对于文本，如果它在RSS提要中，内容是否会保留？请记住，使用辅助技术的人们依赖于有组织的，语义上有意义的标记来更好地理解您的工作。 <strong>关于<code>section</code>和<code>div</code>注意事项</strong> <br> <code>section</code>元素也是HTML5的新元素，与<code>article</code>语义含义略有不同。 <code>article</code>适用于独立内容，一个<code>section</code>用于分组与主题相关的内容。根据需要，它们可以在彼此之间使用。例如，如果一本书是<code>article</code> ，那么每章都是一个<code>section</code> 。当内容组之间没有关系时，请使用<code>div</code> 。 <blockquote> &lt;div&gt; - 分组内容<br> &lt;section&gt; - 分组相关内容<br> &lt;article&gt; - 分组独立，自包含的内容<br></blockquote></section>
<section id='description'>
<code>article</code>是另一个具有语义化特性的 HTML5 新标签。<code>article</code>是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。
有些技巧可以用来判断内容是否独立，像是如果内容脱离了上下文，是否仍然有意义？类似地，对于 RSS 提要中的文本，它是否有意义？
请牢记，使用辅助设备的用户依赖组织良好的、语义化的标签来获取页面中的信息。
<strong>请注意<code>section</code>和<code>div</code>的区别：</strong><br><code>section</code>也是一个 HTML5 新标签，与<code>article</code>标签的语义含义略有不同。<code>article</code>用于独立的、完整的内容，而<code>section</code>用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个<code>article</code>的话，那么每个章节就是<code>section</code>。当内容组之间没有联系时，可以使用<code>div</code>。
```html
<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content
```
</section>
## Instructions
<section id="instructions"> Camper Cat使用<code>article</code>标签将帖子包装在他的博客页面上，但他忘了在最顶层的帖子中使用它们。更改<code>div</code>标签以改为使用<code>article</code>标签。 </section>
<section id='instructions'>
Camper Cat 打算使用<code>article</code>标签来呈现他的博客页面里的帖子，但是他忘记在顶部的帖子上使用它。请使用<code>article</code>标签来代替<code>div</code>标签。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该有三个<code>article</code>标签。
testString: 'assert($("article").length == 3, "Your code should have three <code>article</code> tags.");'
- text: 您的代码不应包含任何<code>div</code>标记。
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: '你的代码中应该有 3 个<code>article</code>标签。'
testString: assert($('article').length == 3);
- text: '你的代码不应包含<code>div</code>标签。'
testString: assert($('div').length == 0);
```
@ -53,7 +68,6 @@ tests:
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
</main>
```
</div>
@ -65,7 +79,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>

64
curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.chinese.md
View File

@ -2,31 +2,54 @@
id: 587d778b367417b2b2512aa7
title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
challengeType: 0
videoUrl: ''
localeTitle: 在字段集元素中包裹单选按钮以获得更好的可访问性
videoUrl: 'https://scrimba.com/c/cVJVefw'
forumTopicId: 301030
localeTitle: 将单选按钮包裹在 fieldset 元素中以获得更好的可访问性
---
## Description
<section id="description">下一个表单主题包括单选按钮的可访问性。每个选项都有一个<code>label</code>其中一个<code>for</code>属性与最后一个挑战中涵盖的相应项目的<code>id</code>相关联。由于单选按钮通常位于用户必须选择一个的组中，因此有一种方法可以在语义上显示选项是一组的一部分。 <code>fieldset</code>标记围绕整个单选按钮组以实现此目的。它通常使用<code>legend</code>标记来提供分组的描述，屏幕阅读器可以为<code>fieldset</code>元素中的每个选项读取该描述。当选项不言自明时，如性别选择，则不需要<code>fieldset</code>包装器和<code>legend</code>标签。使用带有每个单选按钮的<code>for</code>属性的<code>label</code>就足够了。这是一个例子： <blockquote> &lt;FORM&gt; <br> &lt;字段集&gt; <br> &lt;legend&gt;选择以下三个项目之一：&lt;/ legend&gt; <br> &lt;input id =“one”type =“radio”name =“items”value =“one”&gt; <br> &lt;label for =“one”&gt; Choice One &lt;/ label&gt; &lt;br&gt; <br> &lt;input id =“two”type =“radio”name =“items”value =“two”&gt; <br> &lt;label for =“two”&gt;选择二&lt;/ label&gt; &lt;br&gt; <br> &lt;input id =“three”type =“radio”name =“items”value =“three”&gt; <br> &lt;label for =“three”&gt;选择三&lt;/ label&gt; <br> &lt;/字段集&gt; <br> &lt;/ FORM&gt; <br></blockquote></section>
<section id='description'>
下一个表单主题与单选按钮的可访问性有关。在上一个挑战中，单选按钮含有一个拥有<code>for</code>属性的<code>label</code>标签，<code>for</code>属性指向相关选项的<code>id</code>。然而单选按钮通常成组出现，用户必须其中选择一项。本次挑战介绍一种可以语义化呈现单选按钮组的方法。
使用<code>fieldset</code>标签将单选按钮组包含在里面就可以实现这个目的，通常还会使用<code>legend</code>标签来为单选按钮组提供文字说明。屏幕阅读器也可以朗读这些文字。
当选项的含义很明确时，如：性别选择，<code>fieldset</code>标签与<code>legend</code>标签就可以省略。这时，使用含有<code>for</code>属性的<code>label</code>标签就足够了。
举个例子：
```html
<form>
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>
```
</section>
## Instructions
<section id="instructions"> Camper Cat在注册其电子邮件列表时需要有关其用户的忍者级别的信息。他增加了一组单选按钮，并从我们过去的经验教训使用标签与标签<code>for</code>每个选择属性。去野营猫！但是，他的代码仍需要一些帮助。将单选按钮周围的<code>div</code>标签更改为<code>fieldset</code>标签，并将其中的<code>p</code>标签更改为<code>legend</code> 。 </section>
<section id='instructions'>
当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。通过上一个挑战的学习，Camper Cat 创建了一组单选按钮，并为每个选项的<code>label</code>标签添加了<code>for</code>属性，但是 Camper Cat 的代码依然需要你的帮助。请将包含单选按钮组的<code>div</code>标签替换为<code>fieldset</code>标签；将<code>p</code>标签替换为<code>legend</code>标签。
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: 您的代码应该在单选按钮集周围有一个<code>fieldset</code>标记。
testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");'
- text: 确保您的<code>fieldset</code>元素具有结束标记。
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");'
- text: 您的代码应该在文本周围有一个<code>legend</code>标记，询问用户的忍者级别。
testString: 'assert($("legend").length == 1, "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.");'
- text: 您的代码不应包含任何<code>div</code>标记。
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: 你的代码不应该在文本周围有一个<code>p</code>标记，询问用户是什么级别的忍者。
testString: 'assert($("p").length == 4, "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.");'
- text: '你的代码应该使用 1 个<code>fieldset</code>标签包含单选按钮组。'
testString: assert($('fieldset').length == 1);
- text: '确保<code>fieldset</code>标签是闭合的。'
testString: assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length);
- text: '你的代码应该有 1 个包含询问用户忍者等级文字的<code>legend</code>标签。'
testString: assert($('legend').length == 1);
- text: '你的代码不应该含有<code>div</code>标签。'
testString: assert($('div').length == 0);
- text: '你的代码不应该有包含询问用户忍者等级文字的<code>p</code>标签。'
testString: assert($('p').length == 4);
```
@ -47,8 +70,8 @@ tests:
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<!-- Add your code below this line -->
<div>
<p>What level ninja are you?</p>
@ -60,8 +83,8 @@ tests:
<label for="master">Master</label>
</div>
<!-- Add your code above this line -->
<input type="submit" name="submit" value="Submit">
</form>
</section>
@ -81,7 +104,6 @@ tests:
</article>
<footer>&copy; 2018 Camper Cat</footer>
</body>
```
</div>
@ -93,7 +115,9 @@ tests:
## Solution
<section id='solution'>
```js
```html
// solution required
```
</section>