菜单

国际化与辅助功能

相关源文件

本文档概述了在“Web 开发入门”课程中实施的国际化 (i18n) 和可访问性 (a11y) 系统。尽管这些是不同的概念,但它们有一个共同的基本目标:使尽可能广泛的受众都能获取内容,无论其语言、残疾或其他障碍。本文档将解释这些系统在代码库中的技术实现方式。

有关可访问性的详细课程内容,请参阅 可访问性基础

概述

Web-Dev-For-Beginners 仓库支持

  1. 国际化 (i18n):一个全面的翻译系统,允许课程内容以多种语言提供
  2. 可访问性 (a11y):既作为专门的课程主题,又作为代码库中的技术实现

国际化系统

该课程实施了一个强大的国际化系统,以确保全球受众能够通过多种语言访问内容。

翻译结构

来源

翻译文件约定

翻译文件遵循一致的命名约定

文件类型命名约定示例
课程内容README.[语言代码].mdREADME.fr.md
作业assignment.[语言代码].mdassignment.es.md
测验内容[语言代码].jsonfr.json

语言代码遵循 ISO 639-1 标准(两位字母语言缩写)。

来源

测验国际化实现

测验应用程序是展示国际化实践的关键组成部分。

翻译后的 README 文件中的测验链接通过附加区域设置参数直接指向翻译后的测验:https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=fr

来源

可访问性实施

课程主要通过两种方式解决可访问性问题

  1. 作为专门的课程主题(课程中的 #1.3)
  2. 作为代码库中的技术考量

可访问性教育方法

来源

可访问性技术实施

课程在多个维度上整合了可访问性考量

可访问性方面实现目的
语义化 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.

来源

最佳实践

课程推广这些国际化和可访问性的最佳实践

国际化最佳实践

  1. 一致的文件结构:在不同语言之间保持相同的目录结构
  2. 代码保留:切勿翻译示例文件中的代码
  3. 完整的翻译:确保所有 UI 元素都已翻译,而不仅仅是内容
  4. 一致的命名:遵循既定的文件命名约定
  5. 链接本地化:更新链接以包含区域设置参数

可访问性最佳实践

  1. 语义化 HTML:使用恰当的 HTML 元素来实现其预期目的
  2. ARIA 属性:在语义化 HTML 不足时使用 ARIA
  3. 颜色对比度:确保足够的对比度以提高文本可读性
  4. 键盘导航:测试并确保所有功能都可以仅通过键盘操作
  5. 替代文本:为图片提供描述性的 alt 文本
  6. 描述性链接:使用有意义的链接文本,而不是“点击这里”
  7. 测试:定期使用屏幕阅读器和其他辅助技术进行测试

来源

结论

“Web 开发入门”课程在国际化和可访问性方面展示了一种全面的方法。通过在内容和技术层面实施这些原则,该课程不仅教授了这些重要概念,还演示了它们的实现方式,让学生对如何创建全球可访问的 Web 应用程序有了实践性的理解。