diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.chinese.md index 58d5296db2..3c9bc1f755 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.chinese.md @@ -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 -
很可能你在其他挑战中看到了img标签的alt属性。 Alt文本描述图像的内容并提供文本替代。这有助于在图像无法加载或用户无法看到的情况下。它也被搜索引擎用来理解图像包含的内容，以便将其包含在搜索结果中。这是一个例子： <img src="importantLogo.jpeg" alt="Company logo">有视觉障碍的人依靠屏幕阅读器将网络内容转换为音频界面。如果仅以视觉方式呈现，他们将无法获取信息。对于图像，屏幕阅读器可以访问alt属性并读取其内容以提供关键信息。好的alt文字虽然简短但具有描述性，并且旨在简要地传达图像的含义。您应该始终在图像上包含alt属性。根据HTML5规范，现在认为这是强制性的。
+
+在其他挑战里你应该已经见到过img标签的alt属性了。alt属性中的文本作为备用文字描述了图片的内容，这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如： +<img src="importantLogo.jpeg" alt="Company logo"> +视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别alt属性，朗读其中的内容，来告知用户图片包含的关键信息。 +良好的alt文本可以简明扼要地描述图片信息，所以你应该为图片添加alt属性。另外，HTML5 标准也在考虑强制要求对图片添加alt属性。 +
## Instructions -
Camper Cat就是编码高手和实际上的高手，他建立一个网站来分享他的知识。他想要使用的个人资料图片显示了他的技能，所有网站访问者都应该欣赏。在img标签中添加alt属性，这解释了Camper Cat正在做空手道。 （图像src没有链接到实际文件，因此您应该在显示中看到alt文本。）
+
+ +碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。在这个网站中，他使用一张简介图片来展示技能。给img标签添加一个alt属性，说明 Camper Cat 在学习空手道（图片的src属性没有指向任何链接，因此你可以看到alt属性中的文本）。 + +
## Tests
```yml tests: - - text: 你的img标签应该有一个alt属性，它不应该是空的。 - testString: 'assert($("img").attr("alt"), "Your img tag should have an alt attribute, and it should not be empty.");' + - text: '你的img标签应该包含一个非空的alt属性。' + testString: assert($('img').attr('alt')); ``` @@ -31,7 +41,6 @@ tests: ```html - ``` @@ -43,7 +52,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.chinese.md index 98869c2e0a..92f5083df7 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.chinese.md @@ -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 -
表单通常包含input字段，可用于创建多个不同的表单控件。此元素的type属性指示将创建哪种输入。您可能已经注意到text并在先前的挑战中submit输入类型，HTML5引入了一个指定date字段的选项。根据浏览器支持，当日期选择器处于焦点时，它会在input字段中显示，这使得所有用户都可以更轻松地填写表单。对于旧版浏览器，该类型将默认为text ，因此有助于向用户显示标签中的预期日期格式或以及占位符文本以防万一。这是一个例子：
<label for =“input1”>输入日期：</ label>
<input type =“date”id =“input1”name =“input1”>
+
+表单中经常出现input标签，它可以用来创建多种表单控件。它的type属性指定了所要创建的input标签类型。 +在以前的挑战中，你可能已经见过text与submit类型的input标签，HTML5 引入了date类型来创建时间选择器。依赖于浏览器的支持，当点击input标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。 +对于旧版本的浏览器，type属性的默认值是text。这种情况下，可以利用label标签或者占位文本来提示用户input标签的输入类型为日期。 +举个例子： + +```html + + +``` + +
## Instructions -
Camper Cat正在举办一场真人快打比赛，并想让他的竞争对手看看哪个日期效果最佳。添加一个input标记，其type属性为“date”， id属性为“pickdate”， name属性为“date”。
+
+Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。请为 Camper Cat 的页面添加一个input标签，其type属性值为 date，id属性为 pickdate，name属性为 date。 +
## Tests
```yml tests: - - text: 您的代码应为日期选择器字段添加一个input标记。 - testString: 'assert($("input").length == 2, "Your code should add one input tag for the date selector field.");' - - text: 您的input标记应具有值为date的type属性。 - testString: 'assert($("input").attr("type") == "date", "Your input tag should have a type attribute with a value of date.");' - - text: 您的input标记应具有值为pickdate的id属性。 - testString: 'assert($("input").attr("id") == "pickdate", "Your input tag should have an id attribute with a value of pickdate.");' - - text: 您的input标记应具有值为date的name属性。 - testString: 'assert($("input").attr("name") == "date", "Your input tag should have a name attribute with a value of date.");' + - text: '你的代码中应该有 1 个input标签。' + testString: assert($('input').length == 2); + - text: '你的input标签的type属性值应该为 date。' + testString: assert($('input').attr('type') == 'date'); + - text: '你的input标签的id属性值应该为 pickdate。' + testString: assert($('input').attr('id') == 'pickdate'); + - text: '你的input标签的name属性值应该为 date。' + testString: assert($('input').attr('name') == 'date'); ``` @@ -46,20 +60,19 @@ tests:

Tell us the best date for the competition

