核心是控制视觉干扰、增强字符辨识度、稳定阅读节奏，须从html结构和基础css干预：line-height用无单位值（如1.6），font-size用rem，禁用justify和letter-spacing:normal，段落语义完整，列表用/，字体优先声明可访问字体并fallback system-ui。
针对阅读障碍（如 dyslexia）优化 HTML 文本排版，核心不是加特效或换字体，而是控制视觉干扰、增强字符辨识度、稳定阅读节奏——这些必须从 HTML 结构和基础 CSS 层面直接干预，不能只靠后期 JS 或浏览器插件。
line-height 和 font-size 必须用无单位数值配合 rem
固定像素值（如 line-height: 24px）在用户缩放字体或启用系统大字模式时会失效，导致行距塌陷、文字粘连。阅读障碍用户常依赖系统级字体放大，此时只有相对单位能保持比例稳定。
-
line-height始终设为无单位数值（如1.6），确保它随font-size等比缩放 -
font-size用rem（而非px或em），根元素:root的字号由用户系统决定，前端不锁定 - 避免
font-size: 100%或font-size: 1em，它们可能继承父级被重置的尺寸，造成意外缩放丢失
禁用 text-align: justify 和 letter-spacing: normal
两端对齐会在中文里制造不规则空白“河流”，破坏词组边界识别；而默认 letter-spacing: normal 在某些字体下会让相似字形（如「日」「曰」「口」）更难区分。
- 正文统一用
text-align: left（非start），保证 RTL 语言也能正确 fallback - 对易混淆字形集中的段落（如说明文档、术语表），可谨慎启用
letter-spacing: 0.05em，但仅限p或section级别，不全局设置 - 绝对不要用
word-spacing调整词距——中文无空格分词，该属性无效且可能触发渲染异常
段落结构必须语义完整，禁用连续空
屏幕阅读器会把单个 <p></p> 内所有内容读作一句，若一个 <p></p> 包含多条操作步骤或混合信息类型，用户无法暂停、回溯或跳过。阅读障碍用户更依赖段落作为认知锚点。
- 每个
<p></p>只承载一个独立语义单元：一个问题、一条指令、一个注意事项 - 禁止用
<p></p> <p></p>模拟空行——改用div配margin-top或 CSSgap - 长列表必须用
<ol></ol>或<ul></ul>，不可用<br>或多个<p></p>模拟——否则屏幕阅读器无法报出“第 2 项，共 5 项”
字体选择与加载策略直接影响可读性
不是所有“无衬线体”都适合阅读障碍者。OpenDyslexic 等专用字体虽有效，但需注意加载失败降级路径；而系统字体如 system-ui 在部分 Android TalkBack 下存在朗读中断问题。
- CSS
font-family列表末尾必须包含system-ui，但前面要优先声明已托管的可访问字体（如"Inter", "Spline Sans", system-ui） - 禁用
@font-face的font-display: swap——闪动会导致阅读追踪中断；改用block或optional，接受短暂空白而非样式跳变 - 避免使用细体（
font-weight: 200/300）、斜体（font-style: italic）或过度圆角字体，它们降低字母开口辨识度
最常被忽略的是：阅读障碍优化不是“给特殊用户开小灶”，而是让文本结构更干净、节奏更稳定、视觉噪声更少——这些改动对所有人都是收益，只是对特定群体更为关键。一旦 HTML 层级的语义和 CSS 基础节奏没立住，后面加多少 ARIA 或 JS 插件都补不回第一眼的认知负荷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
