实验10-6:无障碍设计实践

右侧是一个故意埋了无障碍问题的商品页。运行检查器找出问题(对比度按 WCAG 公式实算),逐条修复,再用色觉模拟、键盘和读屏朗读亲自验证。

辅助功能体验

检查结果

—

点“运行无障碍检查”。

WCAG 四原则

可感知:文字对比度足够、图片有替代文本、不只靠颜色传达信息

可操作:所有功能都能用键盘完成

可理解:表单有标签、链接文字说明去向

健壮:用正确的语义元素,辅助技术才读得懂

待检查的示例页面

先用 Tab 键在下面的页面里走一遍,留意哪些东西用键盘到不了。

检查清单

运行检查后,每条问题都可以“定位”和“修复”。

对比度计算器

正文 15px 示例文字 大字 24px

相对亮度 L = 0.2126R + 0.7152G + 0.0722B(各通道先做 sRGB 线性化),对比度 = (L亮 + 0.05) / (L暗 + 0.05)。AA 级要求正文 ≥ 4.5,大字 ≥ 3。

键盘与读屏记录

在示例页面中按 Tab,这里会记录焦点顺序,以及读屏软件会读出的“角色 + 名称”。