Skip to content

Commit

Permalink
撤销不必要的修改
Browse files Browse the repository at this point in the history
  • Loading branch information
familyboat committed Sep 15, 2024
1 parent 7011c10 commit ac11475
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 33 deletions.
26 changes: 13 additions & 13 deletions files/zh-cn/learn/accessibility/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,55 +7,55 @@ l10n:

{{LearnSidebar}}

如果你想成为一名 Web 开发者,学习一些 HTML、CSS、JavaScript 是有用的。除了机械地使用之外,重要的是学习如何**负责任**地使用这些技术,让所有用户能在 Web 上使用你的作品。为了帮你实现这个目标,本模块涉及常见的最佳实践(在 [HTML](/zh-CN/docs/Learn/HTML)[CSS](/zh-CN/docs/Learn/CSS)[JavaScript](/zh-CN/docs/Learn/JavaScript) 主题中有所体现),以及一些严格执行无障碍的技巧。接下来会特别详细地介绍无障碍
如果你想成为一名 Web 开发者,学习一些 HTML、CSS、JavaScript 是有用的。除了机械地使用之外,重要的是学习如何**负责任**地使用这些技术,让所有用户能在 Web 使用你的作品。为了帮你实现这个目标,本模块涉及常见的最佳实践(在 [HTML](/zh-CN/docs/Learn/HTML)[CSS](/zh-CN/docs/Learn/CSS)[JavaScript](/zh-CN/docs/Learn/JavaScript) 主题中有所体现),以及大量和严格执行无障碍有关的技巧。接下来会详细介绍无障碍

## 概述

当有人将一个网站描述为“无障碍”时,意味着不论访问 Web 的方式如何,任何一个用户(甚至是有身体或精神障碍的用户)都能使用网站全部的特性和内容。
当有人将一个网站描述为“无障碍”时,意味着不论用户访问 Web 的方式如何,任何一个用户(甚至是有身体或精神障碍的用户)都能使用网站全部的特性和内容。

- 使用键盘、鼠标和触摸屏的用户,以及使用任何其他方式(包括屏幕阅读器和诸如 Alexa 和 Google Home 等的语音助手)访问 Web 的用户都应该能访问网站。
- 使用键盘、鼠标和触摸屏的用户,以及使用任意其他方式(包括屏幕阅读器和诸如 Alexa 和 Google Home 等的语音助手)访问 Web 的用户都应该能访问网站。
- 无论人们的听觉、视觉、身体或认知能力如何,都应该能理解和使用应用程序。
- 网站也不应该造成伤害:像动画(motion)这样的 Web 特性会导致偏头痛或癫痫发作。

**默认情况下,HTML 在使用得当的情况下是无障碍的**。Web 无障碍涉及确保内容无论由谁以何种方式访问都是无障碍的
**默认情况下,HTML 在使用得当的情况下是无障碍的**。Web 无障碍关乎 Web 内容无论由谁以何种方式访问都能保证是无障碍的

要检查 Web 页面上的无障碍问题时,火狐无障碍检查器是一个非常实用的工具。下面的视频对它进行了很好的介绍:

{{EmbedYouTube("7mqqgIxX_NU")}}

## 前提

为了充分理解本模块,最好先完成 [HTML](/zh-CN/docs/Learn/HTML)[CSS](/zh-CN/docs/Learn/CSS)[JavaScript](/zh-CN/docs/Learn/JavaScript) 主题的前两个模块,或者更好的做法是,在你学习相关技术主题的同时,完成无障碍模块的相关部分
要充分理解本模块,你至少需要读过 [HTML](/zh-CN/docs/Learn/HTML)[CSS](/zh-CN/docs/Learn/CSS)[JavaScript](/zh-CN/docs/Learn/JavaScript) 主题的前两个模块,或者在读相关技术主题时,读过无障碍模块的相关部分(这样或许会更好)