- + - +
- ``` @@ -71,7 +84,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.chinese.md index 2a1e169133..825a33920c 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.chinese.md @@ -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 -
有各种形式的色盲。这些范围可以从对特定波长的光的灵敏度降低到根本无法看到颜色。最常见的形式是检测果岭的灵敏度降低。例如，如果两个相似的绿色是内容的前景色和背景色，则色盲用户可能无法区分它们。关闭颜色可以被认为是色轮上的邻居，并且在传达重要信息时应该避免这些组合。 注意
一些在线颜色挑选工具包括颜色如何针对不同类型的颜色盲目出现的视觉模拟。除在线对比度检查计算器外，这些都是很好的资源。
+
+色盲的形式有很多种，它的表现可以从对特定波长光波的感知度较低，到几乎无法看到颜色。最常见的形式是对绿色的低感知度。 +例如：如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法识别它们。可以认为色轮上相邻的颜色是相近的，在表示重要信息的时候应避免使用这些颜色的组合。 +注意：
一些在线颜色拾取器有色盲模拟功能，可以模拟颜色在不同形式色盲的视觉中的呈现结果，它们和在线对比度检查器一样，都是很好的工具。 +
## Instructions -undefined +
+Camper Cat 正在测试一个重要按钮的不同样式。在色轮上，黄色（#FFFF33）的background-color和绿色（#33FF33）的文本color是相邻的色调，一些色盲用户几乎无法区分它们，而且这两个颜色的亮度相近，对比度太小。为了解决这两个问题，请将文本的color修改为深蓝色（#003366）。 +
## Tests
```yml tests: - - text: 您的代码应将button的文本color更改为深蓝色。 - testString: 'assert($("button").css("color") == "rgb(0, 51, 102)", "Your code should change the text color for the button to the dark blue.");' + - text: 'button的文本color应该是深蓝色。' + testString: assert($('button').css('color') == 'rgb(0, 51, 102)'); ``` @@ -46,7 +53,6 @@ tests: - ``` @@ -58,7 +64,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.chinese.md index 58abd959fa..70cec22767 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.chinese.md @@ -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 -
颜色是视觉设计的重要组成部分，但它的使用引入了两个可访问性问题。首先，不应仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器用户不会看到它。其次，前景色和背景色需要足够的对比度，因此色盲用户可以区分它们。以前的挑战包括解决第一个问题的文本替代方案。最后一项挑战引入了对比度检查工具来帮助第二个。 WCAG建议的对比度为4.5：1适用于颜色使用以及灰度组合。色盲用户无法区分某些颜色与其他颜色 - 通常是色调，但有时也很轻。您可能会想起使用前景色和背景色的相对亮度（或亮度）值来计算对比度。在实践中，通过使用颜色对比度检查器使较暗的颜色变暗并使较浅的颜色变淡来达到4.5：1的比例。色轮上较暗的颜色被认为是蓝色，紫罗兰，洋红色和红色，而较浅的颜色是橙色，黄色，绿色和蓝绿色。
+
+颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以识别它们。 +在之前的挑战中，我们用文本备用方案解决了第一个问题。在上一个挑战中，我们使用对比度检测工具解决了第二问题。WCAG 建议为颜色及灰度组合使用 4.5 : 1 的对比度。 +色盲用户无法将一些颜色与另一些颜色区分出来——通常是因为色调，也有时候是因为亮度。你可能想起对比度是用前景色与背景色的相对亮度计算的。 +实践中，在对比度检测工具的帮助下，我们可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5 : 1。在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。 +
## Instructions -
Camper Cat正在尝试使用颜色作为他的博客文字和背景，但他目前的绿色background-color与栗色文字color具有2.5：1的对比度。您可以轻松调整颜色的亮度，因为他通过更改第三个参数使用CSS hsl()属性（代表色调，饱和度，亮度）来声明它们。将background-color亮度值从35％增加到55％，并将color亮度值从20％降低到15％。这将对比度提高到5.9：1。
+
+Camper Cat 正在尝试为他的博客文本与背景使用颜色，但是他目前使用的组合是绿色的background-color与栗色的color，它们的对比度为 2.5 : 1。Camper Cat 使用了 CSS 的hsl()（hsl 为 hue, saturation, lightness 的缩写）属性来设置颜色，所以通过修改hsl()属性的第三个参数，可以很容易地调整颜色的亮度。请将background-color的亮度从 35% 增加到 55%，color的亮度从 20% 减少到 15%，这样可以使对比度达到 5.9 : 1。 +
## Tests
```yml tests: - - text: 您的代码只应将文本color属性的亮度值更改为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 color property to a value of 15%.");' - - text: 您的代码应仅将background-color属性的亮度值更改为值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 background-color property to a value of 55%.");' + - text: '你应该将color属性的亮度值设置为 15%。' + testString: 'assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));' + - text: '你应该将background-color属性的亮度值设置为 55%。' + testString: 'assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));' ``` @@ -50,7 +58,6 @@ tests:

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.

- ``` @@ -62,7 +69,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.chinese.md index 8d8c57d10a..04dd89fe8a 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.chinese.md @@ -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 -
屏幕阅读器用户对其设备读取的内容类型有不同的选择。这包括跳过（或覆盖）地标元素，跳转到主要内容或从标题中获取页面摘要。另一种选择是仅听取页面上可用的链接。屏幕阅读器通过阅读链接文本或锚（ a ）标签之间的内容来完成此操作。列出“点击此处”或“阅读更多”链接的作用不大。相反，您应该在a标签中使用简短但具有描述性的文本，以便为这些用户提供更多资讯。
+
+屏幕阅读器用户可以选择其设备读取的内容的类型，这包括跳转到（或跳过）标志标签，跳转到主要内容，或者从标题中获取页面摘要，还可以选择只听取页面中的有效链接。 +屏幕阅读器通过阅读链接文本或者锚点标签（a）之间的内容来完成这个操作。使用 "click here" 或者 "read more" 作为链接文本并没有多少帮助。相反地，应该在a标签中使用简洁的描述性语言来为用户提供更多的信息。 +
## Instructions -
如果没有上下文，Camper Cat正在使用的链接文字不是很具描述性。移动 a 标签，使它们环绕文本“有关电池的信息”而不是环绕着“点击此处”。
+
+Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。请修改锚点标签（a），将其包含的文本从 "click here" 改为 "information about batteries"。 +
## Tests
```yml tests: - - text: 您应将a标签从“点击这里”移动，让其环绕在“关于电池的信息”。 - testString: 'assert($("a").text().match(/^(information about batteries)$/g), "Your code should move the anchor a tags from around the words "Click here" to wrap around the words "information about batteries".");' - - text: 确保您a元素具有结束标记。 - testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(//g).length, "Make sure your a element has a closing tag.");' + - text: '请修改a标签，将其包含的文本从 "click here" 改为 "information about batteries"。' + testString: assert($('a').text().match(/^(information about batteries)$/g)); + - text: 'a元素应该有一个href属性，且值为空字符串' + testString: assert($('a').attr('href') === ''); + - text: 'a 元素应该有一个结束标记' + testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(//g).length); ``` @@ -41,7 +49,6 @@ tests:

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. Click here for information about batteries

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

A sound clip of Zersiax's screen reader in action.

- - - + + +
- ``` @@ -65,7 +81,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.chinese.md index 2efa083910..463185e8a9 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.chinese.md @@ -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 -
HTML5引入了figure元素以及相关的figcaption 。这些项目一起使用，包含可视化表示（如图像，图表或图表）及其标题。通过语义分组相关内容和提供解释figure的文本替代，这提供了双倍的可访问性提升。对于图表等数据可视化，可以使用标题简要说明视力障碍用户的趋势或结论。另一个挑战包括如何为屏幕阅读器用户在屏幕外（使用CSS）移动图表数据的表格版本。这是一个例子 - 请注意， figcaption位于figure标签内部，可以与其他元素组合：
<图>
<img src =“roundhouseDestruction.jpeg”alt =“露营猫执行圆屋踢的照片”>
点击
<figcaption>
Master Camper Cat展示了适当形式的圆屋踢。
</ figcaption>
</图>
+
+HTML5 引入了figure标签以及与之相关的figcaption标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。这样通过语义化对内容进行分组并配以用于解释figure的文字，可以极大地提升内容的可访问性。 +对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何处理那些超出屏幕可视范围（使用 CSS）的表格版本的图表数据，以使屏幕阅读器用户也可以获取信息。 +举个例子——注意figcaption包含在figure标签中，并且可以与其他标签组合使用： + +```html +
+ Photo of Camper Cat executing a roundhouse kick +
+
+ Master Camper Cat demonstrates proper form of a roundhouse kick. +
+
+``` + +
## Instructions -
Camper Cat正在努力创建一个堆积条形图，显示每周花在隐形，战斗和武器上的训练时间。通过将用于figure标记的div标签和包含标题的p标签更改为figcaption标记，帮助他更好地构建页面。
+
+Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。请帮助完善他的页面，将他的用于呈现图表的div标签修改为figure标签，用于呈现图表标题的p标签改为figcaption标签。 +
## Tests
```yml tests: - - text: 您的代码应该有一个figure标记。 - testString: 'assert($("figure").length == 1, "Your code should have one figure tag.");' - - text: 您的代码应该有一个figcaption标记。 - testString: 'assert($("figcaption").length == 1, "Your code should have one figcaption tag.");' - - text: 您的代码不应包含任何div标记。 - testString: 'assert($("div").length == 0, "Your code should not have any div tags.");' - - text: 您的代码不应包含任何p标记。 - testString: 'assert($("p").length == 0, "Your code should not have any p tags.");' - - text: figcaption应该是figure标签的子figcaption 。 - testString: 'assert($("figure").children("figcaption").length == 1, "The figcaption should be a child of the figure tag.");' - - text: 确保您的figure元素有一个结束标记。 - testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/
/g).length, "Make sure your figure element has a closing tag.");' + - text: '你的代码应该有 1 个figure标签。' + testString: assert($('figure').length == 1); + - text: '你的代码应该有 1 个figcaption标签。' + testString: assert($('figcaption').length == 1); + - text: '你的代码不应有div标签。' + testString: assert($('div').length == 0); + - text: '你的代码不应有p标签。' + testString: assert($('p').length == 0); + - text: 'figcaption应该为figure的子标签。' + testString: assert($('figure').children('figcaption').length == 1); + - text: '请确保你的figure标签是闭合的。' + testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/
/g).length); ``` @@ -53,7 +71,7 @@ tests:
- +
@@ -61,7 +79,7 @@ tests:

Breakdown per week of time to spend training in stealth, combat, and weapons.

- +

Stealth & Agility Training

@@ -81,7 +99,6 @@ tests:
© 2018 Camper Cat
- ``` @@ -93,7 +110,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.chinese.md index 755c1429af..ce4bb08464 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.chinese.md @@ -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 -
使用语义HTML标记提高可访问性适用于使用适当的标记名称和属性。接下来的几个挑战包括使用表单中的属性的一些重要场景。 label标签包装特定表单控件项的文本，通常是选项的名称或标签。这与项目的意义联系在一起，使表单更具可读性。 label标签上的for属性明确地将该label与表单控件相关联，并由屏幕阅读器使用。您在“基本HTML”部分的课程中了解了单选按钮及其标签。在该课程中，我们将单选按钮输入元素与标签文本一起包装在label元素中，以使文本可单击。另一种实现此目的的方法是使用本课程中介绍的for属性。 for属性的值必须与表单控件的id属性的值相同。这是一个例子：
<FORM>
<label for =“name”>名称：</ label>
<input type =“text”id =“name”name =“name”>
</ FORM>
+
+合理地使用语义化的 HTML 标签和属性可以提升页面可访问性。在接下来的挑战中，你将会看到使用表单属性的重要场景。 +label标签用于呈现特定表单控件的文本，通常是选项的名称。这些文本代表了选项的含义，使表单具有更好的可读性。label标签的for属性指定了与label绑定的表单控件，并且屏幕阅读器也会读取for属性。 +在 HTML 基础章节的课程中，我们已经了解了单选按钮标签。在那节课程中，我们为了可以点击单选按钮的名称，将input标签放在label标签中。在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用for属性。 +for属性的值必须与表单控件的id属性的值相同。举个例子： + +```html +
+ + +
+``` + +
## Instructions -
Camper Cat期望对他有思想的博客文章感兴趣，并希望包含一个电子邮件注册表单。在电子邮件label上添加与其input字段中的id匹配的for属性。
+
+Camper Cat 希望他的博客文章能有很多订阅，他想添加一个电子邮件注册表单。请为表示电子邮件的label标签添加for属性，并设置属性值与input标签的id属性值相同。 +
## Tests
```yml tests: - - text: 您的代码应该在label标签上具有非空的for属性。 - testString: 'assert($("label").attr("for"), "Your code should have a for attribute on the label tag that is not empty.");' - - text: 您的for属性值应与电子邮件input中的id值匹配。 - testString: 'assert($("label").attr("for") == "email", "Your for attribute value should match the id value on the email input.");' + - text: '你的label标签应该有 1 个非空的for属性。' + testString: assert($('label').attr('for')); + - text: 'for属性的值应该与input标签的 id 值 email 相同。' + testString: assert($('label').attr('for') == 'email'); ``` @@ -39,12 +55,12 @@ tests:

