barrierefreiheit

无障碍：楼梯旁的坡道

这个比喻

门前有楼梯的房子，对很多人来说都很方便。对于坐轮椅、推婴儿车或提着沉重行李箱的人来说，楼梯却是一道墙。楼梯旁的坡道能帮助这些人，其他人也乐于使用。

对于网站来说，坡道就是：足够的对比度、图片描述、无需鼠标也能操作、清晰标注的表单。这些也能让每个人受益，比如在阳光下看手机、忘带眼镜或赶时间的时候。

**如何使用这个比喻：**在你的第一条回复中，先告诉对方这个比喻，再提问或展示命令，即使对方一上来就想要解决方案。

沟通方式

• 缩写和工具名称只在配上半句话的解释时使用：WCAG（国际认可的无障碍网页检查清单）、Lighthouse（内置于 Chrome 的检查工具）。否则就别提。
• **不要只提问：**如果缺少项目或信息，仍然给出具体步骤，或将文件写成带有明确假设标记的草稿（[假设：…]）。最后再询问缺少的信息。
• 使用「你」称呼，不用专业缩写。「对比度」要用白纸上的浅灰色文字来解释。
• 每个问题都需要有依据：页面和具体位置。
• 自动化工具只能发现一部分问题。请如实说明，并和对方一起进行手动检查。

流程

1. 自动预检

对方在 Chrome 中打开页面，右键单击，选择「检查」，打开「Lighthouse」标签页，只勾选「无障碍」，然后点击「分析网页」。或者你可以在终端中检查：

npx pa11y https://{name}.aufwind.sh

将提示作为检查结果记录下来。工具看不到的是：顺序是否合理、文字是否易懂，以及点击后会跳转到哪里。

2. 手动检查

视觉

• 计算对比度：正文至少为 4,5 : 1，大号标题、按钮、输入框边框和图标至少为 3 : 1。分别检查明暗颜色。
  • 公式：将每个颜色通道（0 到 1）线性化：c ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4。亮度 L = 0.2126 R + 0.7152 G + 0.0722 B。对比度 (L_亮 + 0.05) / (L_暗 + 0.05)。检查：黑底白字的结果是 21。
• 颜色不能是唯一的区分方式：错误要同时用图标和文字表示，当前菜单项还要加下划线或使用粗体。
• 放大到 200 %：内容不会被截断，也不需要横向滚动。检查宽度为 320、375、768 和 1440 像素的屏幕。

操作

• 只用键盘操作：按 Tab 向前移动，按 Shift+Tab 向后移动，按 Enter 点击。能否到达所有位置？是否始终看得出当前位置（焦点框）？按 Escape 能否关闭打开的窗口？
• 手机上的点击区域要足够大：约为一个指尖大小，至少 44 × 44 像素。
• 链接就是链接，按钮就是按钮。链接文字要说明目标位置（「查看价格」，而不是「这里」）。

朗读

• 每张有内容的图片都要有描述（alt="…"），说明应该看到什么。纯装饰图片使用 alt=""。
• 只有图标的按钮（心形、放大镜、菜单）要有名称（aria-label="搜索"）。
• 标题顺序要合理：恰好一个 h1，其下是 h2、h3。
• 设置页面语言：<html lang="de-CH">。
• 在 Mac 上亲自听：按 Cmd+F5 可开启或关闭 VoiceOver。

表单

• 每个字段上方都要有可见的标签，不能只在字段里放灰色占位文字。
• 必填字段要能看出来。使用正确的字段类型（type="email"、type="tel"），让手机显示合适的键盘。
• 在字段旁直接显示错误，说明要清楚，并指出如何解决。出错时保留已输入的内容。

动态效果

• 在系统设置中选择「减少动态效果」的人应看到静态画面：@media (prefers-reduced-motion: reduce)。
• 自动播放的动态效果应在最多 5 秒后停止，或允许用户暂停。
• 视频应配有字幕。

3. 记录与修复

docs/barrierefreiheit.md：

# Barrierefreiheit: Prüfprotokoll (<Datum>)

| Punkt | Ergebnis | Beleg (Seite, Stelle) | Reparatur |
|---|---|---|---|
| Kontrast Text | erfüllt / nicht erfüllt / nicht relevant | … | … |

## Kontraste
| Farbpaar | Wert | reicht für |
|---|---|---|

然后进行修复，先处理关键问题（也就是会完全排除某些人的问题）。之后再次检查并更新记录。日志簿（技能 git-logbuch）、流水线（技能 pipeline）。

有用信息

• 在瑞士，《平等对待残障人士法》主要约束政府部门和公共服务。对私人网站来说，这不是强制要求，但会带来好处：更多人能够访问，搜索引擎也能更好地理解页面。如果用户也向欧盟销售产品，《欧洲无障碍法案》可能适用。这不构成法律建议。
• 与真实用户（包括年长者）进行测试，效果最好。

检查任务

使用 webseite-05-barrierefreiheit 运行 mission_pruefen。检查会确认项目中是否有 docs/barrierefreiheit.md（在服务器上使用 ~/projekt 中的 Pilot，在港口使用 Light）。

最终消息

你在此步骤中的最后一条消息以一句关于“楼梯旁的坡道”的话开头，再次点明核心。之后说明完成了什么、结果存放在哪里、还有哪些事项未解决，以及接下来要做什么。