总之，易于阅读的文章并不是“使用了时尚字体的文章”。打开后就能立刻知道这是什么文章，即使注意力分散也能回到原处，即使文字放大也不会崩溃，即使语言改变也能自然阅读。读者并不是为了攻略文章而来，而是文章应该做好引导。
先总结3点：
- 正文建议从17-18像素左右开始，行距1.7-1.9，每行不要太长，这是实际工作中的起点。这并不是万能的法则。
- 在WCAG 2.2中，重要的是确保对比度、200%文字放大、320 CSS像素下的重新排版、文本间距覆盖、键盘操作等不会被破坏。[R1-R8]
- 12种语言应采用“共同的可访问性基础+根据文字体系进行调整”的方式，而不是“将同一CSS复制12次”。[R10-R13]
1. 易读性不是感觉，而是三层设计
易读性至少有三层：文字可见、文章可追踪、页面可操作。即使18像素，如果文章像墙一样难以阅读也会很痛苦。即使文章简单，如果按钮太小也会很痛苦。也就是说，“只调整字体大小就完成”就像只打磨门牌号却拆除台阶一样。
2. 读者一开始不会读完整篇文章。因此要让文章可以分四个阶段阅读
在网页上，随意阅读是常见的。因此，文章应设计成5秒=标题和开头，30秒= H2和加粗，3分钟=要点，深入挖掘=全文的四个阶段。这并不是说只写短文。即使写长文，也要在中间设置大量“站点”，以便读者可以随时停下来。
仅仅排列H2是不够的，每个部分的开头都应该有小结，表格和项目符号可以方便比较。这样，就能让“想全部阅读的人”和“只想找答案的人”共存于同一页。
3. 正文的字体大小从17-18像素左右开始
网页正文没有绝对的最佳值。不过，字体太小会降低可读性，在使用实际页面的视线研究中，字体大小的增加与固定时间的缩短有关。[R14] 实际工作中，正文从17-18像素左右开始，使用rem等易于放大的单位会更方便。
重要的是，“因为设置为18像素就变得可访问”这一点并不正确。WCAG 2.2 AA的“调整文字大小”要求在放大到200%时，内容和功能不会丢失。[R3] 如果读者放大文字的瞬间菜单就消失了，那么18像素的美观初始画面只是一张纪念照片。
4. 行距、段落间距、每行字数可减少“文字流量”
作为正文的起始值，行距1.7~1.9左右，便于在长篇网络文章中留出余地。段落之间也要留出明确的空白。以每段一个主题为基本，避免没有换行的巨大段落。[R9]
在西方文字中，有研究显示每行约55个字符的中等长度是有效的，实际工作中也常以55~70个字符左右作为起点。[R15] WCAG AAA的Visual Presentation指出，可调整显示的字符数应为80个字符以下，CJK文字应为40个字符以下。[R8] 这里也并非“55是宇宙的真理”，应根据屏幕、语言和字体大小进行调整。
正文两端对齐时，单词之间的空格容易出现不整齐。特别是在网络上，通常使用单侧对齐即可。[R8]
5. 字体不是魔法棒，应快速提供普通易读的字体
衬线体和无衬线体之间没有万能的胜者。控制实验中并未发现阅读速度有显著的衬线效应。[R16] 此外，2026年的元分析显示，没有确认到像OpenDyslexic这样的“阅读障碍专用特殊字体”能持续改善阅读成绩的证据。[R17]
也就是说，无障碍应对并不等于强制使用特殊字体。足够的大小、间距、自然的字形、正确的字符收录、用户可放大才是基础。文章应优先使用终端的系统字体或各语言通用的字体，从而避免加载庞大的网络字体。
6. 背景色与对比度：浅灰色文字的“时尚税”很高
WCAG 2.2 AA标准中，普通文字的对比度应为4.5:1以上，大字号文字的对比度应为3:1以上。[R2] 不需要将“看起来高级”的浅灰色放在白色背景上，给读者的眼睛带来减益。
研究显示，将深色文字放在浅色背景上（正极性显示）在校正和小字号文字的可视性方面有多个有利结果。[R18] 因此，面向大众的初始值选择浅色主题较为稳妥。不过，也有人喜欢深色模式，因此应保留选择选项。“比纯白更肯定米白色更健康”这种说法并没有强有力的依据。
7. H1、H2、H3不是装饰，而是文章的路标
H1是页面的主题。H2是主要论点。H3是其细分内容。不要只在外观上加粗，假装是标题，而应作为HTML标题结构来赋予其意义。由于屏幕阅读器用户使用标题在页面内移动，标题同时兼具视觉设计和导航功能。[R7][R9]
好的测试很简单。只抽出H2，是否能理解文章的主线？ 如果不能，那么标题可能变成了“第二章”“接下来”“更详细”之类的迷路制造机。
8. 加粗、项目符号、表格、结论框作为“信息标识”使用
加粗表示重点词汇。项目符号表示并列信息。表格用于比较。结论框用于明确判断的结论。每种元素都应赋予其特定的用途。如果全文都加粗，就像同时点亮了100个警示灯，最终反而没有一个能引起注意。
链接不应仅靠颜色区分，还应使用下划线等其他线索。重要信息也不能仅用“红色表示危险”来结束，还应通过文字或图标来表达含义。
9. 以“ドパガキ”模式为前提，但不认同“人类注意力8秒”的说法
这里的“ドパガキ”并不是医学术语。而是指通知→短视频→新标签页→返回→‘你刚才在看什么？’这种现代网络的散漫状态的调侃称呼。并不是用来辱骂特定世代或特定障碍群体的词语。
对策不是将文章全部转化为短视频。而是使用简短的段落、具体的标题、每节的小结、必要时添加目录，以及在返回时能恢复上下文的专有名词。自动播放、无关的轮播图、在阅读过程中占据屏幕的弹窗，都是对读者注意力的干扰，应尽量减少。[R9]
10. 障碍访问性应作为标准配置，而非“特殊模式”
基础目标是符合WCAG 2.2 AA标准。主要包括：文字放大200%、在320 CSS px宽度下不会横向滚动的响应式布局、4.5:1的对比度、24×24 CSS px以上的指针目标或足够间距、键盘操作、可见焦点、跳过重复部分的机制等。[R1-R7]
“Text Spacing”的“行间距1.5、段落间距2、字间距0.12em、单词间距0.16em”并不是要求将初始CSS设置为这些值。AA标准要求即使用户覆盖这些值，文字也不会重叠、消失或功能损坏。[R5]
在实际操作中，将主要按钮设置为约44px大小会更易于点击，但WCAG 2.2 AA的最低标准本身是24×24 CSS px，包含例外情况。[R6]
11. 12种语言共享同一设计系统，但不强制统一排版
共享的是对比度、标题层级、放大、响应式布局、边距、操作性、可访问名称等基础部分。根据语言不同而改变的是字体、换行、连字、标点、行高等与文字体系相关的部分。[R10-R13]
lang属性也很重要。不要随意将zh-Hans、zh-Hant、pt-BR等信息简化为zh或pt。这些信息对浏览器、屏幕阅读器、连字、字体选择都有帮助。
12. 不同语言的实际起始值
| 组 | 起始值的考虑 |
|---|---|
| 日语 | 17〜18px、行间距1.8左右、每行30〜40字左右。不强制不必要的字间距。尊重日语排版。[R10] |
| 简体字・繁体字中文 | 区分CJK字体，不破坏禁则和标点。区分zh-Hans和zh-Hant。[R11] |
| 韩语 | 使用韩文字体，不加入不自然的字间距。确认韩语排版的行分割。[R12] |
| 泰语 | 不破坏正确的形状和词界、换行。行高稍宽更安全。不要随意使用word-break: break-all。[R13] |
| 越南语 | 使用完整收录变音符号的字体，固定高度不裁剪上下部分。 |
| en/es/pt-BR/id/fr/de | 以每行55〜70字左右为起点，考虑正确的lang和hyphens:auto。在德语等长复合词情况下确认溢出情况。 |
13. 在手机上，“能读”比“马上显示”更重要
如果为所有12种语言都加载巨大的Web字体，读者会在文字显示前就离开。web.dev指出Web字体会延迟FCP/LCP，并可能导致CLS。[R19] 正文优先使用系统字体，品牌字体只在必要部分使用。
Core Web Vitals的良好目标目前是p75的LCP在2.5秒以下、INP在200ms以下、CLS在0.1以下。[R20] 在阅读过程中，由于广告或字体导致段落突然下移的网站，会让人感觉“就像在用手指按着书时，店员突然移动了桌子”。
14. 被持续使用的文章，每次都在相同的位置显示相同的内容
增加再次访问的基石是可预测性，而不是华丽的演出。如果标题的外观、链接的外观、目录、文章宽度、语言切换、搜索结果、相关文章的位置每次都几乎相同，读者就能学习操作。
如果提供可以改变文字大小、行距、主题的“Aa”设置，保存该选择也是不错的。无障碍设计不应每次要求“开启无障碍模式”，而应从初始状态就更稳定，需要的人再进行调整。
15. 不应该做的“读者耐力测试”
应避免的典型例子包括：12px级别的正文、浅灰色、超过100字的长行、两端对齐、填满整个屏幕的段落、标题层级跳跃、全部都是粗体、仅用颜色表示意义的UI、自动播放、难以关闭的弹窗、将正文变为图片、放大后出现水平滚动地狱、巨大的Web字体、无意义的动画。
读者并不是来参加“是否具备读完这个网站的智力和动体视力”的测试的。
16. 如果不确定，就从这个基准值开始
| 项目 | 实务上的起始值 | 备注 |
|---|---|---|
| 正文 | 17〜18px | 不是绝对值。应确保可以放大 |
| 正文行间距 | 1.7〜1.9 | 根据语言和字体进行调整 |
| 拉丁文字一行 | 约55〜70字 | 研究和实务的起点。避免过长[R15] |
| CJK一行 | 约30〜40字 | 40字也符合WCAG AAA Visual Presentation的参考标准[R8] |
| H1 | 约32〜40px | 与正文的差异要明确 |
| H2 | 约25〜30px | 单独H2也应能理解流程 |
| H3 | 约21〜24px | 与H2保持差异 |
| 一般文字对比度 | 4.5:1以上 | WCAG 2.2 AA[R2] |
| 大字 | 3:1以上 | WCAG 2.2 AA[R2] |
| 指针目标 | 24×24 CSS px以上为基准 | 有例外。实务中也考虑44px左右[R6] |
| 文字放大 | 200% | 不丢失内容和功能[R3] |
| 自适应布局 | 320 CSS px | 原则上不需要双向滚动[R4] |
17. 建立质量门禁。“注意”不是质量保证
在文章工厂或CMS中，不应仅依赖人类的记忆来确保可读性。通过静态检查lang、H1、标题顺序、图片alt、可访问名称、禁止的CSS，再通过实际浏览器检查320px、200%放大、文本间距覆盖、键盘、焦点、水平滚动等。
可以安全自动修复的内容可以自动修复。例如缺失的lang或通用CSS的应用。但文章的含义、翻译、alt内容等不能擅自篡改。无法修复的则标记为FAIL并转交给人处理。质量门禁不是“生气的老师”，而是“防止损坏商品出货的闸机”。
18. 总结：好的文章不会考验读者
易读的文章的本质，不是把文字放大，也不是把空白设计得时尚。读者知道该读哪里，可以中途返回，可以放大，可以点击，可以朗读，可以自然地以不同语言显示，并且速度快。 这些都要在同一个设计系统中实现。
对于普通成年人来说是自然的，对于注意力容易分散的人、视力较弱的人、阅读困难的人、使用键盘或辅助技术的人来说，也同样不会出现问题。这才是最强大的。与其后来单独制作“无障碍版本”，不如一开始就让入口宽敞一些。
