如何实现网页文本可访问性？键盘与屏幕阅读器适配指南

问题描述 #

当网页上按下Tab键时，焦点会正常跳转到链接、按钮等交互元素，但有访问障碍的用户该如何知晓网页存在文本，让屏幕阅读器读取或通过键盘导航到文本？

测试Stack Overflow、bbc.co.uk等网站发现，Tab键仅作用于交互元素，会忽略文本；箭头键也无法直接导航到文本，按下向下键仅能滚动页面。已知用户可选中文本后让屏幕阅读器读取，但这假设用户具备选中文本的能力。想明确：

1. 网页文本的可访问性预期行为是什么？
2. 如何处理才能让文本被屏幕阅读器读取？
3. 示例代码中Tab键跳过所有文本是否正常？文本本就应被忽略吗？

示例代码 #

<!DOCTYPE html>
<html>
<body>
    <h1>Heading 1</h1>
    <p>This is some sample text.</p>
    <h2>Heading 2</h2>
    <p>This is some more sample text.</p>
    <h3>Heading 3</h3>
    <p>Here's even more sample text.</p>
    <!-- All the above ignored by screen reader unless you highlight with a mouse, arrow key does nothing even on sites like bbc.co.uk -->
    <button>Button 1</button>
    <a href="#">Link 1</a>
    <button>Button 2</button>
    <a href="#">Link 2</a>
</body>
</html>

注：测试使用Mac内置屏幕阅读器及Windows上的NVDA，结果一致。

解答 #

核心认知纠正：Tab键的作用范围 #

Tab键的设计初衷仅用于导航交互元素（链接、按钮、表单控件等），静态文本本身就不属于Tab键的导航范围，这是符合可访问性标准的正常行为，并非网页存在问题。

屏幕阅读器读取文本的正常方式 #

屏幕阅读器有专门的文本阅读和导航逻辑，不需要依赖Tab键：

• 自动读取模式：开启屏幕阅读器后，默认会从页面顶部开始自动读取所有语义化的文本内容（标题、段落等）。
• 快捷键导航：用户可通过屏幕阅读器的快捷键快速定位文本块，比如：
  • NVDA中，按H键循环跳转所有标题，按P键跳转段落；
  • Mac VoiceOver中，按Ctrl + Option + U打开转子菜单，选择“标题”“段落”等选项后，用左右箭头导航。
• 滚动跟随读取：当用户用方向键滚动页面时，屏幕阅读器会自动读取当前视口内的文本内容，无需手动选中。

确保文本被屏幕阅读器识别的关键 #

你的示例代码已经做了正确的基础操作：使用语义化HTML标签（<h1>-<h6>、<p>）。这类标签会被屏幕阅读器自动识别为可读取的内容块，不需要额外添加属性或修改。

如果出现文本未被读取的情况，通常是因为屏幕阅读器的操作模式不对——比如你可能停留在“焦点导航模式”（仅通过Tab键跳转交互元素），而非“阅读模式”。切换到阅读模式后，文本会被正常读取。

额外注意事项 #

• 避免用非语义化标签（比如<div>、<span>）替代<h1>-<h6>、<p>，否则屏幕阅读器可能无法识别文本的结构和层级；
• 对于纯装饰性文本，可通过aria-hidden="true"隐藏，避免干扰屏幕阅读器；
• 如果有需要让用户聚焦的静态文本（比如重要通知），可添加tabindex="0"使其能被Tab键选中，但这属于特殊场景，不建议大量使用，以免打乱正常的交互导航逻辑。

内容的提问来源于stack exchange，提问作者Trevor_zam