Sign up to receive Camper Cat's blog posts by email here!

- - + + - - + +
@@ -64,7 +80,6 @@ tests:
© 2018 Camper Cat
- ``` @@ -76,7 +91,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.chinese.md index ff0017836a..b197bc3940 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.chinese.md @@ -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 -
前景色和背景色之间的低对比度会使文本难以阅读。充足的对比度可以提高内容的可读性，但“足够”究竟意味着什么呢？ Web内容可访问性指南（WCAG）建议正常文本的对比度至少为4.5：1。通过比较两种颜色的相对亮度值来计算该比率。对于相同的颜色，或者没有对比度，其范围从1：1到白色与黑色的21：1，最强的对比度。网上有许多对比度检查工具可以为您计算这个比率。
+
+低对比度的前景色与背景色会使文本难以阅读。足够的对比度可以提高内容的可读性，但是怎样的对比度才算是 “足够” 的？ +Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。对比度是通过比较两种颜色的相对亮度值来计算的，其范围是从相同颜色的 1 : 1（无对比度）到白色与黑色的最高对比度 21 : 1。网上有很多可以帮助你计算对比度的工具。 +
## Instructions -
Camper Cat在他最近的博客文章中选择浅灰色文本在白色背景上具有1.5：1的对比度，使其难以阅读。将文本color从当前灰色（ #D3D3D3 ）更改为深灰色（ #636363 ），将对比度提高到6：1。
+
+Camper Cat 为他的博客选择了白色背景，浅灰色文字，对比度为 1.5 : 1，这使博客文章难以阅读。请将文字的color从当前的浅灰色（#D3D3D3）修改为深灰色（#636363），以使对比度提升到 6 : 1。 +
## Tests
```yml tests: - - text: 您的代码应该改变文字color为body的深灰色。 - testString: 'assert($("body").css("color") == "rgb(99, 99, 99)", "Your code should change the text color for the body to the darker gray.");' - - text: 您的代码不应更改body的background-color 。 - testString: 'assert($("body").css("background-color") == "rgb(255, 255, 255)", "Your code should not change the background-color for the body.");' + - text: '你应该将body的color修改为深灰色。' + testString: assert($('body').css('color') == 'rgb(99, 99, 99)'); + - text: '你不应该修改body的background-color。' + testString: assert($('body').css('background-color') == 'rgb(255, 255, 255)'); ``` @@ -50,7 +56,6 @@ tests:

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.

- ``` @@ -62,7 +67,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.chinese.md index ae592326ef..6147676f29 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.chinese.md @@ -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 -
HTML5引入了许多新元素，为开发人员提供了更多选项，同时还包含了辅助功能。这些标签包括main ， header ， footer ， nav ， article和section等。默认情况下，浏览器渲染这些元素与简单的div类似。但是，在适当的地方使用它们会在标记中提供额外的含义。标记名称本身可以指示它包含的信息类型，这为该内容添加了语义含义。辅助技术可以访问此信息，以便为其用户提供更好的页面摘要或导航选项。 main元素用于包装（您猜对了）主要内容，每页应该只有一个。它旨在包含与页面中心主题相关的信息。它并不意味着包含跨页面重复的项目，例如导航链接或横幅。 main标签还具有嵌入式地标功能，辅助技术可用于快速导航到主要内容。如果您曾在页面顶部看到“跳转到主要内容”链接，则使用主标签会自动为辅助设备提供该功能。
+
+HTML5 添加了诸如main、header、footer、nav、article、section等大量新标签，开发人员提供更多的选择，也兼顾了无障碍特性。 +默认情况下，浏览器呈现这些新标签的方式与div相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。 +main标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。 +main标签的语义化特性可以使辅助技术快速定位到页面的主体。 如果页面顶部有一个 “跳转到主要内容” 的链接，那么辅助设备会自动识别main标签，实现这个功能。 +
## Instructions -
Camper Cat对他的忍者武器页面有一些重要的想法。通过在header和footer之间添加打开和关闭main标记来帮助他设置标记（在其他挑战中涵盖）。暂时保持main标签为空。
+
+Camper Cat 对他的忍者武器页面有一些新的想法，请帮助他在header标签和footer标签（在接下来的挑战中会详细介绍）之间添加完整main标签来使页面语义化。在这个挑战中，你可以先让main为空。 +
## Tests
```yml tests: - - text: 您的代码应该有一个main标记。 - testString: 'assert($("main").length == 1, "Your code should have one main tag.");' - - text: main标记应位于结束header标记和开放footer标记之间。 - testString: 'assert(code.match(/<\/header>\s*?
\s*?<\/main>/gi), "The main tags should be between the closing header tag and the opening footer tag.");' + - text: '你的代码应该有一个main标签。' + testString: assert($('main').length == 1); + - text: 'main标签应该在header标签与footer标签之间。' + testString: assert(code.match(/<\/header>\s*?
\s*?<\/main>/gi)); ``` @@ -39,7 +47,6 @@ tests:
- ``` @@ -51,7 +58,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.chinese.md index bfd4675968..5b92baf20d 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.chinese.md @@ -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 -
在上一个挑战中，您了解到在img标记上包含alt属性是必需的。但是，有时图像与已经描述它们的标题分组，或仅用于装饰。在这些情况下， alt文本可能看似多余或不必要。在已经使用文本内容解释图像或者没有为页面添加含义的情况下， img仍然需要alt属性，但可以将其设置为空字符串。这是一个例子： <img src="visualDecoration.jpeg" alt="">背景图片通常也属于“装饰”标签。但是，它们通常应用CSS规则，因此不是标记屏幕阅读器进程的一部分。 注意
对于带有标题的图像，您可能仍希望包含alt文本，因为它有助于搜索引擎对图像内容进行编目。
+
+在上一个挑战中，我们了解到img标签必须有一个alt属性。在图片已经有了文字说明，或者仅仅为了美化页面的情况下，alt属性似乎有些多余。 +即便如此，我们仍然需要为img标签添加alt属性，这时可以把它设为空，例如： +<img src="visualDecoration.jpeg" alt=""> +背景图片通常起装饰作用，而且含有 CSS 类，所以屏幕阅读器无法读取。 +注意：
对于有标题的图片，我们依然需要添加alt属性，因为这样有助于搜索引擎记录图片内容。 +
## Instructions -
Camper Cat已为其网站的博客部分编写了一个骨架页面。他计划在他的两篇文章之间用武士刀的装饰图像添加一个视觉中断。将alt属性添加到img标记并将其设置为空字符串。 （请注意，图像src不会链接到实际文件 - 不要担心显示屏中没有显示剑。）
+
+Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的alt属性（注意：这里img标签的src属性提供的链接是无效的，因此页面上可能不会显示图片，不用担心）。 +
## Tests
```yml tests: - - text: 你的img标签应该有一个alt属性。 - testString: 'assert(!($("img").attr("alt") == undefined), "Your img tag should have an alt attribute.");' - - text: alt属性应设置为空字符串。 - testString: 'assert($("img").attr("alt") == "", "The alt attribute should be set to an empty string.");' + - text: '你的img标签应该包含alt属性。' + testString: assert(!($('img').attr('alt') == undefined)); + - text: 'alt属性对应的值应该为空。' + testString: assert($('img').attr('alt') == ''); ``` @@ -44,7 +53,6 @@ tests:

Is Chuck Norris a Cat Person?

To Come...

- ``` @@ -56,7 +64,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.chinese.md index 7583a09b49..df5bd11b2f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.chinese.md @@ -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 -
您是否注意到目前为止所有应用的可访问性问题都没有使用任何CSS？这是为了展示逻辑文档大纲的重要性，并在介绍视觉设计方面之前在您的内容周围使用具有语义意义的标记。但是，当您想要在视觉上隐藏仅供屏幕阅读器使用的内容时，CSS的魔力还可以改善页面的可访问性。当信息采用可视格式（如图表）时会发生这种情况，但屏幕阅读器用户需要使用替代演示（如表格）来访问数据。 CSS用于将屏幕阅读器元素定位在浏览器窗口的可视区域之外。这是完成此任务的CSS规则的示例：
.sr-only {
位置：绝对;
左：-10000px;
宽度：1px;
身高：1px;
顶部：汽车;
溢出：隐藏;
}
注意
以下CSS方法不会做同样的事情：
  • display: none;或visibility: hidden;隐藏每个人的内容，包括屏幕阅读器用户
  • 像素大小的零值，例如width: 0px; height: 0px;从文档流中删除该元素，这意味着屏幕阅读器将忽略它
