diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md index dd1b18d5e4..1a5cdf26a8 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md @@ -8,21 +8,21 @@ forumTopicId: 16628 # --description-- -在其他挑战里你应该已经见到过`img`标签的`alt`属性了。`alt`属性中的文本作为备用文字描述了图片的内容，这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如： +在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。`alt` 属性中的文本作为备用文字来描述图片的内容，这可以帮助用户在图片加载失败或者图片不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如： `Company logo` -视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别`alt`属性，朗读其中的内容，来告知用户图片包含的关键信息。 +视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别 `alt` 属性，朗读其中的内容，来告知用户图片包含的关键信息。 -良好的`alt`文本可以简明扼要地描述图片信息，所以你应该为图片添加`alt`属性。另外，HTML5 标准也在考虑强制要求对图片添加`alt`属性。 +`alt` 文本可以为屏幕阅读器提供图片的描述信息，所以你应始终为图片添加 `alt` 属性。另外，根据最新的 HTML5 标准，为图片添加 `alt` 属性是必需的。 # --instructions-- -碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。在这个网站中，他使用一张简介图片来展示技能。给`img`标签添加一个`alt`属性，说明 Camper Cat 在学习空手道（图片的`src`属性没有指向任何链接，因此你可以看到`alt`属性中的文本）。 +碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。在这个网站中，他添加了一张展示技能的资料图片，并希望这张图片可以让访问网站的所有用户看到。请给 `img` 标签添加一个 `alt` 属性，说明 Camper Cat 在学习空手道（图片的 `src` 属性指向的是一个不存在的文件，因此你可以看到 `alt` 属性中的文本出现在页面上）。 # --hints-- -你的`img`标签应该包含一个非空的`alt`属性。 +`img` 标签应该包含一个非空的 `alt` 属性。 ```js assert($('img').attr('alt')); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md index ece95bdbd6..f59f50015b 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md @@ -8,11 +8,11 @@ forumTopicId: 301008 # --description-- -表单中经常出现`input`标签，它可以用来创建多种表单控件。它的`type`属性指定了所要创建的`input`标签类型。 +表单中经常出现 `input` 标签，它可以用来创建多种表单控件。它的 `type` 属性指定了所要创建的 `input` 标签类型。 -在以前的挑战中，你可能已经见过`text`与`submit`类型的`input`标签，HTML5 引入了`date`类型来创建时间选择器。依赖于浏览器的支持，当点击`input`标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。 +在以前的挑战中，我们已经见过 `text` 与 `submit` 类型的 `input` 标签。HTML5 规范添加了 `date` 类型来创建日期选择器。如果浏览器支持，在点击 `input` 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。 -对于旧版本的浏览器，`type`属性的默认值是`text`。这种情况下，可以利用`label`标签或者占位文本来提示用户`input`标签的输入类型为日期。 +对于旧版本的浏览器，由于不支持 `date`，此时 `type` 属性会被浏览器设置为 `text`。这种情况下，我们可以利用 `label` 标签或者占位符文本来提示用户需要输入的日期格式。 举个例子： @@ -23,29 +23,29 @@ forumTopicId: 301008 # --instructions-- -Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。请为 Camper Cat 的页面添加一个`input`标签，其`type`属性值为 date，`id`属性为 pickdate，`name`属性为 date。 +Camper Cat 想举办一场比武大会，他想收集参赛者的最佳参赛时间。请为 Camper Cat 的页面添加一个 `input` 标签，其 `type` 属性值为 "date"，`id` 为 "pickdate"，`name` 属性值为 "date"。 # --hints-- -你的代码中应该有 1 个`input`标签。 +应有 1 个 `input` 标签。 ```js assert($('input').length == 2); ``` -你的`input`标签的`type`属性值应该为 date。 +`input` 标签的 `type` 属性值应该为 date。 ```js assert($('input').attr('type') == 'date'); ``` -你的`input`标签的`id`属性值应该为 pickdate。 +`input` 标签的 `id` 应为 pickdate。 ```js assert($('input').attr('id') == 'pickdate'); ``` -你的`input`标签的`name`属性值应该为 date。 +`input` 标签的 `name` 属性值应该为 date。 ```js assert($('input').attr('name') == 'date'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md index 37fb643022..04ea0c63e7 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md @@ -8,20 +8,19 @@ forumTopicId: 301011 # --description-- -色盲的形式有很多种，它的表现可以从对特定波长光波的感知度较低，到几乎无法看到颜色。最常见的形式是对绿色的低感知度。 +色盲的形式有很多种，它的表现可以从对特定波长光波的感知度较低，到完全无法看到颜色。最常见的形式是对绿色的低感知度。 -例如：如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法识别它们。可以认为色轮上相邻的颜色是相近的，在表示重要信息的时候应避免使用这些颜色的组合。 +例如，如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法区分它们。色轮上距离较近的颜色，特别是相邻的颜色，看起来都会很难区分。在表示重要信息的时候应避免使用这类相近颜色的组合。 -**注意：** -一些在线颜色拾取器有色盲模拟功能，可以模拟颜色在不同形式色盲的视觉中的呈现结果，它们和在线对比度检查器一样，都是很好的工具。 +**注意：**一些在线颜色选择器有色盲模拟功能，可以模拟颜色在不同形式的色盲中所呈现的效果。它们和在线对比度检查器一样，都是很好的工具。 # --instructions-- -Camper Cat 正在测试一个重要按钮的不同样式。在色轮上，黄色（`#FFFF33`）的`background-color`和绿色（`#33FF33`）的文本`color`是相邻的色调，一些色盲用户几乎无法区分它们，而且这两个颜色的亮度相近，对比度太小。为了解决这两个问题，请将文本的`color`修改为深蓝色（`#003366`）。 +Camper Cat 正在测试一个重要按钮的不同样式。在色轮上，用于背景色的黄色（`#FFFF33`）和文字颜色绿色（`#33FF33`）是相邻的色调，一些色盲用户几乎无法区分它们，而且这两个颜色的亮度相近，对比度太小。为了解决这两个问题，请将文本的 `color` 修改为深蓝色（`#003366`）。 # --hints-- -`button`的文本`color`应该是深蓝色。 +`button` 内容文本的 `color` 属性值应为深蓝色。 ```js assert($('button').css('color') == 'rgb(0, 51, 102)'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md index a4488b9cba..9cfa23798a 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md @@ -8,27 +8,27 @@ forumTopicId: 301012 # --description-- -颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以识别它们。 +颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以区分它们。 -在之前的挑战中，我们用文本备用方案解决了第一个问题。在上一个挑战中，我们使用对比度检测工具解决了第二问题。WCAG 建议为颜色及灰度组合使用 4.5 : 1 的对比度。 +在之前的挑战中，我们用文本备用方案解决了第一个问题。在上一个挑战中，我们使用对比度检测工具解决了第二个问题。WCAG 建议为颜色及灰度组合使用 4.5 : 1 的对比度。 -色盲用户无法将一些颜色与另一些颜色区分出来——通常是因为色调，也有时候是因为亮度。你可能想起对比度是用前景色与背景色的相对亮度计算的。 +色盲用户无法将一些颜色与另一些颜色区分出来，这通常是因为色调，有时候是因为亮度。你可能还记得，对比度是用前景色与背景色的相对亮度计算的。 实践中，在对比度检测工具的帮助下，我们可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 4.5 : 1。在色轮中，较暗的颜色通常是蓝色、紫色、洋红和红色，而较淡的颜色通常是橙色、黄色、绿色和蓝绿色。 # --instructions-- -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。 +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。 # --hints-- -你应该将`color`属性的亮度值设置为 15%。 +应将 `color` 属性的亮度值设置为 15%。 ```js assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi)); ``` -你应该将`background-color`属性的亮度值设置为 55%。 +应将 `background-color` 属性的亮度值设置为 55%。 ```js assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi)); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md index 92ca67f582..c040df2d59 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md @@ -1,6 +1,6 @@ --- id: 587d778f367417b2b2512aae -title: 使用描述性链接文本赋予链接含义 +title: 为链接添加描述性的文本 challengeType: 0 videoUrl: 'https://scrimba.com/c/c437DcV' forumTopicId: 301013 @@ -8,17 +8,17 @@ forumTopicId: 301013 # --description-- -屏幕阅读器用户可以选择其设备读取的内容的类型，这包括跳转到（或跳过）标志标签，跳转到主要内容，或者从标题中获取页面摘要，还可以选择只听取页面中的有效链接。 +屏幕阅读器用户可以选择其设备读取的内容的类型，包括表示“跳转到”（或“跳过”）的元素，跳转到主要内容，或者从标题中获取页面摘要。用户还可以选择只听取页面中的超链接内容。 -屏幕阅读器通过阅读链接文本或者锚点标签（`a`）之间的内容来完成这个操作。使用 "click here" 或者 "read more" 作为链接文本并没有多少帮助。相反地，应该在`a`标签中使用简洁的描述性语言来为用户提供更多的信息。 +屏幕阅读器通过阅读链接文本（即 `a` 标签的内容文本）来完成这个操作。如果我们只在链接中写上 "click here"（点击这里）或者 "read more"（阅读更多），显然帮助有限。相反地，我们应该在 `a` 标签中使用简洁的描述性语言来为用户提供更多信息。 # --instructions-- -Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。请修改锚点标签（`a`），将其包含的文本从 "click here" 改为 "information about batteries"。 +Camper Cat 在链接中使用的文本在脱离上下文的情况下，描述性不是很好。请修改 `a` 标签，将其包含的文本从 "click here" 改为 "information about batteries"。 # --hints-- -请修改`a`标签，将其包含的文本从 "click here" 改为 "information about batteries"。 +你应修改 `a` 标签，将其包含的文本从 "click here" 改为 "information about batteries"。 ```js assert( @@ -28,13 +28,13 @@ assert( ); ``` -`a`元素应该有一个`href`属性，且值为空字符串 +`a` 元素应该有一个 `href` 属性，且其属性值为空字符串 `""`。 ```js assert($('a').attr('href') === ''); ``` -`a` 元素应该有一个结束标记 +`a` 元素应该有一个结束标签。 ```js assert( diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md index bfbb615662..811601b8e4 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md @@ -8,9 +8,9 @@ forumTopicId: 301014 # --description-- -HTML5 的`audio`标签用于呈现音频内容，它也具有语义化特性。可以在`audio`上下文中为音频内容添加文字说明或者字幕链接，使听觉障碍用户也能获取音频中的信息。 +HTML5 的 `audio` 标签用于呈现音频内容或音频流，它也具有语义化特性。可以在 `audio` 上下文中为音频内容添加描述文字或字幕链接，使听觉障碍用户也能获取音频中的信息。 -`audio`支持`controls`属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件。`controls`属性是一个布尔属性，只要这个属性出现在`audio`标签中，浏览器就会开启播放控件。 +`audio` 支持 `controls` 属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件，而且还支持键盘操作。`controls` 属性是一个布尔属性，即不需要提供属性值。只要这个属性出现在 `audio` 标签中，浏览器就会开启播放控件。 举个例子： @@ -21,25 +21,23 @@ HTML5 的`audio`标签用于呈现音频内容，它也具有语义化特性。 ``` -**注意：** -多媒体内容通常同时包含音频与视频部分，它需要同步音频与字幕，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不需要创建音频与字幕，但是需要将它们添加到多媒体中。 +**注意：**多媒体内容通常同时包含音频与视频部分，它需要同步的字幕与逐字稿，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。 # --instructions-- -是时候让 Camper Cat 休息一下，并与朋友 camper Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验 Zersiax 的屏幕阅读器的朗读效果，请在`p`标签之后添加一个具有`controls`属性的`audio`标签。然后在`audio`标签内添加一个`source`标签，并且设置`src`属性为"`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`"，并且设置`type`属性为"audio/mpeg". +是时候让 Camper Cat 休息一下，并与朋友 Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验屏幕阅读器的朗读效果，请在 `p` 标签之后添加一个具有 `controls` 属性的 `audio` 标签。然后在 `audio` 标签内添加一个 `source` 标签并设置 `src` 属性值为 "`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`"。同时，请将 `source` 的 `type` 属性值设置为 "audio/mpeg"。 -**注意：** -音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。 +**注意：**音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。 # --hints-- -你的代码应该包含一个`audio`标签。 +应该包含一个 `audio` 标签。 ```js assert($('audio').length === 1); ``` -确保你的`audio`标签是闭合的。 +确保 `audio` 元素有结束标签。 ```js assert( @@ -48,25 +46,25 @@ assert( ); ``` -`audio`标签应具有`controls`属性。 +`audio` 标签应存在 `controls` 属性。 ```js assert($('audio').attr('controls')); ``` -你的代码应具有`source`标签。 +代码中应存在 `source` 标签。 ```js assert($('source').length === 1); ``` -`source`标签应该在`audio`标签中。 +`source` 标签应位于 `audio` 标签中。 ```js assert($('audio').children('source').length === 1); ``` -`source`标签中`src`属性的值应该与教程中的链接一致。 +`source` 标签中 `src` 的属性值应该与教程中的链接一致。 ```js assert( @@ -75,7 +73,7 @@ assert( ); ``` -`source`标签中应具有`type`属性，其值为 audio/mpeg。 +`source` 标签中应具有 `type` 属性，其属性值应为 audio/mpeg。 ```js assert($('source').attr('type') === 'audio/mpeg'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md index 3b5a4ab8b9..b9ed32c972 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md @@ -8,11 +8,11 @@ forumTopicId: 301015 # --description-- -HTML5 引入了`figure`标签以及与之相关的`figcaption`标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。这样通过语义化对内容进行分组并配以用于解释`figure`的文字，可以极大地提升内容的可访问性。 +HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。通过语义化对内容进行分组并配以用于解释 `figure` 的文字，可以极大地提升内容的可访问性。 -对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何处理那些超出屏幕可视范围（使用 CSS）的表格版本的图表数据，以使屏幕阅读器用户也可以获取信息。 +对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。 -举个例子——注意`figcaption`包含在`figure`标签中，并且可以与其他标签组合使用： +举个例子，注意 `figcaption` 包含在 `figure` 标签中，并且可以与其他标签组合使用： ```html
@@ -26,41 +26,41 @@ HTML5 引入了`figure`标签以及与之相关的`figcaption`标签。它们一 # --instructions-- -Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。请帮助完善他的页面，将他的用于呈现图表的`div`标签修改为`figure`标签，用于呈现图表标题的`p`标签改为`figcaption`标签。 +Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。请帮助完善他的页面，将他用于呈现图表的 `div` 标签修改为 `figure` 标签；将用于呈现图表标题的 `p` 标签改为 `figcaption` 标签。 # --hints-- -你的代码应该有 1 个`figure`标签。 +应存在 1 个 `figure` 标签。 ```js assert($('figure').length == 1); ``` -你的代码应该有 1 个`figcaption`标签。 +应存在 1 个 `figcaption` 标签。 ```js assert($('figcaption').length == 1); ``` -你的代码不应有`div`标签。 +不应存在 `div` 标签。 ```js assert($('div').length == 0); ``` -你的代码不应有`p`标签。 +不应存在 `p` 标签。 ```js assert($('p').length == 0); ``` -`figcaption`应该为`figure`的子标签。 +`figcaption` 应为 `figure` 的子标签。 ```js assert($('figure').children('figcaption').length == 1); ``` -请确保你的`figure`标签是闭合的。 +确保 `figure` 元素有结束标签。 ```js assert( diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md index 303a638ae0..669845a639 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md @@ -8,13 +8,13 @@ forumTopicId: 301016 # --description-- -合理地使用语义化的 HTML 标签和属性可以提升页面可访问性。在接下来的挑战中，你将会看到使用表单属性的重要场景。 +合理地使用语义化 HTML 标签和属性可以提升页面的可访问性。在接下来的挑战中，你将会看到在表单中使用属性的场景。 -`label`标签用于呈现特定表单控件的文本，通常是选项的名称。这些文本代表了选项的含义，使表单具有更好的可读性。`label`标签的`for`属性指定了与`label`绑定的表单控件，并且屏幕阅读器也会读取`for`属性。 +`label` 标签的文本内容通常会是表单组件的名称或标签。这些文本表明了组件的意义，也提升了表单的可访问性。`label` 标签的 `for` 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 `for` 属性的属性值。 -在 HTML 基础章节的课程中，我们已经了解了单选按钮标签。在那节课程中，我们为了可以点击单选按钮的名称，将`input`标签放在`label`标签中。在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用`for`属性。 +在 HTML 基础章节中，我们已经学习使用了单选按钮标签。在那次挑战中，为了让标签可以在点击的时候也选中输入框，我们将 `input` 标签嵌套在了 `label` 标签里面。在本节课程中，我们会了解到另外一种实现这个功能的方法，那就是使用 `for` 属性。 -`for`属性的值必须与表单控件的`id`属性的值相同。举个例子： +`for` 的属性值必须与表单组件的 `id` 属性值相同。举个例子： ```html
@@ -25,17 +25,17 @@ forumTopicId: 301016 # --instructions-- -Camper Cat 希望他的博客文章能有很多订阅，他想添加一个电子邮件注册表单。请为表示电子邮件的`label`标签添加`for`属性，并设置属性值与`input`标签的`id`属性值相同。 +Camper Cat 觉得他的博客文章会有很多人订阅，因此他想添加一个电子邮件注册表单。请为表示电子邮件的 `label` 标签添加 `for` 属性，并将其属性值设置为与 `input` 标签的 `id` 属性值相同。 # --hints-- -你的`label`标签应该有 1 个非空的`for`属性。 +`label `标签应该有一个非空的 `for` 属性。 ```js assert($('label').attr('for')); ``` -`for`属性的值应该与`input`标签的 id 值 email 相同。 +`for` 的属性值应与用于输入邮箱的 `input` 标签 id 属性值相同。 ```js assert($('label').attr('for') == 'email'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md index 025d7caa21..a7204fb1d9 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md @@ -8,23 +8,23 @@ forumTopicId: 301017 # --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。 # --hints-- -你应该将`body`的`color`修改为深灰色。 +应该将 `body` 的 `color` 修改为深灰色。 ```js assert($('body').css('color') == 'rgb(99, 99, 99)'); ``` -你不应该修改`body`的`background-color`。 +不应修改 `body` 的 `background-color`。 ```js assert($('body').css('background-color') == 'rgb(255, 255, 255)'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md index aca630097c..19e20c9b77 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md @@ -8,27 +8,27 @@ forumTopicId: 301018 # --description-- -HTML5 添加了诸如`main`、`header`、`footer`、`nav`、`article`、`section`等大量新标签，开发人员提供更多的选择，也兼顾了无障碍特性。 +HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。这不仅为开发人员提供了更多的选择，同时也提升了网页的可访问性。 -默认情况下，浏览器呈现这些新标签的方式与`div`相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。 +默认情况下，浏览器呈现这些新标签的方式与 `div` 相似。但如果我们能合理地使用这些标签，就可以让我们的代码更加语义化且易懂。由于这些标签可以表明其内容的含义，因此辅助工具（如：屏幕阅读器）可以通过这些标签为用户提供更加准确且易于理解的页面信息和导航信息。 -`main`标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。 +`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。 -`main`标签的语义化特性可以使辅助技术快速定位到页面的主体。 如果页面顶部有一个 “跳转到主要内容” 的链接，那么辅助设备会自动识别`main`标签，实现这个功能。 +`main` 标签的语义化特性可以让辅助工具快速定位到页面的主体。辅助设备会识别 `main` 标签，就好像页面顶部出现一个“跳转到主要内容”的按钮那样。 # --instructions-- -Camper Cat 对他的忍者武器页面有一些新的想法，请帮助他在`header`标签和`footer`标签（在接下来的挑战中会详细介绍）之间添加完整`main`标签来使页面语义化。在这个挑战中，你可以先让`main`为空。 +Camper Cat 对他的忍者武器页面有一些新的想法，请帮他在 `header` 标签和 `footer` 标签（在接下来的挑战中会详细介绍）之间添加一个 `main` 标签。在这个挑战中，你可以先让 `main` 标签里的内容文本为空。 # --hints-- -你的代码应该有一个`main`标签。 +应存在一个 `main` 标签。 ```js assert($('main').length == 1); ``` -`main`标签应该在`header`标签与`footer`标签之间。 +`main` 标签应位于 `header` 标签与 `footer` 标签之间。 ```js assert(code.match(/<\/header>\s*?
\s*?<\/main>/gi)); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md index 7ef584f3c0..41ab482832 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md @@ -1,6 +1,6 @@ --- id: 587d774c367417b2b2512a9d -title: 知道 Alt 文本何时应该留空 +title: 了解 Alt 文本留空的情景 challengeType: 0 videoUrl: 'https://scrimba.com/c/cM9P4t2' forumTopicId: 301019 @@ -8,30 +8,29 @@ forumTopicId: 301019 # --description-- -在上一个挑战中，我们了解到`img`标签必须有一个`alt`属性。在图片已经有了文字说明，或者仅仅为了美化页面的情况下，`alt`属性似乎有些多余。 +在上一个挑战中，我们了解到 `img` 标签必须有一个 `alt` 属性。不过在图片已经有标题作为文字说明，或者图片仅用作装饰的情况下，`alt` 属性似乎有些多余。 -即便如此，我们仍然需要为`img`标签添加`alt`属性，这时可以把它设为空，例如： +即便如此，我们仍然需要为 `img` 标签添加 `alt` 属性，但这时我们应把它的属性值设为空，例如： `` -背景图片通常起装饰作用，而且含有 CSS 类，所以屏幕阅读器无法读取。 +比如，背景图片通常起装饰作用。但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器无法读取。 -**注意：** -对于有标题的图片，我们依然需要添加`alt`属性，因为这样有助于搜索引擎记录图片内容。 +**注意：**对于有标题的图片，我们依然需要添加 `alt` 属性，因为这样有助于搜索引擎记录图片内容。 # --instructions-- -Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的`alt`属性（注意：这里`img`标签的`src`属性提供的链接是无效的，因此页面上可能不会显示图片，不用担心）。 +Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的 `alt` 属性（注意：这里 `img` 标签的 `src` 属性提供的链接是无效的，因此页面上不会显示任何忍者刀的图片，不用担心）。 # --hints-- -你的`img`标签应该包含`alt`属性。 +`img` 标签应具有 `alt` 属性。 ```js assert(!($('img').attr('alt') == undefined)); ``` -`alt`属性对应的值应该为空。 +`alt` 的属性值应为空。 ```js assert($('img').attr('alt') == ''); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md index 816677ee84..1a2f967ea9 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md @@ -10,7 +10,7 @@ forumTopicId: 301020 到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。 -然而，如果我们需要在页面中添加一些只对屏幕阅读器可见的内容时，CSS 可以提升页面的可访问性。当信息以可视化形式（如：图表）展示，而屏幕阅读器用户需要一种替代方式（如：表格）来获取信息时，就会出现这种情况。CSS 被用来将这些仅供屏幕阅读器使用的信息定位到浏览器可见区域之外。 +但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，此时我们可以用 CSS 来实现。当信息以可视化形式（比如图表）展示，而屏幕阅读器用户需要另一种方式（比如表格）来获取信息时，我们就可以用 CSS 来解决这个问题：只需要把仅供屏幕阅读器使用的信息通过 CSS 定位到浏览器可见区域之外即可。 举个例子： @@ -25,39 +25,38 @@ forumTopicId: 301020 } ``` -**注意：** -下面的 CSS 代码与上面的结果不同： +**注意：**以下的 CSS 解决方案与上面的结果不同：
    -
  • display: none;或visibility: hidden;会把内容彻底隐藏起来，对于屏幕阅读器也不例外。
    • -
  • 如果把值设置为 0px，如width: 0px; height: 0px;，意味着让元素脱离文档流，这样做也会让元素被屏幕阅读器忽略。
    • +
  • display: none; 或 visibility: hidden; 会把内容彻底隐藏起来，屏幕阅读器也无法获取这些内容。
    • +
  • 如果把值设置为 0px，如 width: 0px; height: 0px;，意味着让元素脱离文档流，这样做同样也会让屏幕阅读器忽略此元素。