> [!NOTE]
> 如果你工作的计算机/掌上电脑/其他设备无法创建文件,可以使用在线编码程序(例如,[JSBin](https://jsbin.com/) 或者 [Glitch](https://glitch.com/))实验大多数代码示例。
## 指南

- [什么是无障碍?](/zh-CN/docs/Learn/Accessibility/What_is_accessibility)
- : 这篇文章从什么是无障碍开始,详细介绍了我们需要考虑哪一群人,为什么要考虑这些人,不同的人使用什么工具与 Web 交互,以及如何将无障碍融入到我们的 Web 开发工作流程中
- : 这个模块的第一篇文章深入介绍无障碍是什么——包括:我们需要考虑哪一群人,为什么要考虑这些人,不同的人使用什么工具与 Web 交互,以及我们如何构建 Web 开发工作流的无障碍部分
- [HTML:无障碍的良好基础](/zh-CN/docs/Learn/Accessibility/HTML)
- : 大量的 Web 内容只要确保正确的 HTML 元素来实现正确的目的,就是无障碍的。这篇文章详细讲述 HTML 是如何确保最大程度的无障碍。
- : 只要确保正确的 HTML 元素被用于正确的目的,大量的 Web 内容就是无障碍的。这篇文章详细讲述 HTML 是如何确保最大程度的无障碍。
- [CSS 和 JavaScript 无障碍最佳实践](/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript)
- : CSS 和 JavaScript 如果使用得当,也有潜力实现无障碍的 Web 体验,但如果使用不当,它们会严重损害无障碍。这篇文章概述了一些应该考虑的 CSS 和 JavaScript 最佳实践,以确保即使复杂的内容也能尽可能是无障碍的
- : 当正确使用 CSS 和 JavaScript 时,也能提供无障碍的 Web 体验,但错用的话,会极大地破坏无障碍。这篇文章概括了大量的 CSS 和 JavaScript 最佳实践,这些实践能确保甚至是复杂内容也尽可能是无障碍的
- [WAI-ARIA 基础](/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics)
- : 接着上一篇文章,有时制作复杂的 UI 控件(涉及非语义化的 HTML 和使用 JavaScript 动态的更新内容)可能很难。WAI-ARIA 是通过添加额外的语义(浏览器和辅助技术能识别和使用这些语义让用户知道正在发生什么)来解决这类问题的技术。在这里,我们将从基础级别的视角展示如何使用它来提高无障碍
- : 接着上一篇文章,有时制作复杂的 UI 控件(涉及非语义化的 HTML 和使用 JavaScript 动态的更新内容)很难。WAI-ARIA 是通过添加额外的语义(浏览器和辅助技术能识别和使用这些语义让用户知道正在发生什么)来解决这类问题的技术。这篇文章以基础级别的视角讲解如何使用它来改善无障碍
- [多媒体无障碍](/zh-CN/docs/Learn/Accessibility/Multimedia)
- : 另一类会出现无障碍问题的内容就是多媒体——视频、音频和图像内容需要提供合适的文本替代,这样辅助技术和相应的用户就能理解这些内容。这篇文章将介绍如何做到这一点。
- : 会出现无障碍问题的另一类内容就是多媒体——视频、音频和图像内容需要提供合适的文本替代,这样辅助技术和相应的用户就能理解这些内容。这篇文章将介绍如何做到这一点。
- [移动端无障碍](/zh-CN/docs/Learn/Accessibility/Mobile)
- : 随着用移动设备访问 Web 变得流行,以及主流平台(例如,iOS 和安卓)拥有完备的无障碍工具,考虑这些平台上的 Web 内容的无障碍非常重要。这篇文章讲解移动设备相关的无障碍注意事项。
- : 随着用移动设备访问 Web 变得流行,以及主流平台(例如,iOS 和安卓)拥有完备的无障碍工具,为这些平台上的 Web 内容考虑无障碍是重要的。这篇文章讲解移动设备相关的无障碍注意事项。

## 评估

- [无障碍诊断](/zh-CN/docs/Learn/Accessibility/Accessibility_troubleshooting)
- : 在本模块的评估环节,会向你展示一个包含多个无障碍问题的简单站点,你需要诊断并修复这些问题。
- : 在本模块的评估环节,会向你展示带有几个无障碍问题的简单站点,你需要诊断并修复这些问题。

## 参见

- [学习无障碍 Web 设计](https://v2.scrimba.com/learn-accessible-web-design-c031?via=mdn) <sup>**MDN 课程合作伙伴**</sup>
- : [Scrimba](https://scrimba.com?via=mdn)*学习无障碍 Web 设计*课程通过解决交互式编码挑战和修复真实网站的方式教授如何编写无障碍的 HTML。
- [现在开始构建无障碍的 Web 应用](https://egghead.io/courses/start-building-accessible-web-applications-today)
- : 来自 Marcy Sutton 的优秀的视频教程系列
- : 来自 Marcy Sutton 的优秀视频教程系列
- [Deque University 资源](https://dequeuniversity.com/resources/)
- : 包含代码示例、屏幕阅读器参考和其他实用的资源。
- [WebAIM 资源](https://webaim.org/resources/)
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/learn/common_questions/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ l10n:

{{LearnSidebar}}

这个学习区为可能会遇到的常见问题提供答案,而这些问题不必是结构化的核心学习路径的一部分(例如,[HTML](/zh-CN/docs/Learn/HTML)[CSS](/zh-CN/docs/Learn/CSS) 中的学习文章)。这些文章专注于它们自己的内容。
学习区的本部分是为可能会遇到的常见问题提供答案,而这些问题不必是结构化的核心学习路径的部分(例如,[HTML](/zh-CN/docs/Learn/HTML)[CSS](/zh-CN/docs/Learn/CSS) 中的学习文章)。这些文章专注于它们自己的内容。

- [HTML 问题](/zh-CN/docs/Learn/HTML/Howto)
- [CSS 问题](/zh-CN/docs/Learn/CSS/Howto)
Expand Down
28 changes: 14 additions & 14 deletions files/zh-cn/learn/css/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,48 @@ l10n:

{{LearnSidebar}}

层叠样式表——或 {{glossary("CSS")}}——是你应该在学完 {{glossary("HTML")}} 之后开始学习的第一门技术。HTML 用于为你的内容定义结构和语义,CSS 用于为内容提供样式和对内容进行布局。例如,你可以使用 CSS 更改内容的字体、颜色、大小和间距,将内容分成多列,或添加动画和其它装饰特性。
层叠样式表——或 {{glossary("CSS")}}——是你在学完 {{glossary("HTML")}} 之后应该学习的第一门技术。HTML 用于为你的内容定义结构和语义,CSS 用于为内容提供样式和对内容进行布局。例如,你可以使用 CSS 更改内容的字体、颜色、大小和间距,将内容分成多列,或添加动画和其它装饰特性。

## 前提

在尝试 CSS 之前,你应该先学习 HTML 的基础知识。我们建议你先学习 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)
在尝试 CSS 之前,你应该学习 HTML 的基础知识。我们建议你先学习 [HTML 简介](/zh-CN/docs/Learn/HTML/Introduction_to_HTML)

一旦你理解了 HTML 的基础知识,我们就建议你同时学习更多的 HTML 和 CSS,在这两个主题之间来回切换。这么做是因为在应用了 CSS 后,HTML 会变得更加有趣,学习起来也更有乐趣。而且不了解 HTML 的话,也无法学习 CSS。
一旦你理解了 HTML 的基础知识,我们就建议你同时更深入地学习 HTML 和 CSS,在这两个主题之间来回切换。这么做是因为在应用了 CSS 后,HTML 会变得更加有趣,学习起来也更有乐趣。并且不了解 HTML 的话,也无法学习 CSS。

在开始本主题之前,你还应该熟悉如何使用电脑,如何被动地使用 Web(例如,只是浏览和消费内容)。你应该按照[安装基本软件](/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software)中的详细内容搭建基础工作环境,以及按照[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)中的内容理解如何创建和管理文件——这两个都是 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)纯新手模块的一部分。

在开始本主题之前,还是建议你先学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)特别是如果你完全不熟悉 Web 开发的话。不过,[CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)这篇文章中涉及的大部分内容在 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块中也有所涉及,而且更详细。
在开始本主题之前,还是建议你先学习 [Web 入门](/zh-CN/docs/Learn/Getting_started_with_the_web)尤其当你是 Web 开发的纯新手的话。不过,[CSS 基础](/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics)这篇文章中涉及的大部分内容在 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)模块中也有所涉及,而且更详细。

## 模块

本主题包含以下模块,建议按顺序学习。你应该从第一个开始
本主题包含以下模块,建议按顺序学习这些模块。你应该从第一个模块开始

- [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)
- : CSS(层叠样式表)用于为网页添加样式,对网页进行布局——例如,修改内容的字体、颜色、大小和间距,将内容分成多列,或添加动画和其它装饰特性。这个模块为你提供了通向 CSS 精通之路的温和开始,介绍了它的工作原理、语法是什么样的,以及如何开始使用它为 HTML 添加样式。
- : CSS(层叠样式表)用于为网页添加样式,对网页进行布局——例如,修改内容的字体、颜色、大小和间距,将内容分成多列,或添加动画和其它装饰特性。在前往掌握 CSS 基础知识(CSS 的运作方式,CSS 语法是什么样子,在 HTML 中如何使用 CSS 添加样式)的道路上,这个模块是一个很好的开始
- [CSS 构建块](/zh-CN/docs/Learn/CSS/Building_Blocks)

- : 这个模块承接 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)——这时你已经熟悉了 CSS 语言及其语法,有了基本的使用经验,是时候再深入一些了。这个模块探讨层叠和继承、所有可用的选择器类型、单位、尺寸、为背景和边框添加样式、调试,以及其它内容。
- : 这个模块承接 [CSS 第一步](/zh-CN/docs/Learn/CSS/First_steps)——这时你已经熟悉 CSS 语言及其语法,有了基本的使用经验,是时候再深入一些。在这个模块中,你会学习层叠和继承、可用的选择器类型、单位、大小、为背景和边框添加样式、调试,以及其它内容。

本文的目的是,在了解诸如[为文本添加样式](/zh-CN/docs/Learn/CSS/Styling_text)[CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)等特定领域的知识之前,提供一个能让你编写合格 CSS 的工具集并帮助你理解基本的理论。
这篇文章的目的是,在了解诸如[为文本添加样式](/zh-CN/docs/Learn/CSS/Styling_text)[CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)等特定领域的知识之前,提供一个能让你编写合格 CSS 的工具集并帮助你理解基本的理论。

- [为文本添加样式](/zh-CN/docs/Learn/CSS/Styling_text)
- : 在学完 CSS 语言的基础知识后,下一个集中学习的 CSS 主题是为文本添加样式——用 CSS 做的最多的事之一。在这里,我们会探讨为文本添加样式的基础知识,包括:设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。我们通过探讨在页面中应用自定义字体和为列表和链接添加样式结束这个模块
- : 在学完 CSS 语言的基础知识后,下一个集中学习的 CSS 主题是为文本添加样式——用 CSS 做的最多的事之一。这篇文章介绍了为文本添加样式的基础知识,包括:设置字体、加粗、斜体、行间距、字间距、阴影和其它文本特性。在这个模块中,还会学习的内容有:在页面中应用自定义字体、为列表和链接添加样式
- [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)
- : 看到这儿,我们已经学习过 CSS 基础知识、如何为文本添加样式、如何为放置内容的盒子添加样式并操纵它。现在,是时候学习参照视口或另一个盒子时如何将盒子放置在正确的位置。我们已经涵盖了必要的前置知识,现在可以深入探讨 CSS 布局,学习不同的显示设置、现代的布局工具(如弹性盒、CSS 网格)、定位,以及你可能仍想了解的一些传统技术
- : 看到这儿,你已经学习过 CSS 基础知识、如何为文本添加样式、如何为放置内容的盒子添加样式并操纵它。现在,是时候学习参照视口或另一个盒子时如何将盒子放置在正确的位置。必要的前置知识已经具备,此时你可以深入 CSS 布局,学习不同的显示设置、现代的布局工具(如弹性盒、CSS 网格)、定位,以及一些你可能仍想了解的传统技术

## 解决常见的 CSS 问题

[使用 CSS 解决常见问题](/zh-CN/docs/Learn/CSS/Howto)提供了用于解释如何使用 CSS 解决创建网页时常遇到的问题的内容的链接。

刚开始,你主要是为 HTML 元素及其背景应用颜色,改变元素的大小、形状和位置,为元素添加和定义边框。但是,一旦你对 CSS 的基础知识有了扎实的理解,几乎没有什么是你不能做的。学习 CSS 最棒的事情之一就是,一旦你了解了基础,即使你还不知道如何做,通常会对能做的和不能做的有一个很好的感知。
刚开始,你主要是为 HTML 元素及其背景应用颜色,改变元素的大小、形状和位置,为元素添加和定义边框。但这并不是你唯一能做的,只要你对 CSS 的基础知识有了坚实的理解的话。学习 CSS 最棒的事情之一就是,一旦你了解了基础,即使你还不知道如何做,通常会对能做的和不能做的有一个很好的感知。

## “CSS 真奇怪”

CSS 的工作方式与你接触到的大多数编程语言和设计工具有点不同。CSS 为什么以这种方式工作?在下面的视频中,Miriam Suzanne 对 CSS 为什么这样工作以及 CSS 为什么演变成这样做了很好的解释:
CSS 与你接触到的大多数编程语言和设计工具的运作方式有点不同。CSS 为什么以这种方式运作?在下面的视频中,对 CSS 为什么这样运作以及 CSS 为什么演变成这样做了很好的解释:

{{EmbedYouTube("aHUtMbJw8iA")}}

## 参见

- [MDN 上的 CSS](/zh-CN/docs/Web/CSS)
- : 这是 MDN 上 CSS 文档的主要入口,在这里可以找到 CSS 语言全部特性的详细参考文档。想要了解某个属性可以取的所有值吗?这是一个很好的去处。
- [MDN 上的 CSS 文档](/zh-CN/docs/Web/CSS)
- : MDN 上 CSS 文档的主入口,在这里可以找到 CSS 语言全部特性的详细参考文档。想要了解某个属性可以取的所有值吗?这是一个很好的去处。
Loading

0 comments on commit ac11475

Please sign in to comment.