+
+到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。 +然而，如果我们需要在页面中添加一些只对屏幕阅读器可见的内容时，CSS 可以提升页面的可访问性。当信息以可视化形式（如：图表）展示，而屏幕阅读器用户需要一种替代方式（如：表格）来获取信息时，就会出现这种情况。CSS 被用来将这些仅供屏幕阅读器使用的信息定位到浏览器可见区域之外。 +举个例子： + +```css +.sr-only { + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + top: auto; + overflow: hidden; +} +``` + +注意：
下面的 CSS 代码与上面的结果不同： +
    +
  • display: none;或visibility: hidden;会把内容彻底隐藏起来，对于屏幕阅读器也不例外。
    • +
  • 如果把值设置为 0px，如width: 0px; height: 0px;，意味着让元素脱离文档流，这样做也会让元素被屏幕阅读器忽略。
    • +
+
## Instructions -
Camper Cat为他​​的培训页面创建了一个非常酷的堆积条形图，并将数据放入一个表格中，供视障用户使用。该表已经有一个sr-only类，但CSS规则尚未填写。给position一个绝对值， left是-10000px值， width和height都是1px值。
+
+Camper Cat 为他的训练页面创建了一个十分酷炫的条形图，并将数据放入表格中，供屏幕阅读器用户使用。表格已经有了一个sr-only类，但是还没有添加 CSS 规则。请设置position的值为 absolute，left 的值为 -10000px，width与height的值为 1px。 +
## Tests
```yml tests: - - text: 您的代码应该将sr-only类的position属性设置为absolute的值。 - testString: 'assert($(".sr-only").css("position") == "absolute", "Your code should set the position property of the sr-only class to a value of absolute.");' - - text: 您的代码应将sr-only类的left属性设置为-10000px的值。 - testString: 'assert($(".sr-only").css("left") == "-10000px", "Your code should set the left property of the sr-only class to a value of -10000px.");' - - text: 您的代码应将sr-only类的width属性设置为1像素的值。 - testString: 'assert(code.match(/width:\s*?1px/gi), "Your code should set the width property of the sr-only class to a value of 1 pixel.");' - - text: 您的代码应将sr-only类的height属性设置为1像素的值。 - testString: 'assert(code.match(/height:\s*?1px/gi), "Your code should set the height property of the sr-only class to a value of 1 pixel.");' + - text: 'sr-only类中的position属性的值应为 absolute。' + testString: assert($('.sr-only').css('position') == 'absolute'); + - text: 'sr-only类中的left属性的值应为 -10000px。' + testString: assert($('.sr-only').css('left') == '-10000px'); + - text: 'sr-only类中的width属性的值应为 1px。' + testString: 'assert(code.match(/width:\s*?1px/gi));' + - text: 'sr-only类中的height属性的值应为 1px。' + testString: 'assert(code.match(/height:\s*?1px/gi));' ``` @@ -75,7 +99,7 @@ tests: Stealth & Agility Combat Weapons - Total + Total @@ -120,7 +144,6 @@ tests:
© 2018 Camper Cat
- ``` @@ -132,7 +155,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.chinese.md new file mode 100644 index 0000000000..31c87c3be2 --- /dev/null +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.chinese.md @@ -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 +
+HTML 提供accesskey属性，用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加便捷。 +HTML5 允许在任何标签上使用这个属性。该属性 （如链接、按钮、表单控件等）十分有用。 +举个例子： +<button accesskey="b">Important Button</button> +
+ +## Instructions +
+Camper Cat 希望为他的两篇博客的标题的链接设置快捷键，以使用户可以快速导航到文章的全文。请为这两个链接添加accesskey属性，并将第一个设置为 "g"（表示 Garfield），第二个设置为 "c"（表示 Chuck Norris）。 +
+ +## Tests +
+ +```yml +tests: + - text: '你应该为id是 "first" 的a标签添加accesskey属性。' + testString: assert($('#first').attr('accesskey')); + - text: '你应该为id是 "second" 的a标签添加accesskey属性。' + testString: assert($('#second').attr('accesskey')); + - text: '你应该将id是 "first" 的a标签的accesskey属性值设置为小写 "g"。' + testString: assert($('#first').attr('accesskey') == 'g'); + - text: '你应该将id是 "second" 的a标签的accesskey属性值设置为小写 "c"。' + testString: assert($('#second').attr('accesskey') == 'c') + +``` + +
+ +## Challenge Seed +
+ +
+ +```html + +
+

