chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -9,17 +9,17 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
|
||||
# --description--
|
||||
|
||||
在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。`alt` 属性中的文本作为备用文字来描述图片的内容，这可以帮助用户在图片加载失败或者图片不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如：
|
||||
在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。 `alt` 属性中的文本作为备用文字来描述图片内容， 这可以帮助用户在图片加载失败或者图片不可见的情况下理解图片内容， 也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。 例如：
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
|
||||
视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别 `alt` 属性，朗读其中的内容，来告知用户图片包含的关键信息。
|
||||
视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。 他们无法通过直观的呈现理解信息。 屏幕阅读器可以识别 `alt` 属性，朗读其中的内容，来告知用户图片包含的关键信息。
|
||||
|
||||
`alt` 文本可以为屏幕阅读器提供图片的描述信息，所以你应始终为图片添加 `alt` 属性。另外，根据最新的 HTML5 标准，为图片添加 `alt` 属性是必需的。
|
||||
`alt` 文本可以为屏幕阅读器提供图片的描述信息， 所以你应始终为图片添加 `alt` 属性。 另外，根据最新的 HTML5 标准，为图片添加这个属性是必须的。
|
||||
|
||||
# --instructions--
|
||||
|
||||
碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。在这个网站中，他添加了一张展示技能的资料图片，并希望这张图片可以让访问网站的所有用户看到。请给 `img` 标签添加一个 `alt` 属性，说明 Camper Cat 在学习空手道（图片的 `src` 属性指向的是一个不存在的文件，因此你可以看到 `alt` 属性中的文本出现在页面上）。
|
||||
碰巧，Camper Cat 是忍者中写代码最厉害的，他正在建立一个可以分享忍者知识的网站。 他想要使用的个人资料图片显示了他的技能，应该得到所有网站访问者的赞赏。 请给 `img` 标签添加一个 `alt` 属性，说明 Camper Cat 在学习空手道 （图片的 `src` 属性指向的是一个不存在的文件，因此你可以看到 `alt` 属性中的文本出现在页面上）。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: add-an-accessible-date-picker
|
||||
|
||||
# --description--
|
||||
|
||||
表单中经常出现 `input` 标签，它可以用来创建多种表单控件。它的 `type` 属性指定了所要创建的 `input` 标签类型。
|
||||
表单中经常出现 `input` 标签，它可以用来创建多种表单控件。 它的 `type` 属性指定了所要创建的 `input` 标签类型。
|
||||
|
||||
在以前的挑战中，我们已经见过 `text` 与 `submit` 类型的 `input` 标签。HTML5 规范添加了 `date` 类型来创建日期选择器。如果浏览器支持，在点击 `input` 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。
|
||||
在以前的挑战中，我们已经见过 `text` 与 `submit` 类型的 input 标签。 HTML5 规范添加了 `date` 类型来创建日期选择器。 如果浏览器支持，在点击 `input` 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。
|
||||
|
||||
对于旧版本的浏览器，由于不支持 `date`，此时 `type` 属性会被浏览器设置为 `text`。这种情况下，我们可以利用 `label` 标签或者占位符文本来提示用户需要输入的日期格式。
|
||||
对于较老的浏览器，类型将默认为 `text`， 这样它可以通过 `label` 或 `placeholder` 文本向用户显示预期的日期格式。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -24,29 +24,29 @@ dashedName: add-an-accessible-date-picker
|
||||
|
||||
# --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` 标签。
|
||||
日期选择器应有一个 `input` 标签。
|
||||
|
||||
```js
|
||||
assert($('input').length == 2);
|
||||
```
|
||||
|
||||
`input` 标签的 `type` 属性值应该为 date。
|
||||
`input` 标签应有一个值为 `date` 的 `type` 属性。
|
||||
|
||||
```js
|
||||
assert($('input').attr('type') == 'date');
|
||||
```
|
||||
|
||||
`input` 标签的 `id` 应为 pickdate。
|
||||
`input` 标签应有一个值为 `pickdate` 的 `id` 属性。
|
||||
|
||||
```js
|
||||
assert($('input').attr('id') == 'pickdate');
|
||||
```
|
||||
|
||||
`input` 标签的 `name` 属性值应该为 date。
|
||||
`input` 标签应有一个值为 `date` 的 `name` 属性。
|
||||
|
||||
```js
|
||||
assert($('input').attr('name') == 'date');
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: 考虑色盲用户的需求仔细选择传达信息的颜色
|
||||
title: >-
|
||||
考虑色盲用户的需求仔细选择传达信息的颜色
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437as3'
|
||||
forumTopicId: 301011
|
||||
@ -10,15 +11,15 @@ dashedName: >-
|
||||
|
||||
# --description--
|
||||
|
||||
色盲的形式有很多种，它的表现可以从对特定波长光波的感知度较低，到完全无法看到颜色。最常见的形式是对绿色的低感知度。
|
||||
色盲的形式有很多种， 它的表现可以从对特定波长光波的感知度较低，到完全无法看到颜色。 最常见的形式是对绿色的低感知度。
|
||||
|
||||
例如，如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法区分它们。色轮上距离较近的颜色，特别是相邻的颜色，看起来都会很难区分。在表示重要信息的时候应避免使用这类相近颜色的组合。
|
||||
例如，如果内容的前景色与背景色是两种相近的绿色，那么色盲用户可能会无法区分它们。 色轮上距离较近的颜色，特别是相邻的颜色，看起来都会很难区分。 在表示重要信息的时候应避免使用这类相近颜色的组合。
|
||||
|
||||
**注意：**一些在线颜色选择器有色盲模拟功能，可以模拟颜色在不同形式的色盲中所呈现的效果。它们和在线对比度检查器一样，都是很好的工具。
|
||||
**注意：**一些在线颜色选择器有色盲模拟功能，可以模拟颜色在不同形式的色盲中所呈现的效果。 它们和在线对比度检查器一样，都是很好的工具。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 正在测试一个重要按钮的不同样式。在色轮上，用于背景色的黄色（`#FFFF33`）和文字颜色绿色（`#33FF33`）是相邻的色调，一些色盲用户几乎无法区分它们，而且这两个颜色的亮度相近，对比度太小。为了解决这两个问题，请将文本的 `color` 修改为深蓝色（`#003366`）。
|
||||
Camper Cat 正在测试一个重要按钮的不同样式。 在色轮上，用于 `background-color` 的黄色（`#FFFF33`）和用于 `color` 的绿色（`#33FF33`）是相邻的色调，一些色盲用户几乎无法区分它们 （而且这两个颜色的亮度相近，对比度太小。） 为了解决这两个问题，请将文本的 `color` 修改为深蓝色（`#003366`）。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,17 +9,17 @@ dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
|
||||
|
||||
# --description--
|
||||
|
||||
颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以区分它们。
|
||||
颜色是可视化设计的重要组成部分，但是使用颜色也引入了两个可访问性问题。 首先，不能仅仅使用颜色作为传达重要信息的唯一方式，因为屏幕阅读器无法获取这些信息。 其次，前景色与背景色需要有足够的对比度，这样色盲用户才可以区分它们。
|
||||
|
||||
在之前的挑战中，我们用文本备用方案解决了第一个问题。在上一个挑战中，我们使用对比度检测工具解决了第二个问题。WCAG 建议为颜色及灰度组合使用 4.5 : 1 的对比度。
|
||||
在之前的挑战中，我们用文本备用方案解决了第一个问题。 在上一个挑战中，我们使用对比度检测工具解决了第二个问题。 WCAG 建议为颜色及灰度组合使用 4.5:1 的对比度。
|
||||
|
||||
色盲用户无法将一些颜色与另一些颜色区分出来，这通常是因为色调，有时候是因为亮度。你可能还记得，对比度是用前景色与背景色的相对亮度计算的。
|
||||
色盲用户无法将一些颜色与另一些颜色区分出来，这通常是因为色调，有时候是因为亮度。 你可能还记得，对比度是用前景色与背景色的相对亮度计算的。
|
||||
|
||||
实践中，在对比度检测工具的帮助下，我们可以通过将较暗的颜色变暗、将较淡的颜色变淡的方法来使对比度达到 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。 这样，通过修改 `hsl()` 属性的第三个参数，我们可以很轻松地调整颜色的亮度。 请将 `background-color` 的亮度从 35% 增加到 55%，将 `color` 的亮度从 20% 减少到 15%， 这样可以使对比度达到 5.9:1。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,17 +9,17 @@ dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||
|
||||
# --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(
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: improve-accessibility-of-audio-content-with-the-audio-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 的 `audio` 标签用于呈现音频内容或音频流，它也具有语义化特性。可以在 `audio` 上下文中为音频内容添加描述文字或字幕链接，使听觉障碍用户也能获取音频中的信息。
|
||||
HTML5 的 `audio` 标签用于呈现音频内容或音频流，它也具有语义化特性。 音频内容也需要备用文本，供聋哑人或听力困难的人使用。 这可以通过页面上的文本或与字幕链接来实现。
|
||||
|
||||
`audio` 支持 `controls` 属性，可以使浏览器为音频提供具有开始、暂停等功能的播放控件，而且还支持键盘操作。`controls` 属性是一个布尔属性，即不需要提供属性值。只要这个属性出现在 `audio` 标签中，浏览器就会开启播放控件。
|
||||
`audio` 标签支持 `controls` 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。 这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -22,13 +22,13 @@ HTML5 的 `audio` 标签用于呈现音频内容或音频流，它也具有语
|
||||
</audio>
|
||||
```
|
||||
|
||||
**注意：**多媒体内容通常同时包含音频与视频部分，它需要同步的字幕与逐字稿，以使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。
|
||||
**注意：**多媒体内容通常同时包含音频与视频部分， 它需要同步的字幕，使视觉或听觉障碍用户可以获取它的内容。 一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。
|
||||
|
||||
# --instructions--
|
||||
|
||||
是时候让 Camper Cat 休息一下，并与朋友 Zersiax (@zersiax) 会面。Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。为了体验屏幕阅读器的朗读效果，请在 `p` 标签之后添加一个具有 `controls` 属性的 `audio` 标签。然后在 `audio` 标签内添加一个 `source` 标签并设置 `src` 属性值为 "`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`"。同时，请将 `source` 的 `type` 属性值设置为 "audio/mpeg"。
|
||||
是时候让 Camper Cat 休息一下，并与朋友 Zersiax (@zersiax) 会面了。 Zersiax 是一位屏幕阅读器用户，同时也是无障碍设计的高手。 为了体验屏幕阅读器的朗读效果，请在 `p` 标签之后添加一个 `audio` 标签， 具有 `controls` 属性。 然后在 `audio` 标签里面放一个带有 `src` 属性的 `source` 标签，属性值为 `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`。将 `type` 属性设置为 `"audio/mpeg"`.
|
||||
|
||||
**注意：**音频片段的播放速度可能会快到另我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。
|
||||
**注意：**音频片段的播放速度可能会快到令我们难以理解，但是对于屏幕阅读器用户来说这是正常速度。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: improve-chart-accessibility-with-the-figure-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。通过语义化对内容进行分组并配以用于解释 `figure` 的文字，可以极大地提升内容的可访问性。
|
||||
HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 通过语义化对内容进行分组并配以用于解释 `figure` 的文字，可以极大地提升内容的可访问性。
|
||||
|
||||
对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。
|
||||
对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。 但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。
|
||||
|
||||
举个例子，注意 `figcaption` 包含在 `figure` 标签中，并且可以与其他标签组合使用：
|
||||
|
||||
@ -27,17 +27,17 @@ HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。它
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。请帮助完善他的页面，将他用于呈现图表的 `div` 标签修改为 `figure` 标签；将用于呈现图表标题的 `p` 标签改为 `figcaption` 标签。
|
||||
Camper Cat 正在努力创建一张条形图，用来显示每周用于隐形、战斗、武器训练的时间。 请帮助完善他的页面，将他用于呈现图表的 `div` 标签修改为 `figure` 标签；将用于呈现图表标题的 `p` 标签改为 `figcaption` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
应存在 1 个 `figure` 标签。
|
||||
应存在一个 `figure` 标签。
|
||||
|
||||
```js
|
||||
assert($('figure').length == 1);
|
||||
```
|
||||
|
||||
应存在 1 个 `figcaption` 标签。
|
||||
应存在一个 `figcaption` 标签。
|
||||
|
||||
```js
|
||||
assert($('figcaption').length == 1);
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
|
||||
# --description--
|
||||
|
||||
合理地使用语义化 HTML 标签和属性可以提升页面的可访问性。在接下来的挑战中，你将会看到在表单中使用属性的场景。
|
||||
合理地使用语义化 HTML 标签和属性可以提升页面的可访问性。 在接下来的挑战中，你将会看到在表单中使用属性的场景。
|
||||
|
||||
`label` 标签的文本内容通常会是表单组件的名称或标签。这些文本表明了组件的意义，也提升了表单的可访问性。`label` 标签的 `for` 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 `for` 属性的属性值。
|
||||
`label` 标签的文本内容通常会是表单组件的名称或标签。 这些文本表明了组件的意义，也提升了表单的可访问性。 `label` 标签的 `for` 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 `for` 属性的属性值。
|
||||
|
||||
在 HTML 基础章节中，我们已经学习使用了单选按钮标签。在那次挑战中，为了让标签可以在点击的时候也选中输入框，我们将 `input` 标签嵌套在了 `label` 标签里面。在本节课程中，我们会了解到另外一种实现这个功能的方法，那就是使用 `for` 属性。
|
||||
在 HTML 基础章节中，我们已经学习使用了单选按钮标签。 在那个挑战中，为了让标签可以在点击的时候也选中输入框，我们将单选按钮 input 标签嵌套在了 `label` 标签里面。 在本节课程中，我们会了解到另外一种实现这个功能的方法，那就是使用 `for` 属性。
|
||||
|
||||
`for` 的属性值必须与表单组件的 `id` 属性值相同。举个例子：
|
||||
`for` 的属性值必须与表单组件的 `id` 属性值相同。 举个例子：
|
||||
|
||||
```html
|
||||
<form>
|
||||
@ -26,17 +26,17 @@ dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 觉得他的博客文章会有很多人订阅，因此他想添加一个电子邮件注册表单。请为表示电子邮件的 `label` 标签添加 `for` 属性，并将其属性值设置为与 `input` 标签的 `id` 属性值相同。
|
||||
Camper Cat 觉得他的博客文章会有很多人订阅，因此他想添加一个电子邮件注册表单。 请为表示电子邮件的 `label` 标签添加 `for` 属性，并将其属性值设置为与 `input` 标签的 `id` 属性值相同。
|
||||
|
||||
# --hints--
|
||||
|
||||
`label `标签应该有一个非空的 `for` 属性。
|
||||
`label`标签应该有一个非空的 `for` 属性。
|
||||
|
||||
```js
|
||||
assert($('label').attr('for'));
|
||||
```
|
||||
|
||||
`for` 的属性值应与用于输入邮箱的 `input` 标签 id 属性值相同。
|
||||
`for` 的属性值应与用于输入邮箱的 `input` 标签 `id` 属性值相同。
|
||||
|
||||
```js
|
||||
assert($('label').attr('for') == 'email');
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: improve-readability-with-high-contrast-text
|
||||
|
||||
# --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--
|
||||
|
||||
|
||||
@ -9,17 +9,17 @@ dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。这不仅为开发人员提供了更多的选择，同时也提升了网页的可访问性。
|
||||
HTML5 引入了一些新元素，其中包括无障碍特性，给予开发者更多的选择。 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--
|
||||
|
||||
|
||||
@ -9,19 +9,19 @@ dashedName: know-when-alt-text-should-be-left-blank
|
||||
|
||||
# --description--
|
||||
|
||||
在上一个挑战中，我们了解到 `img` 标签必须有一个 `alt` 属性。不过在图片已经有标题作为文字说明，或者图片仅用作装饰的情况下，`alt` 属性似乎有些多余。
|
||||
在上一个挑战中，我们了解到 `img` 标签必须有一个 `alt` 属性。 但是，有时图像通过它们的描述文本被归类，或者只用于装饰。 在这些情况下， `alt` 文本可能是多余的或没有必要的。
|
||||
|
||||
即便如此，我们仍然需要为 `img` 标签添加 `alt` 属性，但这时我们应把它的属性值设为空，例如：
|
||||
在图像已经用文本内容解释或没有为页面添加内容的情况下， `img` 仍然需要一个 `alt` 属性，但可以设置为空字符串。 例如：
|
||||
|
||||
`<img src="visualDecoration.jpeg" alt="">`
|
||||
|
||||
比如，背景图片通常起装饰作用。但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器无法读取。
|
||||
比如，背景图片通常起装饰作用。 但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器无法读取。
|
||||
|
||||
**注意：**对于有标题的图片，我们依然需要添加 `alt` 属性，因为这样有助于搜索引擎记录图片内容。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的 `alt` 属性（注意：这里 `img` 标签的 `src` 属性提供的链接是无效的，因此页面上不会显示任何忍者刀的图片，不用担心）。
|
||||
Camper Cat 已经大体写好了博客页面。 他打算在他的两篇文章之间添加一个武士剑装饰图片，作为两篇文章之间的分割线。 为 `img` 标签添加 `alt` 属性，把它的属性值设为空。 （注意：这里图片的 `src` 属性提供的链接是无效的，因此页面上不会显示任何武士刀的图片，不用担心）。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
|
||||
# --description--
|
||||
|
||||
到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。
|
||||
到目前为止，所有关于可访问性的挑战都没有使用 CSS。 这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。
|
||||
|
||||
但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，此时我们可以用 CSS 来实现。当信息以可视化形式（比如图表）展示，而屏幕阅读器用户需要另一种方式（比如表格）来获取信息时，我们就可以用 CSS 来解决这个问题：只需要把仅供屏幕阅读器使用的信息通过 CSS 定位到浏览器可见区域之外即可。
|
||||
但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。 当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下， 使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -35,29 +35,29 @@ dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 为他的训练页面创建了一个十分酷炫的条形图。考虑到可访问性，他还将数据放入到了一个表格中，供屏幕阅读器用户使用。表格的 `class` 为 `sr-only`，但是还没有添加 CSS 规则。请将 `position` 的值设置为 absolute、`left` 的值设置为 -10000px、`width` 与 `height` 的值均设置为 1px。
|
||||
Camper Cat 为他的训练页面创建了一个十分酷炫的条形图。 考虑到可访问性，他还将数据放入到了一个表格中，供屏幕阅读器用户使用。 表格已有一个 `sr-only` class，但是还没有添加 CSS 规则。 设置 `position` 的值为 `absolute`，`left` 的值为 `-10000px`，`width` 和 `height` 的值均为 `1px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`class` 为 `sr-only` 的元素的 `position` 属性值应为 absolute。
|
||||
设置 `sr-only` class 的 `position` 属性值为 `absolute`。
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
`class` 为 `sr-only` 的元素的 `left` 属性值应为 -10000px。
|
||||
设置 `sr-only` class 的 `left` 属性值为`-10000px`。
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('left') == '-10000px');
|
||||
```
|
||||
|
||||
`class` 为 `sr-only` 的元素的 `width` 属性值应为 1px。
|
||||
设置 `sr-only` class 的 `width` 属性值为`1` px。
|
||||
|
||||
```js
|
||||
assert(code.match(/width:\s*?1px/gi));
|
||||
```
|
||||
|
||||
`class` 为 `sr-only` 的元素的 `height` 属性值应为 1px。
|
||||
设置 `sr-only` class 的 `height` 属性值为 `1` px。
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?1px/gi));
|
||||
|
||||
@ -3,15 +3,15 @@ id: 587d7790367417b2b2512aaf
|
||||
title: 通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQvmaTp'
|
||||
forumTopicId: 1
|
||||
forumTopicId: 301021
|
||||
dashedName: make-links-navigable-with-html-access-keys
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。这可以让键盘用户的导航更加便捷。
|
||||
HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。 这可以让键盘用户的导航更加便捷。
|
||||
|
||||
HTML5 允许在任何标签上使用这个属性。该属性尤其适用于链接、按钮、表单组件等元素。
|
||||
HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链接、按钮、表单组件等元素。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -19,29 +19,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');
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark
|
||||
|
||||
# --description--
|
||||
|
||||
与 `header` 和 `nav` 类似，`footer` 元素也具有语义化的特性，可以让辅助工具快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。
|
||||
与 `header` 和 `nav` 类似，`footer` 元素也具有语义化的特性，可以让辅助工具快速定位到它。 它位于页面底部，用于呈现版权信息或者相关文档链接。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 的忍者训练页面进展顺利。请将他在页面底部呈现版权信息的 `div` 元素更改为 `footer` 元素。
|
||||
Camper Cat 的忍者训练页面进展顺利。 请将他在页面底部呈现版权信息的 `div` 元素更改为 `footer` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,15 +9,15 @@ dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
|
||||
|
||||
# --description--
|
||||
|
||||
`header` 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
|
||||
`header` 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。
|
||||
|
||||
与 `main` 类似，`header` 的语义化特性也可以让辅助工具快速定位到它的内容。
|
||||
|
||||
**注意：**`header` 应当在 HTML 文档的 `body` 标签内使用。请注意，`header` 标签与包含页面标题、元信息的 `head` 标签本不相同。
|
||||
**注意：**`header` 应当在 HTML 文档的 `body` 标签内使用。 请注意，这个标签与包含页面标题、元信息的 `head` 标签本不相同。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 正在创作一些训练忍者的精彩文章，并打算为这些文章创建一个新的页面。请把包含 `h1` 的 `div` 标签替换为 `header` 标签。
|
||||
Camper Cat 正在创作一些训练忍者的精彩文章，并打算为这些文章创建一个新的页面。 请把包含 `h1` 的 `div` 标签替换为 `header` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark
|
||||
|
||||
# --description--
|
||||
|
||||
`nav` 也是一个具有语义化特性的 HTML5 标签，用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别出页面中的导航信息。
|
||||
`nav` 也是一个具有语义化特性的 HTML5 标签，它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。
|
||||
|
||||
对于在多个页面底部出现的站点链接，我们不需要使用 `nav` 标签。此时，使用 `footer` 标签会更好。我们将会在下个挑战中学习 `footer` 标签的使用。
|
||||
对于在多个页面底部出现的站点链接，我们不需要使用 `nav` 标签。 我们将会在下个挑战中学习 `footer` 标签的使用。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 在他的忍者训练页面顶端放置了多个导航链接，但这些链接都写在了 `div` 中。请将 `div` 标签更改为 `nav` 标签，以提升页面的可访问性。
|
||||
Camper Cat 在他的忍者训练页面顶端放置了多个导航链接，但这些链接都写在了 `div` 中。 请将 `div` 标签更改为 `nav` 标签，以提升页面的可访问性。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
|
||||
# --description--
|
||||
|
||||
继续日期主题。HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。`time` 是一个行内标签，用于在页面中呈现日期或时间，而 `datetime` 属性用户设置日期的格式，辅助设备会获取这个值。通过标准化时间格式，即使时间在文本中是以非正式或口语化的形式编写，辅助设备依然可以获取准确的时间和日期。
|
||||
继续日期主题。 HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。 这是一个行内元素，用于在页面中呈现日期或时间， 而 `datetime` 属性用于设置日期的格式。 辅助设备可以获取这个值。 即使在文本中以非正式的方式或学术方式撰写，它也有助于避免混乱，因为它规定了时间的标准化版本。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -17,7 +17,7 @@ dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 的比武大会的时间确定了！请使用 `time` 标签包裹文本 "Thursday, September 15<sup>th</sup>"，并将 `datetime` 的属性值设置为 "2016-09-15"。
|
||||
Camper Cat 的比武大会的时间确定了！ 用 `time` 标签包裹文本 `Thursday, September 15<sup>th<sup>`，添加一个 `datetime` 属性，将属性值设置为 `2016-09-15`。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,21 +9,21 @@ dashedName: use-headings-to-show-hierarchical-relationships-of-content
|
||||
|
||||
# --description--
|
||||
|
||||
标题标签（包括 `h1` 到 `h6`）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为了快速了解页面纲要，可以设置让阅读器只朗读页面标题。这意味着我们不应仅仅为了设置不同字号而使用标题，而应让标签本身具有语义化和实质性的含义，同时不同标题之间也应关联（具有层级关系）。
|
||||
标题标签（包括 `h1` 到 `h6`）有很高的使用率，它们用于描述内容的主题。 在屏幕阅读器中，用户为了快速了解页面纲要，可以设置让阅读器只朗读页面标题。 这意味着我们不应仅仅为了设置不同字号而使用标题，而应让标签本身具有语义化和实质性的含义，同时不同标题之间也应关联（具有层级关系）。
|
||||
|
||||
*语义化*的意思是，标签名能准确地表达它所含内容的信息类型。
|
||||
|
||||
假如你在写一篇含有引言、正文、结论的论文。此时，如果把结论作为正文的一部分显然没有任何意义，因为结论应该是独立的章节。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。
|
||||
如果你正在撰写带有导言、主体和结论的论文，在你的概要中把结论作为主体的一部分是没有意义的。 结论应该是单独的一个部分。 类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。
|
||||
|
||||
在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。
|
||||
|
||||
比如说，如果我们在一个 `h2` 标签后加上若干由 `h4` 标签引导的页面。此时发生了层级的错位，这会让使用屏幕阅读器的用户感到困惑。尽管在浏览器所显示的页面中，错误地使用这六个标题标签依然可以让它们在视觉效果上看起来很合理。但此时，我们应该按照层级正确地使用标签，然后用 CSS 来调整样式。
|
||||
比如说，如果我们在一个 `h2` 标签后加上若干由 `h4` 标签引导的页面。 此时发生了层级的错位，这会让使用屏幕阅读器的用户感到困惑。 尽管在浏览器所显示的页面中，错误地使用这六个标题标签依然可以让它们在视觉效果上看起来很合理。 但此时，我们应该按照层级正确地使用标签，然后用 CSS 来调整样式。
|
||||
|
||||
最后一点，每个页面应只有一个 `h1` 标签，用来概括说明页面的主题。另外，这六个标题标签可以让搜索引擎获取页面的大纲。
|
||||
最后一点，每个页面应只有一个 `h1` 标签，用来概括说明页面的主题。 另外，这六个标题标签可以让搜索引擎获取页面的大纲。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。请帮助他修改标题标签，使它们语义化且顺序正确。你需要将所有的 `h5` 标题标签调整为恰当的级别（即 `h3` 标题标签），因为它们是 `h2` 标题标签的子级。
|
||||
Camper Cat 希望他的网站有一个介绍如何成为忍者的页面。 帮助他修改好标题，以便他的标记使内容具有语义意义，并显示其章节的父级与子级的关系。 你需要将所有的 `h5` 标题标签调整为恰当的级别，来说明它们是 `h2` 标题标签的子级。 调整为 `h3` 标签即可。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,18 +9,17 @@ dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 的 `tabindex` 属性是与标签焦点相关的属性，给标签加上 tabindex 表示该标签可以获得焦点。`tabindex` 的值可以是零、负整数或正整数，这些数值分别定义了三种行为。
|
||||
HTML 的 `tabindex` 属性有三种与标签焦点相关的功能。 给标签加上 tabindex，表示该标签可以获得焦点。 tabindex 的值（可以是零、负整数或正整数）定义了行为。
|
||||
|
||||
当用户在页面中使用 tab 键时，有些标签（如：链接、表单控件）可以自动获得焦点，它们获得焦点的顺序与它们出现在文档流中的顺序一致。我们可以通过将其他标签（如 `div`、`span`、`p` 等）的 `tabindex` 属性值设为 0 来让它们实现类似的效果。比如：
|
||||
当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点。 它们获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。 我们可以通过将其他标签（如 `div`、`span`、`p` 等）的 `tabindex` 属性值设为 0 来让它们实现类似的效果。 比如：
|
||||
|
||||
`<div tabindex="0">I need keyboard focus!</div>`
|
||||
|
||||
**注意：**
|
||||
`tabindex` 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：将焦点设置到用 `div` 实现的弹出框上）的场景。只是这部分内容已经超出了当前挑战的范围。
|
||||
**注意：** `tabindex` 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。 这种方法通常用于以编程的方式使内容获得焦点（如：将焦点设置到用 `div` 实现的弹出框上）的场景。 只是这部分内容已经超出了当前挑战的范围。
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 新建了一个用来收集他的用户信息的调查。他知道输入框可以自动获得键盘焦点，但他希望用户使用键盘切换标签时，焦点可以停留在指示文字（Instructions）上。请给 `p` 标签添加 `tabindex` 属性，并将它的属性值设为 0。注意：使用 `tabindex` 属性还可以让 CSS 伪类 `:focus` 在 `p` 标签上生效。
|
||||
Camper Cat 新建了一个用来收集他的用户信息的调查。 他知道输入框可以自动获得键盘焦点，但他希望用户使用键盘切换标签时，焦点可以停留在指示文字（Instructions）上。 给 `p` 标签添加一个 `tabindex` 属性，将属性值设置为 `0`。 注意：使用 `tabindex` 属性还可以让 CSS 伪类 `:focus` 在 `p` 标签上生效。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elem
|
||||
|
||||
# --description--
|
||||
|
||||
`tabindex` 属性还可以指定元素的 tab 键焦点顺序，将它的值设置为大于等于 1 的整数就可以实现这个功能。
|
||||
`tabindex` 属性还可以指定元素的 tab 键焦点顺序， 将它的值设置为大于等于 1 的整数，就可以实现这个功能。
|
||||
|
||||
在使用键盘导航时，`tabindex` 属性值为 1 的元素会最先聚焦（选中）；之后，焦点将按照 `tabindex` 值（如：2、3 等）的顺序进行移动，最后回到默认（即 `tabindex` 值为 0）的元素上，如此循环。
|
||||
给元素设置 `tabindex="1"`，键盘将首先把焦点放在这个元素上。 然后它按照指定的 `tabindex` 值（2、3 等等）顺序循环，再移动到默认值和 `tabindex="0"` 项目。
|
||||
|
||||
需要注意的是，使用这种方式设置 tab 键焦点顺序会覆盖默认顺序，其中默认顺序为标签在文档流中出现的顺序。这可能会让那些希望从页面顶部开始导航的用户感到困惑。使用 `tabindex` 在某些情况下是必要的，但在使用时要充分考虑到页面的可访问性。
|
||||
需要注意的是，使用这种方式设置 tab 键焦点顺序会覆盖默认顺序，其中默认顺序为标签在文档流中出现的顺序。 这可能会让那些希望从页面顶部开始导航的用户感到困惑。 使用 tabindex 在某些情况下是必要的，但在使用时要充分考虑到页面的可访问性。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -23,29 +23,29 @@ dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elem
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 把这个区域定位在页面的右上角。Camper Cat 希望他的搜索（search）`input` 与提交（submit）`input` 表单控件是 tab 键焦点顺序的前两项。请为搜索（search）`input` 添加 `tabindex` 属性，其属性值为 1；为提交（submit）`input` 添加 `tabindex` 属性，其属性值为 2。
|
||||
Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 把这个区域定位在页面的右上角。 Camper Cat 希望他的搜索（search）`input` 与提交（submit）`input` 表单控件是 tab 键焦点顺序的前两项。 给 `search` `input` 添加一个 `tabindex` 属性，属性值为 `1`。给 `submit` `input` 添加一个 `tabindex` 属性，属性值为 `2`。
|
||||
|
||||
# --hints--
|
||||
|
||||
搜索 `input` 标签应包含 `tabindex` 属性。
|
||||
应给 `search` `input` 标签添加一个 `tabindex` 属性。
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex'));
|
||||
```
|
||||
|
||||
提交 `input` 标签应包含 `tabindex` 属性。
|
||||
应给 `submit` `input` 添加一个 `tabindex` 属性。
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex'));
|
||||
```
|
||||
|
||||
搜索 `input` 标签的 `tabindex` 属性值应为 1。
|
||||
`search` `input` 标签的 `tabindex` 属性值应为 1。
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex') == '1');
|
||||
```
|
||||
|
||||
提交 `input` 标签的 `tabindex` 属性值应为 2。
|
||||
`submit` `input` 标签的 `tabindex` 属性值应为 2。
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex') == '2');
|
||||
|
||||
@ -9,34 +9,29 @@ dashedName: wrap-content-in-the-article-element
|
||||
|
||||
# --description--
|
||||
|
||||
`article` 是另一个具有语义化特性的 HTML5 新标签。`article` 是一个用于表示独立且可复用结构的标签，用于呈现独立及完整的内容。这个标签适用于播客文章、论坛帖子或者新闻文章。
|
||||
`article` 是另一个具有语义化特性的 HTML5 新标签。 `article` 是一个用于表示独立且可复用结构的标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。
|
||||
|
||||
有些技巧可以用来判断内容是否独立，像是如果内容脱离了上下文，这些内容是否仍然有意义？类似地，对于文本内容，可否把这些内容放到 RSS 推送里？如果回答是肯定的，那我们就可以认为这些内容是独立的。
|
||||
确定内容是否可以单独作为一部分，通常是个人的判断，但你可以使用几个简单的测试。 如果删除了所有周围的上下文，这个内容是否仍然有意义？ 类似地，对于文本内容，可否把这些内容放到 RSS 推送里？
|
||||
|
||||
请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。
|
||||
|
||||
**请注意 `section` 和 `div` 的区别：**
|
||||
`section` 也是一个 HTML5 新标签，它与 `article` 标签的语义含义略有不同。`article` 用于独立且完整的内容，而 `section` 用于对与主题相关的内容进行分组。它们可以根据需要来嵌套使用。举个例子：如果一本书是一个 `article` 的话，那么每个章节就是 `section`。当内容组之间没有联系时，我们可以使用 `div`。
|
||||
**注意：**`section` 元素也是 HTML5 引入的新元素，其语义与 `article` 略有不同。 `article` 用于独立且完整的内容，而 `section` 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用。 举个例子：如果一本书是一个 `article` 的话，那么每个章节就是 `section`。 当内容组之间没有联系时，我们可以使用 `div`。
|
||||
|
||||
```html
|
||||
<div> - groups content
|
||||
<section> - groups related content
|
||||
<article> - groups independent, self-contained content
|
||||
```
|
||||
`<div>` - 一组内容 `<section>` - 几组相关的内容 `<article>` - 几组独立的内容
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat 打算使用 `article` 标签来呈现他的博客页面里的帖子，但是他还没有加到最上面的帖子上。请使用 `article` 标签来代替 `div` 标签。
|
||||
Camper Cat 打算使用 `article` 标签来呈现他的博客页面里的帖子，但是他忘记在顶部的帖子上使用这个标签。 将 `div` 标签改为 `article` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
应存在 3 个 `article` 标签。
|
||||
应有三个 `article` 标签。
|
||||
|
||||
```js
|
||||
assert($('article').length == 3);
|
||||
```
|
||||
|
||||
不应存在 `div` 标签。
|
||||
不应有 `div` 标签。
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
|
||||
# --description--
|
||||
|
||||
下一个表单主题与单选按钮的可访问性有关。在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，`for` 的属性值指向相关选项的 `id`。然而单选按钮通常成组出现，而且用户必须选择其中一项。本次挑战介绍一种可以语义化呈现单选按钮组的方法。
|
||||
下一个表单主题涵盖单选按钮的可访问性。 在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，这些属性值指向相关选项的 `id`。 然而单选按钮通常成组出现，而且用户必须选择其中一项。
|
||||
|
||||
我们可以使用 `fieldset` 标签将单选按钮组包含在里面，通常还会使用 `legend` 标签来为单选按钮组提供文字说明。屏幕阅读器也可以朗读这些文字。
|
||||
`fieldset` 标签包裹整组单选按钮，实现这个功能。 我们可以使用 `fieldset` 标签将单选按钮组包含在里面，通常还会使用 `legend` 标签来为单选按钮组提供文字说明。 屏幕阅读器也可以朗读这些文字。
|
||||
|
||||
当选项的含义很明确时，如“性别选择”，`fieldset` 与 `legend` 标签可以省略。这时，使用包含 `for` 属性的 `label` 标签就足够了。
|
||||
当选项的含义很明确时，如“性别选择”，`fieldset` 与 `legend` 标签可以省略。 这时，使用包含 `for` 属性的 `label` 标签就足够了。
|
||||
|
||||
举个例子：
|
||||
|
||||
@ -33,7 +33,7 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
|
||||
# --instructions--
|
||||
|
||||
当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。通过上一个挑战的学习，Camper Cat 创建了一组单选按钮，并为每个选项的 `label` 标签添加了 `for` 属性，但是 Camper Cat 的代码依然需要你的帮助。请将包含单选按钮组的 `div` 标签替换为 `fieldset` 标签；将 `p` 标签替换为 `legend` 标签。
|
||||
当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。 他添加了一组单选按钮，并从我们之前的课程中吸取了教训，为每个选项使用带有 `for` 属性的 `label` 标签。 Camper Cat 加油！ 然而，他仍然需要一些帮助。 请将包含单选按钮组的 `div` 标签替换为 `fieldset` 标签；将 `p` 标签替换为 `legend` 标签。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user