语义化标签是可访问性的基础：p必须包裹完整语义单元，禁用br分段；标题需严格层级连续；justify需配合lang和text-justify；figure/time等标签不可替代；正确使用原生标签解决80%可访问性问题。
直接用语义化标签写正文，比后期加CSS或JS补救更有效——结构错了，样式再漂亮也救不回可访问性。
为什么
不能当换行符用
常见错误是连续写多个 <p></p> 模拟空行，或把整段说明塞进一个 <p></p> 里。结果是：屏幕阅读器把所有内容读成一句、无法暂停；浏览器默认的上下外边距被覆盖；缩放时行距塌陷。
- 每个
<p></p>必须包裹一个完整语义单元：一个问题、一条操作、一个结论 - 禁用
<br>分段——它只适合地址、诗行这类需强制断行的场景 - 空行需求改用 CSS：
margin-bottom: 1.4em（别写margin: 1.4em 0，避免意外覆盖上边距） - 移动端 WebView 对
margin解析不一致，建议显式写margin-bottom: 1.4em; margin-top: 0;
标题层级错乱会直接让辅助技术“迷路”
跳着用 <h2></h2> 后接 <h4></h4>，或用 <div class="title"> 替代 <code><h3></h3>，都会导致屏幕阅读器大纲树断裂。NVDA 或 VoiceOver 无法生成正确导航列表，用户按 H 键跳标题时直接跳空。
- 一个页面只能有一个
<h1></h1>，通常是主标题 -
<h2></h2>到<h6></h6>必须连续降级，不能跳跃，也不能用style="font-size: 24px"冒充 - 章节容器必须用
<section></section>包裹，且内部必须含<h2></h2>–<h6></h6>；纯视觉分隔不用<section></section> - 隐藏标题（如
display: none或visually-hidden类但没配aria-label）等于从可访问性树中删除该区块
中文两端对齐不是加个text-align: justify就完事
纯 text-align: justify 在中文里基本无效，Safari 17.4+ 还会静默失效——除非同时满足三个条件：容器带 lang="zh"、CSS 同时声明 text-align: justify 和 text-justify: inter-character、段落足够长（至少 4 行）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 短段落末行仍左对齐是正常行为，不是 bug
- 单行文本需额外加
text-align-last: justify，但 iOS Safari 14.5 以下不支持 - 禁用
letter-spacing全局调整字距——中文无空格分词，该属性易引发渲染异常，且会让「日」「曰」等形近字更难区分 - 若确需增强字符辨识度，仅在特定
<p></p>或<section></section>上谨慎启用letter-spacing: 0.05em，不设全局规则
<figure></figure> 和 <time></time> 不是装饰，是语义锚点
把图表、公式、时间戳写成普通文字，等于主动放弃辅助技术对信息类型的识别能力。比如“2026年7月15日”只是字符串，而 <time datetime="2026-07-15">2026年7月15日</time> 会被读作“七月十五日”，并支持日历聚合。
-
<figure></figure>必须配<figcaption></figcaption>，且alt要描述功能与结论，例如：alt="柱状图：干预组反应时128ms，显著低于对照组215ms" - 空
alt=""或alt="图1"对视障用户毫无价值 -
<figure></figure>是整体语义单元，屏幕阅读器会将其作为一块读出，不可拆开用多个<p></p>模拟 - 动态生成的内容（如 JS 渲染的图表）也要保证 DOM 中存在真实
<figure></figure>结构，不能只靠 ARIA 补救
最常被忽略的是：可访问性不是加一堆 aria- 属性，而是让 <p></p> 真正是段落、<h2></h2> 真正是二级标题、<time></time> 真正代表时间——标签用对了，80% 的问题就消失了。