Deep Thoughts with Master Camper Cat

+
+
+ + +

The Garfield Files: Lasagna as Training Fuel?

+ + +

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...

+
+
+ + +

Is Chuck Norris a Cat Person?

+ + +

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?...

+
+
© 2018 Camper Cat
+ +``` + +
+ + + +
+ +## Solution +
+ +```html +// solution required +``` + +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.chinese.md deleted file mode 100644 index 82ca279cae..0000000000 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.chinese.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: 587d7790367417b2b2512aaf -title: Make Links Navigatable with HTML Access Keys -challengeType: 0 -videoUrl: '' -localeTitle: 使链接可以使用HTML访问密钥进行导航 ---- - -## Description -
HTML提供了accesskey属性，用于指定要激活元素或将焦点置于元素的快捷键。这可以使键盘用户的导航更有效。 HTML5允许在任何元素上使用此属性，但在与交互元素一起使用时，它特别有用。这包括链接，按钮和表单控件。这是一个例子： <button accesskey="b">Important Button</button>
- -## Instructions -
Camper Cat希望两个博客文章标题之间的链接具有键盘快捷键，这样他的网站用户就可以快速浏览完整的故事。为两个链接添加一个accesskey属性，并将第一个设置为“g”（对于加菲猫），将第二个设置为“c”（对于Chuck Norris）。
- -## Tests -
- -```yml -tests: - - text: 您的代码应该为id为“first” a标记添加一个accesskey属性。 - testString: 'assert($("#first").attr("accesskey"), "Your code should add an accesskey attribute to the a tag with the id of "first".");' - - text: 您的代码应该为id为“second” a标记添加一个accesskey属性。 - testString: 'assert($("#second").attr("accesskey"), "Your code should add an accesskey attribute to the a tag with the id of "second".");' - - text: 您的代码应在id为“first”到“g” a标记上设置accesskey属性。请注意，案件很重要。 - testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the accesskey attribute on the a tag with the id of "first" to "g". Note that case matters.");' - - text: 您的代码应设置accesskey的属性a标签与id “第二”到“C”的。请注意，案件很重要。 - testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the accesskey attribute on the a tag with the id of "second" to "c". Note that case matters.");' - -``` - -
- -## Challenge Seed -
- -
- -```html - -
-

Deep Thoughts with Master Camper Cat

-
-
- - -

The Garfield Files: Lasagna as Training Fuel?

- - -

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...

-
-
- - -

Is Chuck Norris a Cat Person?

- - -

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?...

-
-
© 2018 Camper Cat
- - -``` - -
- - - -
- -## Solution -
- -```js -// solution required -``` -
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.chinese.md index 50b33b8169..7580aae8fc 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.chinese.md @@ -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 -
与header和nav类似， footer元素具有内置的地标功能，允许辅助设备快速导航到它。它主要用于包含版权信息或链接到通常位于页面底部的相关文档。
+
+与header和nav类似，footer也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。 +
## Instructions -
Camper Cat的培训页面正在取得良好进展。将用于将其版权信息包含在页面底部的div更改为footer元素。
+
+Camper Cat 的忍者训练页面进展顺利。请将他在页面底部呈现版权信息的div标签更改为footer标签。 +
## Tests
```yml tests: - - text: 您的代码应该有一个footer标记。 - testString: 'assert($("footer").length == 1, "Your code should have one footer tag.");' - - text: 您的代码不应包含任何div标记。 - testString: 'assert($("div").length == 0, "Your code should not have any div tags.");' - - text: 您的代码应该有一个开始和结束footer标记。 - testString: 'assert(code.match(/
\s*© 2018 Camper Cat\s*<\/footer>/g), "Your code should have an opening and closing footer tag.");' + - text: '你的代码中应该包含 1 个footer标签。' + testString: assert($('footer').length == 1); + - text: '你的代码中不应包含div标签。' + testString: assert($('div').length == 0); + - text: '你代码中的footer应该是闭合的。' + testString: assert(code.match(/
\s*© 2018 Camper Cat\s*<\/footer>/g)); ``` @@ -68,7 +73,6 @@ tests: - ``` @@ -80,7 +84,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.chinese.md index 4501d367c5..8529d939dd 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.chinese.md @@ -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 -
下一个添加语义含义并提高可访问性的HTML5元素是header标记。它用于为其父标记包装介绍性信息或导航链接，并且可以很好地处理在多个页面顶部重复的内容。 header分享了您在main看到的嵌入式地标功能，允许辅助技术快速导航到该内容。 注意
header适用于HTML文档的body标记。这与head元素不同， head元素包含页面标题，元信息等。
+
+header也是一个具有语义化的、提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。 +与main类似，header的语义化特性也可以使辅助技术快速定位到它的内容。 +注意：
header用在 HTML 文档的body标签中。这点与包含页面标题、元信息的head标签不同。 +
## Instructions -
Camper Cat正在撰写一些关于忍者训练的精彩文章，并希望为他们的网站添加一个页面。将当前包含h1的顶部div更改为header标记。
+
+Camper Cat 正在写一些训练忍者的精彩文章，并为它们建立一个新的页面。请使用header替换页面顶端包含h1的div标签。 +
## Tests
```yml tests: - - text: 您的代码应该有一个header标记。 - testString: 'assert($("header").length == 1, "Your code should have one header tag.");' - - text: 您的header标记应该环绕h1 。 - testString: 'assert($("header").children("h1").length == 1, "Your header tags should wrap around the h1.");' - - text: 您的代码不应包含任何div标记。 - testString: 'assert($("div").length == 0, "Your code should not have any div tags.");' - - text: 确保您的header元素具有结束标记。 - testString: 'assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/
/g).length, "Make sure your header element has a closing tag.");' + - text: '你的代码应该包含 1 个header标签。' + testString: assert($('header').length == 1); + - text: '你的header标签应该包含h1。' + testString: assert($('header').children('h1').length == 1); + - text: '你的代码不应有任何div标签。' + testString: assert($('div').length == 0); + - text: '确保你的header标签是闭合的。' + testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/
/g).length); ``` @@ -61,7 +68,6 @@ tests:
- ``` @@ -73,7 +79,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.chinese.md index 317c2cd088..a9ee9bdffd 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.chinese.md @@ -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 -
nav元素是另一个HTML5项目，具有嵌入的地标功能，便于屏幕阅读器导航。此标记用于包围页面中的主导航链接。如果页面底部有重复的站点链接，则没有必要标记带有nav标签的链接。使用footer （在下一个挑战中涵盖）就足够了。
+
+nav也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。 +对于在多个页面底部出现的站点链接，不需要使用nav，用footer（在下个挑战中介绍）会更好。 +
## Instructions -
Camper Cat在他的训练页面顶部包含了导航链接，但是将它们包裹在一个div 。将div更改为nav标记以改善其页面上的可访问性。
+
+Camper Cat 在他的忍者训练页面顶端使用了很多导航链接，但把它们写在了div中。请将div更改为nav标签，以提升页面的可访问性。 +
## Tests
```yml tests: - - text: 您的代码应该有一个nav标记。 - testString: 'assert($("nav").length == 1, "Your code should have one nav tag.");' - - text: 你的nav标签应该包裹ul及其列表项。 - testString: 'assert($("nav").children("ul").length == 1, "Your nav tags should wrap around the ul and its list items.");' - - text: 您的代码不应包含任何div标记。 - testString: 'assert($("div").length == 0, "Your code should not have any div tags.");' - - text: 确保您的nav元素具有结束标记。 - testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/
- ``` @@ -79,7 +84,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.chinese.md index 4aab64c7d6..d539b2b7b2 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.chinese.md @@ -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 -
继续使用日期主题，HTML5还引入了time元素和datetime属性来标准化时间。这是一个可以在页面上包装日期或时间的内联元素。该日期的有效格式由datetime属性保存。这是辅助设备访问的值。它通过陈述标准化版本的时间来避免混淆，即使它是在文本中以非正式或口语方式编写的。以下是一个例子： <p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
+
+继续日期主题。HTML5 还引入了time标签与datetime属性来标准化时间。time是一个行内标签，用于在页面中呈现日期或时间，而datetime属性保存了日期的有效格式，辅助设备可以访问这个值。通过标准化时间格式，即使时间在文本中是以非正式的或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。 +举个例子： +<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p> +
## Instructions -
露营猫的真人快打调查结果在！在文本“9月15日星期四<sup> th </ sup>”周围包装一个time标记，并为其设置“2016-09-15”添加datetime属性。
+
+Camper Cat 的比武大会的时间确定了！请使用time标签包含文本 "Thursday, September 15<sup>th</sup>"，并将datetime属性设置为 "2016-09-15"。 +
## Tests
```yml tests: - - text: 你的time标签应该包含“9月15日星期四<sup> th </ sup>”的文字。 - testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your time tags should wrap around the text "Thursday, September 15<sup>th</sup>".");' - - text: 您的time标记应具有非空的datetime属性。 - testString: 'assert($("time").attr("datetime"), "Your time tag should have a datetime attribute that is not empty.");' - - text: 您的datetime属性应设置为2016-09-15的值。 - testString: 'assert($("time").attr("datetime") === "2016-09-15", "Your datetime attribute should be set to a value of 2016-09-15.");' - - text: 确保您的time元素具有结束标记。 - testString: 'assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4, "Make sure your time element has a closing tag.");' - + - text: 'time标签应该包含文本"Thursday, September 15<sup>th</sup>"。' + testString: assert($('time').text().match(/Thursday, September 15th/g)); + - text: 'time标签应该有 1 个非空的datetime属性。' + testString: assert($('time').attr('datetime')); + - text: 'datetime属性的值应该为 2016-09-15。' + testString: assert($('time').attr('datetime') === "2016-09-15"); + - text: '确保time标签是闭合的。' + testString: assert(code.match(/<\/time>/g) && code.match(/<\/time>/g).length === 4); ```
@@ -42,13 +48,13 @@ tests:

