语义html标签是可访问性的基石，原生标签如、-、自带隐式role、焦点管理与读屏器兼容性，而滥用aria或错误嵌套反而破坏导航结构。

不能用HTML语义降低可访问性阻碍——恰恰相反，不用语义标签，才是最大阻碍。

为什么

比

更可靠

很多开发者加了role="navigation"，却发现在NVDA或VoiceOver里按NVDA+U根本跳不到那个区域。不是读屏器“没读”，而是它压根不认为这是个可识别的导航区块。

• <nav></nav>自带隐式role="navigation"、默认可聚焦、支持区域跳转命令，且内部链接保持DOM顺序，无需手动设tabindex
• <div role="navigation">必须显式加<code>tabindex="0"才能被键盘聚焦；否则在部分模式下直接被忽略
• iOS Safari + VoiceOver对role属性支持弱，但对<nav></nav>原生标签兼容稳定
• JS动态插入<nav></nav>后，若删掉重建，语音导航路径会中断——结构断裂比没写更糟

h1–h6层级断裂会让盲人用户彻底迷路

屏幕阅读器用户靠h1→h2→h3的嵌套逻辑快速定位内容。跳级（比如h1后直接h4）、用div模拟标题、或只靠font-size“看起来像标题”，都会让快捷键（如NVDA+2）失效。


Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
• 每个页面必须有且仅有一个h1，它是语音导航的起点锚点
• h2应对应逻辑大节（如“产品功能”“用户反馈”），不能只为样式服务
• CSS放大字体 ≠ 语义标题，读屏器照样跳过

button和div模拟按钮的可访问性差距是系统级的

写<div onclick="submit()">提交</div>，对屏幕阅读器来说就是一段普通文本；而<button>提交</button>会被直接读作“提交 按钮”，并支持Tab聚焦、Enter/Space激活、TalkBack手势操作、盲文设备映射。

• 原生<button></button>自带焦点管理、键盘事件、状态反馈（如:focus、:active），不用手写tabindex或监听keydown
• 用<div role="button">必须补全：tabindex、Enter/Space监听、<code>aria-pressed（如果是开关）、视觉焦点样式
• Android TalkBack、iOS VoiceOver、Windows NVDA全部优先信任原生元素，对ARIA模拟的支持参差不齐

真正容易被忽略的，不是“要不要加语义”，而是“语义一旦写错，比不写还危险”——比如<section></section>里没放标题、<main></main>被嵌套在<article></article>里、或多个h1并存。这些错误不会报错，但会让屏幕阅读器构建出断裂、歧义甚至不可跳转的导航地图。