术语图鉴/UI/UX 设计/无障碍
←→切换Esc返回

无障碍 Accessibility (a11y)

你可能会说

这个页面屏幕阅读器读不出来,帮我加上无障碍支持。

让视障、听障、运动障碍等用户也能使用你的产品。

让视障、听障、运动障碍等用户也能使用你的产品。比如:图片加文字描述、按钮够大能点、颜色对比度够高。

也常被叫作Accessibility (a11y)a11y

生活类比

像大楼的无障碍坡道——轮椅用户也能进。网页的「坡道」就是 alt 文字、键盘导航等。

🎮 动手试试

前景背景
示例文字 Aa
✓ 对比度 7.2:1 (WCAG AA 通过)
选择题选择一个你认为最合适的答案

关于「无障碍」,以下哪个描述最准确?

你可以这样告诉 AI

帮我把这个页面做无障碍改造:图片加上 alt 文字、所有按钮确保键盘能操作、颜色对比度达到 AA 标准。

容易混淆?这样区分

无障碍 Accessibility (a11y)≠
可用性 Usability

无障碍确保特殊群体「也能用」,可用性确保所有用户「用得高效」。一个是包容性底线,一个是体验上限。

什么时候用

产品面向大众用户

当希望产品能被更多人(包括残障人士)使用时,从 alt 文字、键盘导航、对比度三方面让界面对所有用户友好。

和 AI 协作时

想让 AI 提升无障碍时,说「给图片加 alt 文字、检查对比度、确保键盘能操作所有按钮」,AI 会逐项修复。

什么时候不用

内部工具仅少数人用

仅供团队内部使用且用户群体确定的后台工具,无障碍投入产出比低,可在有具体需求时再补充。

与纯命令行工具无关

CLI 工具交互靠键盘输入和文本输出,无障碍概念(alt 文本、对比度)在字符界面没有对应物。

组成结构 · Anatomy

1
核心概念Core

让视障、听障、运动障碍等用户也能使用你的产品。比如:图片加文字描述、按钮够大能点、颜色对比度够高。

2
实际表现In Practice

像大楼的无障碍坡道——轮椅用户也能进。网页的「坡道」就是 alt 文字、键盘导航等。

3
与 AI 的关联AI Context

和 AI 沟通时提到「加个 aria-label」,就是在给元素加无障碍描述。

典型使用场景

无障碍改造
告诉 AI「检查这个页面:图片有没有 alt、按钮能不能用 Tab 键选中、灰色字对比度是否过 WCAG AA」
想弄懂概念时
告诉 AI「用大白话给我解释什么是无障碍,举个生活中的例子」

延伸阅读