什么是屏幕阅读器文本预览？

屏幕阅读器文本预览工具展示辅助技术如何解读您的HTML内容。它会呈现每个元素的无障碍名称、角色和阅读顺序，让您在真实用户遇到问题之前就发现缺失的标签、错乱的标题层级和ARIA问题。

工具按屏幕阅读器构建可访问性树的方式解析 HTML：去掉视觉布局，解析 aria-label 和 aria-labelledby，拾取 img 的 alt 文本，最后压平成一条线性阅读序列。问题面板会标出没有可访问名称的链接、跳级的标题、缺 alt 的图片以及没有标签的表单控件。

使用方法

1. 粘贴您的HTML内容或输入要分析的URL。
2. 查看线性化的阅读顺序和元素无障碍树结构。
3. 修复标记的问题并重新测试，直到阅读流程清晰顺畅。

何时使用

• 在落地页上线前自查是否能通过 WCAG AA 审计。
• 排查为什么 NVDA 或 VoiceOver 用户反馈导航菜单读起来很乱。
• 更新第三方组件后，检查无障碍是否被破坏。

结果

一位开发者粘贴了一个导航菜单的代码。工具发现其中3个链接缺少无障碍名称，且标题层级从h1直接跳到了h4，这会让屏幕阅读器用户感到困惑。

常见问题

用这个能替代真正的屏幕阅读器测试吗？

不能。NVDA、JAWS、VoiceOver 在朗读 live region、表格表头、动态内容时各有差异。用本工具先把明显问题挑出来，再花时间装屏幕阅读器精细测，效率更高。

为什么我的装饰性图标会被标成问题？

默认情况下屏幕阅读器会朗读每一张 img。如果图标只是装饰，给它一个空 alt 并加 aria-hidden 为 true，工具就会把它从阅读序列里跳过。别写 alt=图标 或 alt=装饰，那比不写还糟。

正确的标题层级是什么样的？

一个页面只能有一个 h1，往下层不能跳级（h2 之后不能直接接 h4）。往上回去倒没问题。屏幕阅读器用户靠标题跳转，层级乱了页面就像迷宫一样。

每个可交互元素都要写 aria-label 吗？

不用。带可见文字的按钮不需要，文字本身就是它的可访问名称。只有在没有可见文字（纯图标按钮）或者文字不够说明问题（一排都叫了解更多的链接）时才补 aria-label。

能整页粘进来吗？

可以，把整段 HTML 源码粘进来即可。工具会忽略 script、style、meta，只关注 body 部分。页面很长时，建议分段贴，问题列表会更清爽。

相关工具