无障碍与字数设计 - alt 文本和 ARIA 标签的最佳长度
在 Web 无障碍实现中，字数设计是一个容易被忽视的要素。alt 文本过长，屏幕阅读器用户会被信息洪流淹没；过短，则无法传达图片的含义。ARIA 标签和实时区域的文本同样如此，设计合适的字数是打造无障碍体验的关键。本文将在 WCAG 指南要求的基础上，具体讲解各元素的最佳字数和实现模式。
alt 文本的字数设计 - 125 字的门槛及其依据
alt 文本广为人知的推荐标准是"125 个字符以内"。这个数字并非 WCAG 规范中明确规定的，而是源于主流屏幕阅读器的行为。JAWS (Job Access With Speech) 在 alt 文本超过约 125 个字符时，可能会将文本分段朗读。虽然 NVDA 和 VoiceOver 不会出现明显的分段现象，但过长的 alt 文本会增加用户的认知负担，因此建议保持简洁。
不过，125 个字符只是一个参考值，最佳字数因图片类型而有很大差异。下表按图片类型汇总了推荐的 alt 文本字数。
| 图片类型 | 推荐字数 | 撰写要点 | 示例 |
|---|---|---|---|
| 装饰性图片 | 0 字 (空 alt) | 设置 alt=""，让屏幕阅读器忽略 | alt="" |
| 图标/按钮 | 5-15 字 | 简洁传达功能或操作 | "搜索"、"打开菜单" |
| 照片/插图 | 30-80 字 | 描述图片内容及其在上下文中的作用 | "会议室中五名团队成员围绕白板讨论" |
| 图表/图形 | 50-125 字 | 概括数据趋势或结论 | "2024 年月度销售趋势。4 月同比增长 30%，达到峰值" |
| 信息图 | 125 字 + longdesc | alt 中放概要，详细内容另行提供文本 | alt 放概要，正文中放详细说明 |
| Logo | 5-20 字 | 写明组织名称，无需加"logo"一词 | "字数计数器" |
| 链接内图片 | 10-40 字 | 描述链接目标 (而非图片外观) | "下载产品目录" |
| 公式/代码 | 公式的朗读文本 | 通过 MathML 或 aria-label 提供替代文本 | "E 等于 m 乘以 c 的平方" |
为装饰性图片设置非空 alt 文本是常见的实现错误。为背景图案或分隔线图片写上"装饰"或"图片"，会导致屏幕阅读器朗读无意义的信息，损害用户体验。装饰性图片务必设置 alt=""，如果可能的话，最好用 CSS 的 background-image 实现，从 DOM 中完全移除。
alt 文本的写法 - 依赖上下文的原则
同一张图片，根据其所处的上下文不同，最佳的 alt 文本也会不同。这是因为 WCAG 2.2 的成功标准 1.1.1 (非文本内容) 要求替代文本"实现等效目的"。例如，一张狗的照片出现在"宠物健康管理"文章中和出现在"摄影技巧"文章中，需要传达的信息是不同的。
前者应包含健康信息，如"一只金毛寻回犬站在体重秤上。理想体重为 25-34 公斤"；后者则应聚焦于摄影技法："逆光拍摄的金毛寻回犬剪影。光圈 f/2.8，背景虚化"。字数自然会有所不同，但重要的是根据上下文取舍信息。
与错误消息设计一样，alt 文本也应意识到"用户接下来该做什么"。对于电商网站的商品图片，包含颜色、尺寸等购买决策所需的信息，可以为无法依赖视觉的用户提供同等的购物体验。
ARIA 标签的字数设计
ARIA (Accessible Rich Internet Applications) 属性为屏幕阅读器提供仅靠 HTML 语义无法传达的信息。其中 aria-label 和 aria-labelledby 是最常用的属性，但其字数设计缺乏明确的指导方针，很大程度上依赖开发者的判断。
| ARIA 属性 | 推荐字数 | 用途 | 注意事项 |
|---|---|---|---|
| aria-label | 5-40 字 | 直接指定元素的名称 | 存在可见文本时优先使用 aria-labelledby |
| aria-labelledby | 取决于引用元素 | 引用其他元素的文本作为名称 | 可用空格分隔指定多个 ID |
| aria-describedby | 20-100 字 | 提供补充说明 | 作为描述而非名称被朗读 |
| aria-roledescription | 5-20 字 | 角色的自定义描述 | 会覆盖标准角色描述，需谨慎使用 |
| aria-live 区域文本 | 10-60 字 | 通知动态变化的内容 | 频繁更新会干扰用户操作 |
当 aria-label 超过 40 个字符时，屏幕阅读器用户的认知负担会增加。为导航地标设置 aria-label="主导航" 没有问题，但需要复杂描述时，使用 aria-describedby 引用其他元素更为合适。
aria-label 与可见文本不一致会给语音操控用户带来严重问题。例如，按钮的可见文本是"提交"，但 aria-label="提交表单数据"，用语音说"点击提交"可能无法识别该按钮。WCAG 2.2 的成功标准 2.5.3 (名称中包含标签) 要求无障碍名称包含可见文本。
屏幕阅读器的朗读速度与字数的关系
屏幕阅读器用户通常将朗读速度设置为标准速度的 1.5-3 倍。一些熟练用户甚至使用 5 倍速以上。在这种高速朗读环境下，文本长度直接影响体验。
以标准速度 (约每分钟 150 个英文单词，日语约每分钟 300 个字符) 朗读 125 个字符的 alt 文本大约需要 25 秒。即使 3 倍速也需要约 8 秒。在一个有 10 张图片的画廊页面上，如果每张图片都有 125 个字符的 alt 文本，屏幕阅读器用户仅通过画廊就需要花费 80 秒以上。
为缓解这一问题，以下策略对画廊和轮播组件很有效：
- 将每张图片的 alt 文本控制在 30-50 个字符，详细信息在单独页面提供
- 为整个画廊添加
aria-label="商品图片画廊 (12 张)"等标签，让用户可以跳过 - 使用
role="group"分组，通过地标导航实现跳转 - 提供"查看所有图片"链接，引导至带有详细描述的列表页面
表单的无障碍与字数
表单元素的无障碍由标签、占位符、错误消息和帮助文本四层构成。各层的字数设计决定了表单的易用性。
| 元素 | 推荐字数 | 作用 | 实现注意事项 |
|---|---|---|---|
| label 元素 | 5-20 字 | 输入字段的名称 | 务必用 for 属性关联 |
| placeholder | 10-30 字 | 展示输入示例 | 不要替代标签使用，输入时会消失 |
| aria-describedby (帮助) | 20-60 字 | 说明输入格式或约束 | 获得焦点时朗读 |
| 错误消息 | 15-50 字 | 说明错误内容和修复方法 | 使用 aria-live="polite" 动态通知 |
| 提交按钮 | 3-10 字 | 明确说明操作内容 | 具体化："确认下单"优于"提交" |
将 placeholder 用作标签替代是一种反模式，从无障碍角度来看尤其有问题。placeholder 文本在用户开始输入后就会消失，用户可能在输入过程中忘记字段的用途。此外，大多数浏览器中 placeholder 的默认颜色对比度不足 (约 2.5:1)，不满足 WCAG 的最低标准 4.5:1。与命名规范的字数设计一样，表单标签也应简洁明了。
实时区域的字数控制
实时区域 (aria-live) 用于将页面的动态变化通知屏幕阅读器。它用于实时传达视觉上变化的内容，如聊天消息接收、表单验证结果、倒计时更新等。
实时区域字数设计中最重要的是更新频率与字数的平衡。正如聊天机器人消息设计中所述，短时间内大量文本涌入时，屏幕阅读器用户无法处理这些信息。
| 更新频率 | 推荐字数 | aria-live 值 | 具体示例 |
|---|---|---|---|
| 实时 (不到 1 秒) | 5-15 字 | off (不通知) | 计时器、股票行情 |
| 高频 (1-5 秒) | 10-30 字 | polite | 搜索结果数、字数计数器 |
| 中频 (5-30 秒) | 20-60 字 | polite | 聊天消息、通知 |
| 低频 (30 秒以上) | 30-100 字 | polite | 表单提交结果、状态更新 |
| 紧急 (需要立即通知) | 10-40 字 | assertive | 错误通知、会话过期警告 |
aria-live="assertive" 会中断当前朗读并立即通知，因此应仅限于真正紧急的场景。对表单验证错误使用 assertive 会导致用户每次输入时朗读被中断，使操作变得困难。验证错误应使用 polite，在用户当前操作完成后再通知。
WCAG 2.2 的成功标准与字数的关联
WCAG 2.2 没有直接规定字数的成功标准，但多项标准间接影响字数设计。
| 成功标准 | 级别 | 对字数的影响 |
|---|---|---|
| 1.1.1 非文本内容 | A | 要求提供 alt 文本。需要判断使用简短描述还是详细描述 |
| 1.3.1 信息和关系 | A | 标签与输入字段的关联。要求标签清晰 |
| 2.4.4 链接目的 | A | 仅凭链接文本就能理解链接目标 |
| 2.4.6 标题和标签 | AA | 标题和标签须描述内容。要求简洁且具体的字数设计 |
| 2.5.3 名称中包含标签 | A | aria-label 须包含可见文本。要求字数一致性 |
| 3.3.2 标签或说明 | A | 为输入字段提供标签或说明 |
| 4.1.2 名称、角色、值 | A | 为自定义组件提供无障碍名称 |
成功标准 2.4.4 (链接目的) 与 OGP 文本优化有着相通的理念。"点击这里"、"详情"等模糊的链接文本，会让屏幕阅读器用户在浏览链接列表时无法判断目标。建议使用约 15-40 个字符的描述性文本，如"阅读 WCAG 2.2 官方文档"，使链接文本本身就能传达目的。
多语言网站中的无障碍与字数
在多语言网站中，同一内容的字数会因语言不同而有很大变化。将英文 alt 文本翻译成日语，字数会缩减约 60-70%；翻译成德语则可能膨胀约 130%。这种语言间的字数差异在多语言文本字数设计中有详细介绍。
从无障碍角度来看，最需要注意的是 aria-label 的翻译遗漏。HTML 的可见文本已经翻译，但 aria-label 或 aria-describedby 引用的文本仍保留原语言的情况并不少见。使用 i18n 框架时，请务必将 ARIA 属性的文本也纳入翻译范围。
正确设置 lang 属性也很重要。当页面中包含与整体语言不同的文本时，在该元素上设置 lang 属性可以让屏幕阅读器切换到正确的语音引擎进行朗读。例如，日语页面中的英文引用应使用 <blockquote lang="en">。
实施检查清单 - 无障碍字数的质量管理
为了持续管理无障碍字数设计的质量，建议将以下检查清单纳入开发流程。
- alt 文本：装饰性图片是否设置了
alt=""？信息性图片是否有 30-125 字的上下文相关描述？ - aria-label：是否与可见文本矛盾？是否在 40 字以内？
- 表单标签：所有输入字段是否都关联了
label元素？是否将 placeholder 用作了标签替代？ - 链接文本：是否存在仅为"点击这里"或"详情"的链接？仅凭链接文本能否理解目的？
- 实时区域：字数是否与更新频率匹配？
assertive的使用是否真的必要？ - 标题结构：标题是否准确反映内容？仅浏览标题能否理解页面结构？
- 错误消息：错误内容和修复方法能否在 50 字以内传达？是否通过
aria-live通知？
自动化测试工具 (axe、Lighthouse、WAVE 等) 可以检测结构性问题，但 alt 文本的质量和 ARIA 标签的适当性需要人工审查。将无障碍审查纳入开发团队的流程，并定期使用屏幕阅读器进行实机测试，是通往真正无障碍网站的捷径。
Web 无障碍相关的参考书籍可在 Amazon 上找到。系统学习 WCAG 的成功标准，将大幅提升您在字数设计方面的判断力。