← FC Coder · HomePhase 05 · Lesson 63 · 60 min
Lesson63
Phase Five · Showcase · Matchday 63 · Fair Play
无障碍 baby
视障 + 键盘公平
Today's 3 Jobs · 今天这三件事
- 01aria-label icon 按钮 + focus-visible屏幕阅读器
- 02Mac VoiceOver(Cmd+F5)听 /fantasy真测一遍
- 03🌟 颜色对比 ≥ 4.5:1WCAG AA
视障 / 键盘用户也应该能玩。aria-label + focus-visible + 颜色对比 4.5:1 + Mac VoiceOver 真测一遍。公平 = 工程素养的一部分。
Concept
a11y 三件套
// 公平 = 工程素养
label
aria-label="加入阵容"
focus
*:focus-visible outline
对比
4.5:1 WCAG AA
Half 2
label · VO 测 · AI audit
01aria-label + focus
01Min
/fantasy 所有 icon 按钮加 aria-label
无文字按钮必加。
02Min
globals.css 加 *:focus-visible outline gold
键盘用户看见焦点。
02VoiceOver 测 + 修
03Min
Mac Cmd+F5 启 VoiceOver · 听 /fantasy
Tab 跳 · 听每个 element 报。
04Min
改 5 个 a11y 问题
缺 label / Tab 顺序 / 对比度。
03AI a11y audit
05Min
AI Trust: a11y audit /fantasy /game /squads
Cmd+K · 'a11y audit · 列问题 + 修改'。
06Min
📸 截图 VoiceOver 提示
Phase 5 第 8 张。
讲给爸爸听
3 题
01aria-label 是什么?Hint ↓
屏幕阅读器读的按钮名。无文字按钮必加。
02Tab 顺序为什么重要?Hint ↓
键盘用户的导航。<button> 默认可 Tab · <div onClick> 不可。
03颜色对比 4.5:1?Hint ↓
WCAG AA · 文字 / 背景对比。Chrome DevTools 自动算。
温度计
评分
今天难度Difficulty
0
今天开心Fun
0