chore(i18n,learn): processed translations (#41454)
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
camperbot
GitHub
@ -9,7 +9,7 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
|
||||
# --description--
|
||||
|
||||
在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。 `alt` 属性中的文本作为备用文字来描述图片内容， 这可以帮助用户在图片加载失败或者图片不可见的情况下理解图片内容， 也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。 例如：
|
||||
在其他挑战里你应该已经见到过 `img` 标签的 `alt` 属性了。 `alt` 属性中的文本来描述图片内容，作为备用文字。 `alt` 属性可以帮助用户在图片加载失败或者不可见的情况下理解图片内容， 搜索引擎也通过它来理解图片内容，并将其加入到搜索结果中。 例如：
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||
|
||||
屏幕阅读器用户可以选择其设备读取的内容的类型， 包括表示“跳转到”（或“跳过”）的元素，跳转到主要内容，或者从标题中获取页面摘要。 用户还可以选择只听取页面中的超链接内容。
|
||||
|
||||
屏幕阅读器通过阅读链接文本（即 `a` 标签的内容文本）来完成这个操作。 如果我们只在链接中写上 "click here"（点击这里）或者 "read more"（阅读更多），显然帮助有限。 相反地，我们应该在 `a` 标签中使用简洁的描述性语言来为用户提供更多信息。
|
||||
屏幕阅读器通过阅读链接文本（即 `a` 标签的内容文本）来完成这个操作。 如果我们只在链接中写上 "click here"（点击这里）或者 "read more"（阅读更多），显然帮助有限。 相反地，应该在 `a` 标签中使用简洁的描述性语言来为用户提供更多的信息。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: improve-chart-accessibility-with-the-figure-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 通过语义化对内容进行分组并配以用于解释 `figure` 的文字，可以极大地提升内容的可访问性。
|
||||
HTML5 引入了 `figure` 标签以及与之相关的 `figcaption` 标签。 它们一起用于展示可视化信息（如：图片、图表）及其标题。 这样通过语义化对内容进行分组并配以用于解释 `figure` 的文字，可以极大地提升内容的可访问性。
|
||||
|
||||
对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。 但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。
|
||||
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
|
||||
# --description--
|
||||
|
||||
合理地使用语义化 HTML 标签和属性可以提升页面的可访问性。 在接下来的挑战中，你将会看到在表单中使用属性的场景。
|
||||
合理地使用语义化的 HTML 标签和属性可以提升页面可访问性。 在接下来的挑战中，你将会看到在表单中使用属性的场景。
|
||||
|
||||
`label` 标签的文本内容通常会是表单组件的名称或标签。 这些文本表明了组件的意义，也提升了表单的可访问性。 `label` 标签的 `for` 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 `for` 属性的属性值。
|
||||
|
||||
在 HTML 基础章节中，我们已经学习使用了单选按钮标签。 在那个挑战中，为了让标签可以在点击的时候也选中输入框，我们将单选按钮 input 标签嵌套在了 `label` 标签里面。 在本节课程中，我们会了解到另外一种实现这个功能的方法，那就是使用 `for` 属性。
|
||||
在 HTML 基础章节中，我们已经学习使用了单选按钮标签。 在那个挑战中，为了让标签可以在点击的时候也选中输入框，我们将单选按钮 input 标签嵌套在了 `label` 标签里面。 在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用 `for` 属性。
|
||||
|
||||
`for` 的属性值必须与表单组件的 `id` 属性值相同。 举个例子：
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: improve-readability-with-high-contrast-text
|
||||
|
||||
低对比度的前景色与背景色会使文本难以阅读。 足够的对比度可以提高内容的可读性，但是怎样的对比度才算是“足够”的？
|
||||
|
||||
Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。 对比度是通过比较两种颜色的相对亮度值来计算的。 对于相同颜色来说，对比度是 1:1，即无对比度；白色与黑色拥有最高对比度 21:1。 在线可用的对比检查工具很多，可以计算这个比率。
|
||||
Web 内容无障碍指南（WCAG）建议正常文本的对比度至少为 4.5 : 1。 对比度是通过比较两种颜色的相对亮度值来计算的。 对比度的范围是从相同颜色的 1:1（无对比度）到白色与黑色的最高对比度 21:1。 在线可用的对比检查工具很多，可以计算这个比率。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 引入了一些新元素，其中包括无障碍特性，给予开发者更多的选择。 HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。
|
||||
HTML5 引入了一些新元素，给予开发者更多的选择，也包含辅助功能。 HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签。
|
||||
|
||||
默认情况下，浏览器呈现这些元素的方式类似于普通的 `div`。 但是，在适当的地方使用它们会让标记文本具有更多的含义。 仅标签名称就可以表示它所包含的信息类型，这给内容增加了语义含义。 辅助技术可以获取这种信息，为用户提供更好的页面摘要或导航选项。
|
||||
|
||||
`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。 这意味着它只应包含与页面中心主题相关的信息， 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。
|
||||
`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。 这是为了围绕与页面中心主题相关的信息， 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。
|
||||
|
||||
`main` 标签的语义化特性可以让辅助工具快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 `main` 标签会自动让辅助设备具有这个跳转的功能。
|
||||
`main` 标签也有一个内嵌的特性，以便辅助技术快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 `main` 标签会自动让辅助设备具有这个跳转的功能。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -11,13 +11,13 @@ dashedName: know-when-alt-text-should-be-left-blank
|
||||
|
||||
在上一个挑战中，我们了解到 `img` 标签必须有一个 `alt` 属性。 但是，有时图像通过它们的描述文本被归类，或者只用于装饰。 在这些情况下， `alt` 文本可能是多余的或没有必要的。
|
||||
|
||||
在图像已经用文本内容解释或没有为页面添加内容的情况下， `img` 仍然需要一个 `alt` 属性，但可以设置为空字符串。 例如：
|
||||
在图片已经有了文字说明，或者仅仅为了美化页面的情况下，`img` 仍然需要一个 `alt` 属性，但可以设置为空字符串。 例如：
|
||||
|
||||
`<img src="visualDecoration.jpeg" alt="">`
|
||||
|
||||
比如，背景图片通常起装饰作用。 但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器无法读取。
|
||||
|
||||
**注意：**对于有标题的图片，我们依然需要添加 `alt` 属性，因为这样有助于搜索引擎记录图片内容。
|
||||
**注意：**对于有标题的图片，依然需要添加 `alt` 文本，因为这样有助于搜索引擎记录图片内容。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
|
||||
# --description--
|
||||
|
||||
到目前为止，所有关于可访问性的挑战都没有使用 CSS。 这是为了让你在关注外观样式之前，先把页面的逻辑结构写清，以及明确语义化标签的重要性。
|
||||
到目前为止，所有关于可访问性的挑战都没有使用 CSS。 这是为了在介绍视觉设计方面之前强调使用逻辑结构和有语义意义的标签的重要性。
|
||||
|
||||
但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。 当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下， 使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: make-links-navigable-with-html-access-keys
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。 这可以让键盘用户的导航更加便捷。
|
||||
HTML 提供 `accesskey` 属性，用于指定激活元素或者使元素获得焦点的快捷键。 添加 `accesskey` 属性可以让使用键盘的用户更高效率地导航。
|
||||
|
||||
HTML5 允许在任何标签上使用这个属性。 该属性尤其适用于链接、按钮、表单组件等元素。
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
|
||||
|
||||
与 `main` 类似，`header` 的语义化特性也可以让辅助工具快速定位到它的内容。
|
||||
|
||||
**注意：**`header` 应当在 HTML 文档的 `body` 标签内使用。 请注意，这个标签与包含页面标题、元信息的 `head` 标签本不相同。
|
||||
**注意：**`header` 应当在 HTML 文档的 `body` 标签内使用。 它与包含页面标题、元信息的 `head` 标签不同。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: 使用 HTML5 的 datatime 属性标准化时间
|
||||
title: 使用 HTML5 的 datetime 属性标准化时间
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||
forumTopicId: 301025
|
||||
@ -9,7 +9,7 @@ dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
|
||||
# --description--
|
||||
|
||||
继续日期主题。 HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。 这是一个行内元素，用于在页面中呈现日期或时间， 而 `datetime` 属性用于设置日期的格式。 辅助设备可以获取这个值。 即使在文本中以非正式的方式或学术方式撰写，它也有助于避免混乱，因为它规定了时间的标准化版本。
|
||||
继续日期主题。 HTML5 还引入了 `time` 标签与 `datetime` 属性来标准化时间。 `datetime` 属性是一个内联元素，可以在一个页面上包含日期或时间。 `datetime` 属性包含的有效格式。 辅助设备可以获取这个值。 这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。
|
||||
|
||||
举个例子：
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@ dashedName: wrap-content-in-the-article-element
|
||||
|
||||
# --description--
|
||||
|
||||
`article` 是另一个具有语义化特性的 HTML5 新标签。 `article` 是一个用于表示独立且可复用结构的标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。
|
||||
`article` 是另一个具有语义化特性的 HTML5 新标签。 `article` 是一个分段标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。
|
||||
|
||||
确定内容是否可以单独作为一部分，通常是个人的判断，但你可以使用几个简单的测试。 如果删除了所有周围的上下文，这个内容是否仍然有意义？ 类似地，对于文本内容，可否把这些内容放到 RSS 推送里？
|
||||
确定内容是否可以单独作为一部分，通常是个人的判断，但你可以使用几个简单的测试。 如果删除了所有周围的上下文，这个内容是否仍然有意义？ 类似地，对于文本内容，可否把这些内容放到一个 RSS 推送里？
|
||||
|
||||
请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
|
||||
接下来的表单主题是关于单选按钮的可访问性。 在上一个挑战中，每个单选按钮都有一个包含 `for` 属性的 `label` 标签，这些属性值指向相关选项的 `id`。 然而单选按钮通常成组出现，而且用户必须选择其中一项。
|
||||
|
||||
`fieldset` 标签包裹整组单选按钮，实现这个功能。 我们可以使用 `fieldset` 标签将单选按钮组包含在里面，通常还会使用 `legend` 标签来为单选按钮组提供文字说明。 屏幕阅读器也可以朗读这些文字。
|
||||
`fieldset` 标签包裹整组单选按钮，实现这个功能。 它经常使用 `legend` 标签来提供分组的描述，以便屏幕阅读器用户会阅读 `fieldset` 元素中的每个选项。
|
||||
|
||||
当选项的含义很明确时，如“性别选择”，`fieldset` 与 `legend` 标签可以省略。 这时，使用包含 `for` 属性的 `label` 标签就足够了。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user