# --instructions-- -Camper Cat 为他的训练页面创建了一个十分酷炫的条形图，并将数据放入表格中，供屏幕阅读器用户使用。表格已经有了一个`sr-only`类，但是还没有添加 CSS 规则。请设置`position`的值为 absolute，`left` 的值为 -10000px，`width`与`height`的值为 1px。 +Camper Cat 为他的训练页面创建了一个十分酷炫的条形图。考虑到可访问性，他还将数据放入到了一个表格中，供屏幕阅读器用户使用。表格的 `class` 为 `sr-only`，但是还没有添加 CSS 规则。请将 `position` 的值设置为 absolute、`left` 的值设置为 -10000px、`width` 与 `height` 的值均设置为 1px。 # --hints-- -`sr-only`类中的`position`属性的值应为 absolute。 +`class` 为 `sr-only` 的元素的 `position` 属性值应为 absolute。 ```js assert($('.sr-only').css('position') == 'absolute'); ``` -`sr-only`类中的`left`属性的值应为 -10000px。 +`class` 为 `sr-only` 的元素的 `left` 属性值应为 -10000px。 ```js assert($('.sr-only').css('left') == '-10000px'); ``` -`sr-only`类中的`width`属性的值应为 1px。 +`class` 为 `sr-only` 的元素的 `width` 属性值应为 1px。 ```js assert(code.match(/width:\s*?1px/gi)); ``` -`sr-only`类中的`height`属性的值应为 1px。 +`class` 为 `sr-only` 的元素的 `height` 属性值应为 1px。 ```js assert(code.match(/height:\s*?1px/gi)); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md index b302ac4ff3..e742413368 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md @@ -8,9 +8,9 @@ forumTopicId: 1 # --description-- -HTML 提供`accesskey`属性，用于指定激活标签或者使标签获得焦点的快捷键，这可以使键盘用户的导航更加便捷。 +HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。这可以让键盘用户的导航更加便捷。 -HTML5 允许在任何标签上使用这个属性。该属性 （如链接、按钮、表单控件等）十分有用。 +HTML5 允许在任何标签上使用这个属性。该属性尤其适用于链接、按钮、表单组件等元素。 举个例子： @@ -18,29 +18,29 @@ HTML5 允许在任何标签上使用这个属性。该属性 （如链接、按 # --instructions-- -Camper Cat 希望为他的两篇博客的标题的链接设置快捷键，以使用户可以快速导航到文章的全文。请为这两个链接添加`accesskey`属性，并将第一个设置为 "g"（表示 Garfield），第二个设置为 "c"（表示 Chuck Norris）。 +Camper Cat 希望为他两篇博客的标题链接设置快捷键，以使用户可以快速导航到文章的全文。请为这两个链接添加 `accesskey` 属性，并将第一个的属性值设置为 "g"（表示 Garfield），将第二个的属性值设置为 "c"（表示 Chuck Norris）。 # --hints-- -你应该为`id`是 "first" 的`a`标签添加`accesskey`属性。 +`id` 为 "first" 的 `a` 标签应具有 `accesskey` 属性。 ```js assert($('#first').attr('accesskey')); ``` -你应该为`id`是 "second" 的`a`标签添加`accesskey`属性。 +`id` 为 "second" 的 `a` 标签应具有 `accesskey` 属性。 ```js assert($('#second').attr('accesskey')); ``` -你应该将`id`是 "first" 的`a`标签的`accesskey`属性值设置为小写 "g"。 +`id` 为 "first" 的 `a` 标签的 `accesskey` 属性值应为小写的 "g"。 ```js assert($('#first').attr('accesskey') == 'g'); ``` -你应该将`id`是 "second" 的`a`标签的`accesskey`属性值设置为小写 "c"。 +`id` 为 "second" 的 `a` 标签的 `accesskey` 属性值应为小写的 "c"。 ```js assert($('#second').attr('accesskey') == 'c'); diff --git a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md index 88e065d000..7f6fafbfad 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md @@ -1,6 +1,6 @@ --- id: 587d7788367417b2b2512aa3 -title: 使用 footer 元素使屏幕阅读器更容易导航 +title: 使用 footer 元素来让屏幕阅读器更容易进行导航 challengeType: 0 videoUrl: 'https://scrimba.com/c/crVrDh8' forumTopicId: 301022 @@ -8,27 +8,27 @@ forumTopicId: 301022 # --description-- -与`header`和`nav`类似，`footer`也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。 +与 `header` 和 `nav` 类似，`footer` 元素也具有语义化的特性，可以让辅助工具快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。 # --instructions-- -Camper Cat 的忍者训练页面进展顺利。请将他在页面底部呈现版权信息的`div`标签更改为`footer`标签。 +Camper Cat 的忍者训练页面进展顺利。请将他在页面底部呈现版权信息的 `div` 元素更改为 `footer` 元素。 # --hints-- -你的代码中应该包含 1 个`footer`标签。 +应存在一个 `footer` 标签。 ```js assert($('footer').length == 1); ``` -你的代码中不应包含`div`标签。 +不应存在 `div` 标签。 ```js assert($('div').length == 0); ``` -你代码中的`footer`应该是闭合的。 +确保 `footer` 元素有结束标签。 ```js assert(code.match(/