Mortal Kombat Tournament Survey Results

- + - +

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 15th. May the best ninja win!

- + - +

Comments:

@@ -67,19 +73,31 @@ tests:
© 2018 Camper Cat
- ``` +
+```html + +``` + +
## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.chinese.md index d0110af7ab..7e816d46c7 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.chinese.md @@ -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 -
标题（ h1到h6元素）是主力标签，有助于为您的内容提供结构和标签。可以将屏幕阅读器设置为只读取页面上的标题，以便用户获得摘要。这意味着标记中的标题标记具有语义含义并且彼此相关，而不仅仅是因为它们的大小值而被选中是很重要的。 语义意味着您在内容周围使用的标记表示它包含的信息类型。如果你正在撰写一篇带有介绍，正文和结论的论文，那么将结论作为你纲要中正文的一个小节是没有多大意义的。它应该是它自己的部分。同样，网页中的标题标签需要按顺序排列，并指明内容的层次关系。具有相同（或更高）等级的标题开始新的隐含部分，具有较低等级的标题从前一部分的开始子部分开始。例如，带有h2元素的页面后跟几个标有h4标签的子部分会使屏幕阅读器用户h4困惑。有六种选择，使用标签很有吸引力，因为它在浏览器中看起来更好，但您可以使用CSS编辑相对大小。最后一点，每个页面应始终有一个（并且只有一个） h1元素，这是您内容的主要主题。此搜索引擎和其他标题部分由搜索引擎用于理解页面主题。
+
+标题标签（包括h1到h6）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为更快地了解页面内容，可以设置让阅读器只朗读页面标题。这意味着标题标签之间以及标签本身都应语义化，不应仅仅为了获得不同字号而使用不同级别的标题标签。 +语义化：标签名能准确地表达它所含内容的信息类型。 +对于一篇含有引言、正文、结论的论文，把结论作为引言的一部分没有任何意义，因为结论应该是独立的章节。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。 +在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。 +举个例子：一个h2标签后紧跟若干h4标签的页面，会让使用屏幕阅读器的用户感到困惑。尽管在页面中，使用这 6 个标题标签可以控制内容的的视觉样式，但我们应该使用 CSS 来调整。 +最后一点，每个页面应该只有一个h1标签，用来说明页面主要内容。h1标签和其他的标题标签可以让搜索引擎获取页面的大纲。 +
## Instructions -
Camper Cat希望他的网站上有一个致力于成为忍者的页面。帮助他修复标题，以便他的标记为内容提供语义含义，并显示其部分的正确父子关系。将所有h5标签更改为正确的标题级别，以指示它们是h2标签的子部分。
+
+Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮助他修改标题标签，使它们语义化且顺序正确。你需要将所有的h5标题标签调整为恰当的级别（即h3标题标签），使它们是h2标题标签的子级。 +
## Tests
```yml tests: - - text: 您的代码应该有六个h3标签。 - testString: 'assert($("h3").length === 6, "Your code should have six h3 tags.");' - - text: 您的代码不应包含任何h5标记。 - testString: 'assert($("h5").length === 0, "Your code should not have any h5 tags.");' - + - text: '你的代码应该包含 6 个h3标签。' + testString: assert($('h3').length === 6); + - text: '你的代码不应包含 h5 标签。' + testString: assert($('h5').length === 0); + - text: '代码不应该包含 h5 标记.' + testString: assert($("h5").length === 0); + - text: '代码不应该包含 h5 结束标记。' + testString: assert(/\/h5/.test(code)===false); ```
@@ -46,7 +59,6 @@ tests:
How to Breathe Properly
How to Simplify your Life
- ``` @@ -58,7 +70,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.chinese.md index 8606a17916..0d1a8888d3 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.chinese.md @@ -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 -
HTML tabindex属性有三个与元素键盘焦点相关的不同功能。当它在标签上时，它表示可以关注元素。值（一个正数，负数或零的整数）决定了行为。当用户在页面中进行选项卡时，某些元素（如链接和表单控件）会自动接收键盘焦点。它与HTML源标记中的元素的顺序相同。通过在其上放置tabindex="0"属性，可以将相同的功能赋予其他元素，例如div ， span和p 。这是一个例子： <div tabindex="0">I need keyboard focus!</div> 注意
负tabindex值（通常为-1）表示元素是可聚焦的，但键盘无法访问。此方法通常用于以编程方式将焦点集中到内容上（例如，当激活用于弹出窗口的div时），并且超出了这些挑战的范围。
+
+HTML 的tabindex属性有三个不同与标签焦点的功能。当它在标签上时，表示标签可以获得焦点。它的值可以是零、负整数及正整数，并决定了标签的行为。 +当用户在页面中使用 tab 键时，有些标签，如：链接、表单控件，可以自动获得焦点。它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将tabindex属性值设为 0，来给其他标签赋予相同的功能，如：div、span、p等。举个例子： +<div tabindex="0">I need keyboard focus!</div> +注意：
tabindex属性值为负整数（通常为 -1）的标签也是有焦点的，只是不可以通过 tab 键来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：激活用于弹出框的div标签），但是它超出了当前挑战的范围。 +
## Instructions -
Camper Cat创建了一项新调查，以收集有关其用户的信息。他知道输入字段会自动获得键盘焦点，但他希望确保键盘用户在指示项目时暂停指示。将tabindex属性添加到p标记并将其值设置为“0”。奖金 - 使用tabindex还可以使CSS伪类:focus在p标签上工作。
+
+Camper Cat 新建了一个调查，用来收集他的用户的信息。他知道输入框可以自动获得键盘焦点，但他希望确保当键盘用户切换标签时，焦点可以停留在指示文字上。请给p标签添加tabindex属性，并将它的值设置为 0。注意：使用tabindex属性可以使 CSS 伪类:focus在p标签上生效。 +
## Tests
```yml tests: - - text: 您的代码应该将tabindex属性添加到包含表单指令的p标记。 - testString: 'assert($("p").attr("tabindex"), "Your code should add a tabindex attribute to the p tag that holds the form instructions.");' - - text: 您的代码应将p标记上的tabindex属性设置为值0。 - testString: 'assert($("p").attr("tabindex") == "0", "Your code should set the tabindex attribute on the p tag to a value of 0.");' + - text: '你应该为表单中的p标签添加tabindex属性。' + testString: assert($('p').attr('tabindex')); + - text: '你应该将p标签的tabindex属性值设置为 0。' + testString: assert($('p').attr('tabindex') == '0'); ``` @@ -45,11 +53,11 @@ tests:
- - + +

