Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
降低网页阅读障碍的核心是语义正确、结构干净、语言明确；lang必须为zh-cn等标准值且置于标签，标题层级不可断裂，须为直接子元素且唯一，需有明确导航意图并用aria-label区分。
直接说结论：降低网页阅读障碍，核心不是堆砌ARIA或写一堆提示文案，而是让HTML本身“不制造障碍”——靠语义正确、结构干净、语言明确这三点就能解决80%的阅读类问题。
lang属性写错或漏掉，屏幕阅读器就“读错字”
中文页面没写lang="zh-CN"，或者写成lang="zh"、lang="cn"，NVDA、VoiceOver 会按英文规则断词、用日语/韩语音调朗读，用户根本听不懂。这不是“读得慢”，是“读错”。
- 必须在
标签上写，不能只加在某个<p></p>里 - 多语言混排时，局部切换用嵌套
lang，比如英文引文：<p lang="en">...</p> - React/Vue 中 SSR 渲染阶段就要输出正确的
lang值，JS 运行时补写无效
标题层级断裂，等于把目录撕碎后塞进书里
屏幕阅读器用户靠 H 键（H1/H2/H3…）跳转章节。一旦出现<h2></h2>后面直接<h4></h4>，他们就会“掉层”——以为一节结束了，实际内容还在继续。这不是体验差，是信息结构崩塌。
- 常见原因：CSS 隐藏了
<h3></h3>但没删 DOM；组件库默认用<h2></h2>当卡片标题，嵌在<h2></h2>主区域下 - 修复不是加 ARIA，而是检查 DOM 是否真有对应层级的标题
-
<section></section>内部可以重置层级，但必须显式提供一个<h2></h2>或更高级别标题开头
main/nav/aside 等 landmark 元素用错位置，AT 就“看不见主干”
<main></main>必须是的**直接子元素**，且只能出现一次。如果包在<div>或<code><section></section>里，NVDA 会跳过它，或者当成普通区块处理——用户点“跳到主内容”键，结果卡在页眉不动。
-
<nav></nav>不是“所有链接集合”，而是有明确导航意图的组：主导航、面包屑、页内锚点列表才算；文章末尾的“相关阅读”不算 - 多个
<nav></nav>必须用aria-label区分，否则 AT 用户按 N 键会全塞进一堆无关链接 -
<aside></aside>要对应真正“补充性内容”，广告、侧边栏推荐算；但独立文章摘要不算，它属于主内容
最容易被忽略的其实是“不写东西”——比如该用<button></button>却用<div>，该用<code><label for="x"></label>却只放个文字。这些空缺不会报错，但会让阅读障碍用户反复迷失上下文。语义不是装饰，是结构本身。
