选型指南 架构设计 含可复制代码

AI 功能的可访问性:键盘与屏幕阅读器能用吗

目录层用 SSG 加 ISR 拿收录,工具层用一份 JSON Schema 承接 91 个站内工具,密钥、计费与限流全部收口在国内业务后端,模型调用统一走一层薄适配。这篇把我们真实的目录结构、Schema 字段定义、路由闸门、预扣结算伪代码和合规清单完整摊开。

陈
陈默架构组
2026-09-28 · 14 分钟阅读 · 8,432 次浏览

只用键盘,能否完成「输入 → 生成 → 复制结果」并知道何时完成?

AI 功能的可访问性常被忽略

AI 功能常做成"输入框 + 结果区" ✗ —— 看起来简单 ✔,

但对键盘用户与屏幕阅读器用户来说常常完全不可用 ✔:

结果区更新了没有播报 ✗、流式输出把焦点弄丢 ✗、加载状态读不出来 ✗。

这不是小众问题 ✔:除了视障用户 ✔,键盘用户、临时受伤、嘈杂环境的人都会受影响 ✔。

一、六个最常见的问题

```

① 结果区更新后没有 aria-live 播报(屏幕阅读器不知道有新内容)

② 流式输出逐字插入 DOM,导致焦点跳动与重复播报

③ 加载/生成中用纯图形表示(无文字状态)

④ 只能鼠标点(示例卡片、复制按钮、展开按钮)

⑤ 对比度不足(浅灰提示文字)

⑥ 错误提示只靠颜色区分(红/绿)

```

第 ② 项最典型 ✗→✔:流式输出需要节流播报 ✔(例如每 1~2 秒合并播报一次 ✔),

而不是每个字符都播报 ✔(那会变成噪音 ✔)。

二、五条基本要求(可查可测)

1. 状态可播报(aria-live="polite" + 明确文案 ✔);

2. 全键盘可达(Tab 顺序合理、有可见焦点框 ✔);

3. 流式输出节流播报 ✔(并给出"生成完成"的终态 ✔);

4. 对比度达标(正文 ≥ 4.5:1 ✔);

5. 不只用颜色传达信息("错误:…" 文字 + 图标 ✔)。

三、怎么验(不用专业工具也能做一半)

· 只用键盘走一遍主流程(Tab/Enter/Space ✔);

· 打开系统屏幕阅读器听一遍(Windows 讲述人 / macOS VoiceOver ✔);

· 放大到 200%看是否错位 ✔;

· 关掉颜色(灰度截图)看信息是否还在 ✔。

要点:前两条能发现大部分问题 ✔。

四、三个反模式

· "AI 功能太新,可访问性以后再说" ✗(后面重做成本更高 ✔);

· 只加了 alt 就算做了 ✗(动态内容才是 AI 功能的主要难点 ✔);

· 测试只走鼠标路径 ✗。

五、一条判据

> 只用键盘 ✔,能否完成"输入 → 生成 → 复制结果"的完整流程 ✔(且知道何时完成 ✔)?

> 不能,说明可访问性还没覆盖主路径 ✗。

本文由云枢 AI导航整理,内容以官方来源为准。

相关文章

顺序阅读

← 上一篇:沉默失败:最危险的失败是没有报错
下一篇:把评审做轻:异步评审怎么做 →

第 163 / 171 篇

术语速查 · 本页出现的 12 个词展开看中文名与一句话解释,点术语看完整条目
  • token词元:模型处理文本的最小单位,中文约 1–2 个汉字;计费与上下文长度都按它算。
  • 转写 / 字幕Transcription:把音视频人声逐句变成带时间戳的文字稿,便于做字幕与章节切分。
  • SSE服务器发送事件:服务器通过长连接持续推送增量文本,是对白逐字出现的常见实现。
  • API应用编程接口:程序之间约定的调用方式;站内工具由服务端调用,浏览器里不出现密钥。
  • CDN内容分发网络:把静态资源缓存到离用户更近的节点,缩短加载时间。
  • 缓存Cache:把结果暂存复用,复用得越多平均耗时越低;需要约定过期与刷新策略。
  • 限流Rate Limit:限制单位时间内的请求次数,防止单用户或异常流量打满服务端。
  • SSG静态站点生成:构建阶段就生成 HTML,访问时直接返回,不必每次请求都渲染。
  • ISR增量静态再生:先返回静态页,再在后台按需重新生成,兼顾速度与更新时效。
  • 灰度发布Canary Release:先让一小部分用户用新版本,确认无误再放量,出问题的爆炸半径最小。
  • 提示词Prompt:交给模型的指令文本;写清角色、任务、输入与输出格式比反复试更省。
  • 积分Credits:站内计费单位:按工具单价预扣,调用失败自动退还;单价以定价页为准。

完整解释与站内出现处见 AI 术语表(40 条)。