Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zh-cn: use script to fix broken links to learn area #25197

Merged
merged 1 commit into from
Dec 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/media/css/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@ CSS 提供了几个特性,允许你根据查看设备的媒体**类型**(例

- [使用媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries)
- [媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries)
- {{cssxref("@media")}} [at-规则](/zh-CN/docs/Web/CSS/At-rule):根据媒体查询的结果,有条件地应用[样式表](/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works#应用_css_到_dom)的一部分。
- {{cssxref("@media")}} [at-规则](/zh-CN/docs/Web/CSS/At-rule):根据媒体查询的结果,有条件地应用[样式表](/zh-CN/docs/Learn_web_development/Core/Styling_basics/What_is_CSS#应用_css_到_dom)的一部分。
- {{domxref("Window.matchMedia()")}}:测试查看设备是否符合媒体查询条件。
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/metadata/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ l10n:

## 参见

- [学习:元数据](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#元数据:meta_元素)
- [学习:元数据](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#元数据:meta_元素)
- 维基百科上的[元数据](https://zh.wikipedia.org/wiki/元数据)
- MDN 上的 {{htmlelement("meta")}} 元素
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ em {
}
```

但是,你很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别,更改样式可能会导致混淆。有关强调的更多信息,参见[重点强调](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#重点强调)。
但是,你很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别,更改样式可能会导致混淆。有关强调的更多信息,参见[重点强调](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs#重点强调)。

#### 缩写

Expand All @@ -122,7 +122,7 @@ abbr {
}
```

缩写的公认样式约定是虚线下划线,偏离这一原则明显是不明智的。有关缩写的更多,参见[缩略语](/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#缩略语)。
缩写的公认样式约定是虚线下划线,偏离这一原则明显是不明智的。有关缩写的更多,参见[缩略语](/zh-CN/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features#缩略语)。

#### 链接

Expand Down Expand Up @@ -228,9 +228,9 @@ JavaScript 还可能会中断无障碍,具体取决于其使用方式。
简单的内容和功能可以说是很容易使访问——例如文本,图像,表格,窗体和按钮,激活功能。正如我们在 [HTML:辅助功能的良好基础](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML)一文中提到的,主要注意事项包括:

- 良好的语义:为正确的工作使用正确的元素。例如,确保你使用标题和段落,以及 {{htmlelement("button")}} 和 {{htmlelement("a")}} 元素
- 确保内容以文本形式提供,要么直接作为文本内容、表单元素的良好文本标签,也可以确保[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)(例如图像的 alt 文本)。
- 确保内容以文本形式提供,要么直接作为文本内容、表单元素的良好文本标签,也可以确保[替代文本](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#替代文本)(例如图像的 alt 文本)。

我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 参见[重新建立键盘的无障碍](/zh-CN/docs/Learn/Accessibility/HTML#重新建立键盘的无障碍)。这不是理想的——实际上,你应该只使用正确的元素为正确的作业——但它表明在情况下它是可能的,由于某种原因,你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的无障碍的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。
我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 参见[重新建立键盘的无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#重新建立键盘的无障碍)。这不是理想的——实际上,你应该只使用正确的元素为正确的作业——但它表明在情况下它是可能的,由于某种原因,你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的无障碍的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。

复杂的功能,如 3D 游戏是不容易提高无障碍的 ––使用 [WebGL](/zh-CN/docs/Web/API/WebGL_API) 创建的复杂 3D 游戏将在 {{htmlelement("canvas")}} 元素上呈现,该元素目前没有提供文本替代或其他信息的功能视障用户使用。可以说,这样的游戏并没有真正有这群人作为它的主要目标观众的一部分,这将是不合理的,期望你使它 100% 访问盲人,但你可以实现键盘控制,所以它可以使用非鼠标用户,并使配色方案的对比度足以让有颜色缺陷的人使用。

Expand Down Expand Up @@ -358,7 +358,7 @@ imgThumb.onblur = hideImg;

当鼠标指针在缩略图上悬停或者移开,将分别调用前两行代码。此时不允许我们通过键盘访问缩略图——为了允许这一点,我们调用后两行代码,它们在图像聚焦和失焦时 (聚焦停止) 运行函数。这可以在图像加 tab 键实现,因为我们为图像的属性设置 `tabindex="0"`。

[Click](/zh-CN/docs/Web/API/Element/click_event) 事件很有趣——听起来它依赖于鼠标,但是大多数的浏览器,在有焦点的链接或者表单元素上,按下 enter/return 之后,或者在触屏设备上点击一个元素,都将会激活 [onclick](/zh-CN/docs/Web/API/Element/click_event) 事件处理程序。但是,当你允许非默认可聚焦事件使用 tabindex 进行焦点处理时,默认情况下不起作用,在这种情况下,你需要在按下确切键时进行专门检测(参见[重新建立键盘的无障碍](/zh-CN/docs/Learn/Accessibility/HTML#重新建立键盘的无障碍))。
[Click](/zh-CN/docs/Web/API/Element/click_event) 事件很有趣——听起来它依赖于鼠标,但是大多数的浏览器,在有焦点的链接或者表单元素上,按下 enter/return 之后,或者在触屏设备上点击一个元素,都将会激活 [onclick](/zh-CN/docs/Web/API/Element/click_event) 事件处理程序。但是,当你允许非默认可聚焦事件使用 tabindex 进行焦点处理时,默认情况下不起作用,在这种情况下,你需要在按下确切键时进行专门检测(参见[重新建立键盘的无障碍](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#重新建立键盘的无障碍))。

## 总结

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ original_slug: Learn/Accessibility/HTML
让我们来继续学习 HTML 语义化实现细则。

> [!NOTE]
> 在本地计算机上设置屏幕阅读器是一个不错的主意,因此你可以对下面显示的示例进行一些测试。更多内容请查阅 [Screenreaders guide](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#screenreaders)。
> 在本地计算机上设置屏幕阅读器是一个不错的主意,因此你可以对下面显示的示例进行一些测试。更多内容请查阅 [Screenreaders guide](/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling#screenreaders)。

## 良好的语义

Expand Down Expand Up @@ -252,7 +252,7 @@ the last one.
> [!NOTE]
> 除了你的内容具有良好的语义和有吸引力的布局之外,它的源代码顺序应该是合理的 - 你可以随时将它放在你想要使用 CSS 的位置,但是你应该先从源代码开始,如此这样,屏幕阅读器读取给他们的内容将会非常便于理解。

### UI 控制
### UI 控件

通过 UI 控件,我们指的是与用户交互的 Web 文档的主要部分 - 通常是按钮,链接和表单控件。在本节中,我们将介绍创建此类控件时要注意的基本无障碍问题。稍后关于 WAI-ARIA 和多媒体的文章将着眼于 UI 无障碍的其他方面。

Expand All @@ -263,7 +263,7 @@ UI 控件无障碍的一个关键方面是,默认情况下,浏览器允许
接着你可以按 Enter / Return 来追踪当前获得焦点的链接,或者按按钮来实现(我们已经使用 JavaScript 使按钮同时显示提示消息),或者开始在文本输入中输入文本(其他表单元素具有不同的控件,例如 {{htmlelement("select")}} 元素拥有自己的显示选项,可以使用向上和向下箭头键进行循环)。

> [!NOTE]
> 不同的浏览器可能有不同的键盘控制选项。请参阅[使用本机键盘辅助功能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#使用键盘)获取更多详细信息。
> 不同的浏览器可能有不同的键盘控制选项。请参阅[使用本机键盘辅助功能](/zh-CN/docs/Learn_web_development/Core/Accessibility/Tooling#使用键盘)获取更多详细信息。

实际上,你只需使用适当的元素即可免费获得此功能,例如,

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ iOS 操作系统内置了移动版旁白(VoiceOver)。

## 控制机制

在我们的 CSS 和 JavaScript 无障碍文章中,我们研究了特定于某种控制机制的事件的概念(请参阅[特定于鼠标的事件](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript#鼠标特定事件))。回顾一下,因为其他控制机制不能激活相关的功能,将会导致辅助功能的问题。
在我们的 CSS 和 JavaScript 无障碍文章中,我们研究了特定于某种控制机制的事件的概念(请参阅[特定于鼠标的事件](/zh-CN/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript#鼠标特定事件))。回顾一下,因为其他控制机制不能激活相关的功能,将会导致辅助功能的问题。

举例来说,[点击](/zh-CN/docs/Web/API/Element/click_event)事件在无障碍方面是良好的——通过点击处理器设置的元素,选中它并按下回车或返回,或者在触摸屏设备上点击它,可以调用关联的事件处理程序。试试我们的 [simple-button-example.html](https://github.com/mdn/learning-area/blob/main/accessibility/mobile/simple-button-example.html) 示例([查看实时示例](https://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html))以理解我们的意思。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ l10n:

在某种程度上,本模块都是关于无障碍的——跨浏览器测试可确保你的网站可以被尽可能多的人使用。这篇[无障碍是什么?](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility)更全面透彻地定义了什么是无障碍。

也就是说,本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用 Web。我们在本模块的其他地方已经讨论过别的领域,例如[响应式设计问题](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#响应式设计问题)和[性能](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#性能问题)。
也就是说,本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用 Web。我们在本模块的其他地方已经讨论过别的领域,例如[响应式设计问题](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#响应式设计问题)和[性能](/zh-CN/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript#性能问题)。

> [!NOTE]
> 如同 Web 开发的许多方面一样,无障碍并非可以用 100% 的成功或失败来定义;实际上,对于所有内容来说,要达到完全的无障碍几乎是不可能的,特别是当网站变得越来越复杂。我们所做的,更多是采取防御性编程,并遵守最佳实践,以确保尽可能多的人能够访问到尽可能多的内容。
Expand All @@ -59,7 +59,7 @@ l10n:
在本节中,我们将围绕 Web 无障碍,详细介绍与特定技术相关的一些主要问题、要遵循的最佳实践,以及可以进行的一些快速测试,以查看你的网站是否朝着正确的方向发展。

> [!NOTE]
> 无障碍在道德上是正确的事情,对企业也有好处(残疾用户,移动用户等构成了重要的细分市场),并且在世界许多地方,提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读[无障碍指南和法律](/zh-CN/docs/Learn/Accessibility/What_is_accessibility#无障碍指南和法律)获取更多相关信息。
> 无障碍在道德上是正确的事情,对企业也有好处(残疾用户,移动用户等构成了重要的细分市场),并且在世界许多地方,提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读[无障碍指南和法律](/zh-CN/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#无障碍指南和法律)获取更多相关信息。

### HTML

Expand Down Expand Up @@ -176,7 +176,7 @@ select:focus {
替代文本对无障碍性至关重要——对于视觉或听觉障碍者来说,如果无法看到或听到某些内容,这将是一个障碍。最简单且常用的文本替代方法是使用 `alt` 属性,我们应在所有包含关键内容的图像上使用该属性。它应包含能够在页面上成功传达图像意义和内容的描述,并能被屏幕阅读器读取,从而朗读给用户听。

> [!NOTE]
> 更多信息请阅读[替代文本](/zh-CN/docs/Learn/Accessibility/HTML#替代文本)。
> 更多信息请阅读[替代文本](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#替代文本)。

可以通过多种方法来测试缺少的替代文本,例如,使用无障碍[审计工具](#审计工具)。

Expand All @@ -191,14 +191,14 @@ select:focus {
接下来是表单中的 {{htmlelement("label")}} 元素,这是确保表单无障碍的关键特性之一。表单的挑战在于,你需要标签来指明每个表单输入应该输入的数据。每个标签都应该包含在 {{htmlelement("label")}} 中,并且与其对应的表单输入明确关联(每个 `<label>` 的 `for` 属性值需要与表单元素的 `id` 值相匹配),即使源代码的顺序并不完全合理(尽管它应该是合理的)。

> [!NOTE]
> 有关链接文本和表单标签的更多信息,请参阅[有意义的文本标签](/zh-CN/docs/Learn/Accessibility/HTML#有意义的文本标签)。
> 有关链接文本和表单标签的更多信息,请参阅[有意义的文本标签](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#有意义的文本标签)。

最后,让我们简要讨论一下数据表格。使用非常简单的标记,你可以编写基本的数据表格(参见 `bad-table.html` 的[在线演示](https://mdn.github.io/learning-area/accessibility/html/bad-table.html)和[源代码](https://github.com/mdn/learning-area/blob/main/accessibility/html/bad-table.html)),但这样做会有问题——屏幕阅读器用户无法将行或列作为数据分组——为此,你需要标明哪些是标题行,以及它们是用于标题行还是标题列等。这样的表格只能通过视觉方式来识别。

相反,如果你查看我们的 `punk-bands-complete.html` 示例([在线演示](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html),[源代码](https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html)),你会发现这里使用了一些辅助功能,如表头({{htmlelement("th")}} 和 `scope` 属性)、{{htmlelement("caption")}} 元素等。

> [!NOTE]
> 有关无障碍数据表格的更多信息,请参阅[无障碍数据表格](/zh-CN/docs/Learn/Accessibility/HTML#无障碍数据表格)。
> 有关无障碍数据表格的更多信息,请参阅[无障碍数据表格](/zh-CN/docs/Learn_web_development/Core/Accessibility/HTML#无障碍数据表格)。

### CSS

Expand Down Expand Up @@ -569,13 +569,13 @@ NVDA 拥有众多键盘命令,这里不会全部列举。以下表格中列出

### 用户测试

如上所述,你不能仅依靠自动化工具来确定网站上的无障碍问题。建议在制定测试计划时,包含一些用户测试无障碍的计划 (有关更多内容,请参阅前面的[用户测试](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#用户测试)部分)。尝试让一些屏幕阅读器用户,一些全键盘用户,一些有听觉障碍的用户或其他用户参与测试,以满足你的需求。
如上所述,你不能仅依靠自动化工具来确定网站上的无障碍问题。建议在制定测试计划时,包含一些用户测试无障碍的计划 (有关更多内容,请参阅前面的[用户测试](/zh-CN/docs/Learn_web_development/Extensions/Testing/Testing_strategies#用户测试)部分)。尝试让一些屏幕阅读器用户,一些全键盘用户,一些有听觉障碍的用户或其他用户参与测试,以满足你的需求。

## 无障碍测试清单

以下列表提供了一个供你参考的无障碍测试清单,以确保你的项目已经执行了推荐的无障碍测试:

1. 确保你的 HTML 尽可能语义化正确。[验证它](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#验证)是一个不错的开始,使用[审计工具](#审计工具)也是如此。
1. 确保你的 HTML 尽可能语义化正确。[验证它](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#验证)是一个不错的开始,使用[审计工具](#审计工具)也是如此。
2. 检查在 CSS 关闭的情况下,你的内容是否仍然有意义。
3. 确保你的功能[可通过键盘访问](#使用键盘原生无障碍性)。使用 Tab、Return/Enter 等键进行测试。
4. 确保你的非文本内容都有[文本替代](#替代文本)。[审计工具](#审计工具)可帮助你发现此类问题。
Expand All @@ -589,7 +589,7 @@ NVDA 拥有众多键盘命令,这里不会全部列举。以下表格中列出

## 寻找帮助

无障碍还会遇到许多其他问题。你要学会如何在线查找答案。请查阅 HTML 和 CSS 文章的“[寻找帮助](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#寻找帮助)”部分,以获取一些指导。
无障碍还会遇到许多其他问题。你要学会如何在线查找答案。请查阅 HTML 和 CSS 文章的“[寻找帮助](/zh-CN/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS#寻找帮助)”部分,以获取一些指导。

## 总结

Expand Down
Loading
Loading