2026-09-05 日报
今日主题
freeCodeCamp · Learn HTML · Ch5 HTML and Accessibility
BriefIntroduction
第五模块：HTML and Accessibility。语义结构是基础，再补上读屏、键盘操作、ARIA、媒体替代文本——让「能用」变成「更多人能用」。
完成本模块 + HTML Review 后，HTML 章基本收束，可进入 CSS 章。
一、模块路线
| 类型 | 内容 |
|---|---|
| Lecture | 无障碍是什么 / 可访问表格与表单 / ARIA 入门 / 可访问媒体 |
| Workshop | Debug Coding Journey Blog / Tech Conference Schedule / Accessible Audio Controller |
| Lab | Checkout Page / Movie Review Page / Multimedia Player |
| 收尾 | Review + Quiz → 可选整章 HTML Review |
二、核心概念（笔记）
1. 无障碍（a11y）在说什么
- 让残障用户也能感知、理解、操作页面
- 辅助技术举例：读屏、放大镜、语音输入、替代指针设备、盲文键盘等
- 审计工具：axe、Lighthouse、WAVE 等（工具辅助，不能替代真机/真读屏抽查）
2. 结构即无障碍
- 标题层级不要跳级乱跳（
h1→h2→h3） - 用语义地标，少靠「一堆 div + 视觉位置」冒充结构
- 链接文案要自解释：避免满页「点击这里」
3. 表单与表格
- 每个控件有关联
label；错误提示和字段要建立联系 - 表格：
caption、th+scope；复杂表再考虑headers/id - 不要用表格做整页布局
4. ARIA（先原生，再 ARIA）
- 能用原生 HTML 表达的，就不要硬上 ARIA
role：补充角色；aria-label/aria-labelledby：可访问名称aria-describedby：补充说明；aria-hidden="true"：对辅助技术隐藏装饰性内容- 错误示范：给可见原生按钮再套一层错误
role，反而搞乱
5. 媒体
- 有信息的图：写好
alt；纯装饰：alt="" - 音视频：字幕、文稿、可见控件；不要只靠自动播放
- 交互：键盘可到达、可激活；焦点顺序合理
三、练习清单
- Debug Coding Journey Blog
- Tech Conference Schedule
- Accessible Audio Controller
- Checkout / Movie Review / Multimedia Player
- HTML Accessibility Quiz
- [ ]（可选）整章 HTML Review
四、今日随记
（边学边补；可记一次 VoiceOver / NVDA 实测感受）
评论