本文档解释了“Web 开发入门”课程中包含的网页可访问性组件和原则。它涵盖了如何教授可访问性、推荐用于测试网页可访问性的工具以及指导可访问网页开发的标准。本页面专门关注课程讲义材料中可访问性概念的技术实现和教学方法。
有关课程国际化信息，请参阅 国际化与可访问性。
网页可访问性是课程入门模块的关键组成部分，被定位为所有网页开发人员的一项基本技能。它强调了蒂姆·伯纳斯-李爵士关于普遍可访问网络的愿景，并为学生提供了创建可访问网站的实用技术。
来源： 1-getting-started-lessons/3-accessibility/translations/README.es.md1-14
该课程介绍了开发人员应使用的一些关键工具来确保网页可访问性
屏幕阅读器被呈现为视障人士用于浏览网络的关键辅助技术。课程鼓励开发人员：
推荐的工具包括：
色彩对比度被强调为对色盲或视觉障碍用户至关重要。该课程推荐：
Google Lighthouse 被介绍为浏览器开发者工具中集成的第一道可访问性测试评估工具。该课程指出，虽然 100% 的 Lighthouse 分数作为基线很有用，但不应将其作为可访问性评估的唯一指标。
来源： 1-getting-started-lessons/3-accessibility/translations/README.es.md15-39
该课程强调了构建可访问网站的几项关键设计原则：
课程强调选择适合色盲人群或难以区分低对比度颜色的人群的配色方案的重要性。它建议：
该课程解释说，仅依赖视觉样式（颜色、字体粗细、文本装饰）对于可访问性来说是不够的，因为屏幕阅读器无法将它们识别为重要。相反，它建议：
最强调的原则之一是为特定目的使用正确的 HTML 元素
元素
- 使用逻辑层次结构的标题标签（
- 使用
、 、 等语义元素
这确保了辅助技术可以正确解释页面结构和每个元素的目的。
视觉线索
课程警告不要删除用户依赖的常规视觉线索：
- 链接下划线
- 按钮边框
- 表单字段轮廓
来源： 1-getting-started-lessons/3-accessibility/translations/README.es.md41-71
链接文本可访问性
课程专门用一个部分来强调正确链接文本的重要性，重点介绍常见问题和最佳实践：
常见的链接文本问题
- URL 作为链接文本：屏幕阅读器会朗读整个 URL，这可能会造成干扰且无益。
- “点击此处”链接：当屏幕阅读器仅朗读页面上的链接时，“点击此处”之类的短语无法提供有关链接目标的信息。
链接文本的最佳实践
- 使用描述性链接文本，清晰地表明链接的另一侧是什么。
- 确保链接文本在脱离上下文阅读时具有意义。
- 避免使用“点击此处”、“了解更多”或“阅读更多”等通用短语。
- 如有必要，请使用
aria-label 提供额外上下文。
课程中链接文本的良好示例
来源： 1-getting-started-lessons/3-accessibility/translations/README.es.md73-107
ARIA 实现
该课程介绍了 ARIA（Accessible Rich Internet Applications）属性，作为一种向屏幕阅读器提供额外信息的方式，尤其是在仅靠 HTML 语义不足的情况下。
何时使用 ARIA
课程解释说，ARIA 应在以下情况使用：
- 当不存在特定 UI 组件的语义 HTML 等效项时
- 当重复文本在视觉上令人困惑，但对屏幕阅读器有帮助时
- 为复杂的交互提供额外上下文
ARIA 示例
该课程提供了此 ARIA 用于进度条的示例：
在此示例中
role="progressbar" 标识元素的用途aria-valuenow 表示当前值aria-valuemin 和 aria-valuemax 定义范围
该课程还展示了如何使用 aria-label 为链接提供额外上下文。
课程强调，在可能的情况下，应优先使用语义 HTML 而非 ARIA，仅在有必要补充 HTML 的原生语义时才使用 ARIA。
来源： 1-getting-started-lessons/3-accessibility/translations/README.es.md109-135
图片可访问性
课程涵盖了通过正确使用 alt 属性使图片可访问的重要性。
图片 alt 文本的关键原则
- 所有有意义的图片都应包含描述性的 alt 文本。
- Alt 文本应简洁地描述图片的内容和目的。
- 装饰性图片应使用空的 alt 文本（
alt=""），以防止屏幕阅读器朗读它们。
- Alt 文本也有助于提高 SEO，因为搜索引擎会使用它来理解图片内容。
该课程未提供关于好与坏 alt 文本的具体示例，但强调了将其作为网页开发标准实践的重要性。
来源： 1-getting-started-lessons/3-accessibility/translations/README.es.md137-142
键盘导航
课程针对无法使用鼠标或触控板并依赖键盘导航的用户需求
键盘可访问性的关键注意事项
- 内容应按逻辑顺序呈现在 HTML 中，以便进行有意义的键盘导航。
- 所有交互式元素都应可以使用 Tab 键进行聚焦。
- 自定义交互式元素应具有适当的键盘事件处理程序。
- 焦点指示器应清晰可见。
- 语义 HTML 本身就支持键盘导航，这使得它更加重要。
测试键盘可访问性
该课程鼓励学生仅使用键盘（特别是 Tab 键）测试网站，以识别导航问题。这项实践练习有助于强化键盘可访问性的重要性。
来源： 1-getting-started-lessons/3-accessibility/translations/README.es.md144-147
可访问性评估
课程使用几种方法来评估学生对可访问性原则的理解：
互动测验
学生完成一项测验，测试他们对可访问性概念和最佳实践的知识。
代码挑战
学生会收到一份不可访问的 HTML 文档，并被挑战根据课程教授的原则来改进其可访问性。
挑战包括以下问题：
- 非语义标记（使用
和 - 糟糕的链接文本（“点击此处”）
- 图片缺少替代文本
- 不正确的标题层次结构
- 不可访问的交互式元素
网站分析作业
学生需要：
- 识别一个他们认为不可访问的网站
- 使用 Lighthouse 和其他可访问性工具对其进行分析
- 制定详细的行动计划，至少包含十个改进网站可访问性的要点。
这项作业将理论知识应用于现实世界的例子，并鼓励对可访问性进行批判性思考。
来源： 1-getting-started-lessons/3-accessibility/translations/README.es.md152-205 1-getting-started-lessons/3-accessibility/translations/assignment.es.md1-12
与整体课程集成
网页可访问性被定位为课程中的基础技能，集成在“入门”部分（第 3.3 课）。这种策略性的定位强调可访问性应在开发过程的早期考虑，而不是事后添加。
章节 与可访问性的关系 JavaScript 基础 事件处理和 DOM 操作中的可访问性注意事项 HTML/CSS 基础知识 语义标记、色彩对比度和可访问布局技术 打字游戏 键盘可访问性和屏幕阅读器兼容性 浏览器扩展 可访问的 UI 组件和 ARIA 实现 太空游戏 视觉和听觉可访问性注意事项 银行项目 表单可访问性和错误处理
课程鼓励学生在所有项目中应用可访问性原则，强化可访问性是 Web 开发不可或缺的一部分，而不是一个单独的问题。
来源： 1-getting-started-lessons/3-accessibility/translations/README.es.md149-151
其他资源
该课程参考了几个外部资源，以帮助学生加深对网页可访问性的理解：
- 明尼苏达大学 - Accessible U：一个面向网页开发人员的可访问性资源。
- WCAG (Web Content Accessibility Guidelines)：网页可访问性的全球标准。
- 政府网站：在许多情况下，法律如何要求可访问性的示例。
- MDN ARIA 文档：关于 ARIA 实现的详细技术信息。
这些资源帮助学生理解可访问性的技术方面以及使其变得至关重要的法律和道德考量。
来源： 1-getting-started-lessons/3-accessibility/translations/README.es.md207-211
结论
“Web 开发入门”课程中的网页可访问性课程提供了关于如何使网站对所有用户可访问的全面介绍。它强调可访问性不是一个可选功能，而是良好 Web 开发的基本方面。通过理论知识、实际示例和动手练习的结合，学生们学会了在项目开始时就融入可访问性，而不是事后才添加。
该课程在课程早期进行策略性定位，强化了可访问性应在任何 Web 开发项目开始时就予以考虑的信息，从而培养了学生将在职业生涯中继承的良好习惯。