无障碍、可用性、包容性 · 八股题库 / Drills

中文English

一句话区分：

无障碍（accessibility, a11y）——有障碍的人能不能用。视障、听障、运动障碍、认知障碍。
可用性（usability）——能用的人用得顺不顺。找得到、看得懂、不容易点错。
包容性（inclusion）——范围够不够宽。老年人、网速慢的、用小屏手机的、非母语用户、临时单手抱着孩子操作的。

三者是包含关系：无障碍是包容性的一部分，可用性差的东西对所有人都差。

每个给一个例子（面试要的就是例子）：

a11y：给 img 写alt；表单 label 用htmlFor 关联到 input；保证键盘能 Tab 到所有交互元素，并且焦点环别用 outline: none 删掉。
usability：按钮文字写「保存草稿」而不是「提交」；表单报错指向出错的那个字段，而不是页面顶部一句「表单有误」。
inclusion：正文对比度至少 4.5:1；不用颜色作为唯一的信息载体（红绿色盲看不出「红色是错的」，要同时给图标或文字）；首屏在 3G 下也能出内容。

会追问：「怎么测？」—— 键盘走一遍（不碰鼠标能不能完成主流程）、 Chrome DevTools 的 Lighthouse 跑一次 a11y 评分、axe 插件扫一遍。说得出工具名比说概念更可信。

The distinction in one line each:

Accessibility (a11y) — can people with disabilities use it: vision, hearing, motor, cognitive.
Usability — how smoothly can people who can use it, use it: can they find things, understand them, avoid mis-taps.
Inclusion — how wide is the net: older users, slow connections, small screens, non-native speakers, someone operating one-handed while holding a child.

The three nest: accessibility is part of inclusion, and anything with poor usability is worse for everyone.

One example each — examples are what the interviewer wants:

a11y: write alt on images; tie a label to its input with htmlFor; make sure Tab reaches every interactive element and do not delete the focus ring with outline: none.
usability: label the button “Save draft” rather than “Submit”; put the validation error on the field that failed, not a generic banner at the top of the page.
inclusion: at least 4.5:1 contrast for body text; never use colour as the only carrier of meaning (someone with red-green colour blindness cannot see that “red means wrong”, so add an icon or a word); make the first screen usable on 3G.

Follow-up: “How do you test it?” — walk the main flow with the keyboard only; run Lighthouse’s a11y audit in Chrome DevTools; scan with the axe extension. Naming the tools is more convincing than naming the concepts.