本文档概述了在“Web 开发入门”课程中实施的国际化 (i18n) 和可访问性 (a11y) 系统。尽管这些是不同的概念,但它们有一个共同的基本目标:使尽可能广泛的受众都能获取内容,无论其语言、残疾或其他障碍。本文档将解释这些系统在代码库中的技术实现方式。
有关可访问性的详细课程内容,请参阅 可访问性基础。
Web-Dev-For-Beginners 仓库支持
该课程实施了一个强大的国际化系统,以确保全球受众能够通过多种语言访问内容。
来源
翻译文件遵循一致的命名约定
| 文件类型 | 命名约定 | 示例 |
|---|---|---|
| 课程内容 | README.[语言代码].md | README.fr.md |
| 作业 | assignment.[语言代码].md | assignment.es.md |
| 测验内容 | [语言代码].json | fr.json |
语言代码遵循 ISO 639-1 标准(两位字母语言缩写)。
来源
测验应用程序是展示国际化实践的关键组成部分。
翻译后的 README 文件中的测验链接通过附加区域设置参数直接指向翻译后的测验:https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=fr
来源
课程主要通过两种方式解决可访问性问题
来源
课程在多个维度上整合了可访问性考量
| 可访问性方面 | 实现 | 目的 |
|---|---|---|
| 语义化 HTML | 使用正确的 HTML 元素(标题、区域等) | 确保内容结构正确,便于屏幕阅读器解析 |
| Alt 文本 | 图片包含描述性的 alt 属性 | 使视觉内容可供屏幕阅读器用户访问 |
| ARIA 属性 | 在语义化 HTML 不足时使用 | 为屏幕阅读器提供额外上下文 |
| 颜色对比度 | 使用工具检查对比度比率 | 确保内容对于视力障碍用户可读 |
| 键盘导航 | 测试标签顺序和焦点状态 | 使无法使用鼠标的用户也能访问内容 |
| Lighthouse | 自动化可访问性审计 | 验证可访问性实现 |
来源
下图展示了国际化和可访问性原则如何在整个课程中得到整合
这表明这两个系统如何协同工作,以创建全球可访问的教育体验。
来源
课程实施多种访问方法,以确保所有用户都能获取内容
来源
课程包含专门解决可访问性实施的作业
# Analyze an inaccessible website
## Instructions
Identify a website that you believe is not accessible, and create an action plan to improve its accessibility. Your first task will be to identify this site, detail the ways you think it is inaccessible without using analytical tools, and then put it through a Lighthouse analysis. Take the results of this analysis and map out a detailed plan of about ten items that should be improved.
来源
课程推广这些国际化和可访问性的最佳实践
来源
“Web 开发入门”课程在国际化和可访问性方面展示了一种全面的方法。通过在内容和技术层面实施这些原则,该课程不仅教授了这些重要概念,还演示了它们的实现方式,让学生对如何创建全球可访问的 Web 应用程序有了实践性的理解。