Instructions: Fill in ALL your information then click Submit

- - + +
@@ -79,7 +87,6 @@ tests:
© 2018 Camper Cat
- ``` @@ -91,7 +98,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.chinese.md index f83b755c45..7ce958812d 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.chinese.md @@ -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 -
tabindex属性还指定元素的确切Tab键顺序。当属性的值被设置为1或更高的正数时，可以实现这一点。设置tabindex =“1”将首先将键盘焦点放在该元素上。然后循环显示指定tabindex值（2,3等）的序列，然后移至默认值和tabindex="0"项。重要的是要注意，当以这种方式设置Tab键顺序时，它会覆盖默认顺序（使用HTML源）。这可能会使期望从页面顶部开始导航的用户感到困惑。在某些情况下，这种技术可能是必要的，但就可访问性而言，在应用之前要小心。这是一个例子： <div tabindex="1">I get keyboard focus, and I get it first!</div> <div tabindex="2">I get keyboard focus, and I get it second!</div>
+
+tabindex属性还可以指定标签的 tab 键顺序，将它的值设置为大于或等于 1 就可以实现这个功能。 +tabindex属性值为 1 的标签将首先获得键盘焦点，然后焦点将按照指定的tabindex的值（如：2，3 等）的顺序进行移动，直到回到默认的或tabindex值为 0 的标签上，如此循环。 +需要注意的是，当按照这种方式设置 tab 键顺序时，将会覆盖默认的顺序（标签在文档流中出现的顺序）。这可能会令那些希望从页面顶部开始导航的用户感到困惑。这个技术在某些情况下可能是必要的，但是对可访问性而言，在应用时要十分小心。 +举个例子： +<div tabindex="1">I get keyboard focus, and I get it first!</div> +<div tabindex="2">I get keyboard focus, and I get it second!</div> +
## Instructions -
Camper Cat在他的Inspirational Quotes页面上有一个搜索字段，他计划使用CSS在右上角定位。他希望搜索input并将input表单控件提交为Tab键顺序中的前两项。将tabindex属性设置为“1”到搜索input ， tabindex属性设置为“2”到提交input 。
+
+Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 将这个区域定位在页面的右上角。Camper Cat 希望他的搜索input与提交input表单控件是 tab 键顺序的前两项。请为搜索input添加tabindex属性，其值为 1。为提交input添加tabindex属性，其值为 2。 +
## Tests
```yml tests: - - text: 您的代码应该向搜索input标记添加tabindex属性。 - testString: 'assert($("#search").attr("tabindex"), "Your code should add a tabindex attribute to the search input tag.");' - - text: 您的代码应该向提交input标记添加tabindex属性。 - testString: 'assert($("#submit").attr("tabindex"), "Your code should add a tabindex attribute to the submit input tag.");' - - text: 您的代码应将搜索input标记上的tabindex属性设置为值1。 - testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the tabindex attribute on the search input tag to a value of 1.");' - - text: 您的代码应将submit input标记上的tabindex属性设置为值2。 - testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the tabindex attribute on the submit input tag to a value of 2.");' + - text: '你应该为搜索input标签添加tabindex属性。' + testString: assert($('#search').attr('tabindex')); + - text: '你应该为提交input标签添加tabindex属性。' + testString: assert($('#submit').attr('tabindex')); + - text: '搜索input标签的tabindex属性值应该为 1。' + testString: assert($('#search').attr('tabindex') == '1'); + - text: '提交input标签的tabindex属性值应该为 2。' + testString: assert($('#submit').attr('tabindex') == '2'); ``` @@ -49,12 +59,12 @@ tests: - - + + - - + +

Inspirational Quotes

@@ -67,7 +77,6 @@ tests:
© 2018 Camper Cat
- ``` @@ -79,7 +88,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.chinese.md index 2d3068ef68..62b6adda26 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.chinese.md @@ -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 -
article是另一个新的HTML5元素，它为您的标记添加了语义含义。 Article是一个sectioning元素，用于包装独立的，自包含的内容。该标记适用于博客条目，论坛帖子或新闻文章。确定内容是否可以独立通常是一种判断调用，但您可以使用几种简单的测试。问问自己是否删除了所有周围环境，该内容是否仍然有意义？类似地，对于文本，如果它在RSS提要中，内容是否会保留？请记住，使用辅助技术的人们依赖于有组织的，语义上有意义的标记来更好地理解您的工作。 关于section和div注意事项
section元素也是HTML5的新元素，与article语义含义略有不同。 article适用于独立内容，一个section用于分组与主题相关的内容。根据需要，它们可以在彼此之间使用。例如，如果一本书是article ，那么每章都是一个section 。当内容组之间没有关系时，请使用div 。
<div> - 分组内容
<section> - 分组相关内容
<article> - 分组独立，自包含的内容
+
+article是另一个具有语义化特性的 HTML5 新标签。article是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。 +有些技巧可以用来判断内容是否独立，像是如果内容脱离了上下文，是否仍然有意义？类似地，对于 RSS 提要中的文本，它是否有意义？ +请牢记，使用辅助设备的用户依赖组织良好的、语义化的标签来获取页面中的信息。 +请注意section和div的区别：
section也是一个 HTML5 新标签，与article标签的语义含义略有不同。article用于独立的、完整的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。当内容组之间没有联系时，可以使用div。 + +```html +
- groups content +
- groups related content +
- groups independent, self-contained content +``` + +
## Instructions -
Camper Cat使用article标签将帖子包装在他的博客页面上，但他忘了在最顶层的帖子中使用它们。更改div标签以改为使用article标签。
+
+Camper Cat 打算使用article标签来呈现他的博客页面里的帖子，但是他忘记在顶部的帖子上使用它。请使用article标签来代替div标签。 +
## Tests
```yml tests: - - text: 您的代码应该有三个article标签。 - testString: 'assert($("article").length == 3, "Your code should have three article tags.");' - - text: 您的代码不应包含任何div标记。 - testString: 'assert($("div").length == 0, "Your code should not have any div tags.");' + - text: '你的代码中应该有 3 个article标签。' + testString: assert($('article').length == 3); + - text: '你的代码不应包含div标签。' + testString: assert($('div').length == 0); ``` @@ -53,7 +68,6 @@ tests:

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?...

- ``` @@ -65,7 +79,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.chinese.md index 73e9527221..966c181c9f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.chinese.md @@ -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 -
下一个表单主题包括单选按钮的可访问性。每个选项都有一个label其中一个for属性与最后一个挑战中涵盖的相应项目的id相关联。由于单选按钮通常位于用户必须选择一个的组中，因此有一种方法可以在语义上显示选项是一组的一部分。 fieldset标记围绕整个单选按钮组以实现此目的。它通常使用legend标记来提供分组的描述，屏幕阅读器可以为fieldset元素中的每个选项读取该描述。当选项不言自明时，如性别选择，则不需要fieldset包装器和legend标签。使用带有每个单选按钮的for属性的label就足够了。这是一个例子：
<FORM>
<字段集>
<legend>选择以下三个项目之一：</ 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”>选择二</ label> <br>
<input id =“three”type =“radio”name =“items”value =“three”>
<label for =“three”>选择三</ label>
</字段集>
</ FORM>
+
+下一个表单主题与单选按钮的可访问性有关。在上一个挑战中，单选按钮含有一个拥有for属性的label标签，for属性指向相关选项的id。然而单选按钮通常成组出现，用户必须其中选择一项。本次挑战介绍一种可以语义化呈现单选按钮组的方法。 +使用fieldset标签将单选按钮组包含在里面就可以实现这个目的，通常还会使用legend标签来为单选按钮组提供文字说明。屏幕阅读器也可以朗读这些文字。 +当选项的含义很明确时，如：性别选择，fieldset标签与legend标签就可以省略。这时，使用含有for属性的label标签就足够了。 +举个例子： + +```html +
+
+ Choose one of these three items: + +
+ +
+ + +
+
+``` + +
## Instructions -
Camper Cat在注册其电子邮件列表时需要有关其用户的忍者级别的信息。他增加了一组单选按钮，并从我们过去的经验教训使用标签与标签for每个选择属性。去野营猫！但是，他的代码仍需要一些帮助。将单选按钮周围的div标签更改为fieldset标签，并将其中的p标签更改为legend 。
+
+当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。通过上一个挑战的学习，Camper Cat 创建了一组单选按钮，并为每个选项的label标签添加了for属性，但是 Camper Cat 的代码依然需要你的帮助。请将包含单选按钮组的div标签替换为fieldset标签；将p标签替换为legend标签。 +
## Tests
```yml tests: - - text: 您的代码应该在单选按钮集周围有一个fieldset标记。 - testString: 'assert($("fieldset").length == 1, "Your code should have a fieldset tag around the radio button set.");' - - text: 确保您的fieldset元素具有结束标记。 - testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/
/g).length, "Make sure your fieldset element has a closing tag.");' - - text: 您的代码应该在文本周围有一个legend标记，询问用户的忍者级别。 - testString: 'assert($("legend").length == 1, "Your code should have a legend tag around the text asking what level ninja a user is.");' - - text: 您的代码不应包含任何div标记。 - testString: 'assert($("div").length == 0, "Your code should not have any div tags.");' - - text: 你的代码不应该在文本周围有一个p标记，询问用户是什么级别的忍者。 - testString: 'assert($("p").length == 4, "Your code should no longer have a p tag around the text asking what level ninja a user is.");' + - text: '你的代码应该使用 1 个fieldset标签包含单选按钮组。' + testString: assert($('fieldset').length == 1); + - text: '确保fieldset标签是闭合的。' + testString: assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/
/g).length); + - text: '你的代码应该有 1 个包含询问用户忍者等级文字的legend标签。' + testString: assert($('legend').length == 1); + - text: '你的代码不应该含有div标签。' + testString: assert($('div').length == 0); + - text: '你的代码不应该有包含询问用户忍者等级文字的p标签。' + testString: assert($('p').length == 4); ``` @@ -47,8 +70,8 @@ tests:

Sign up to receive Camper Cat's blog posts by email here!

- - + +

What level ninja are you?

@@ -60,8 +83,8 @@ tests:
- - + +
@@ -81,7 +104,6 @@ tests:
© 2018 Camper Cat
- ``` @@ -93,7 +115,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file