如何让屏幕阅读器忽略HTML的<hr>标签（仅显示不朗读）

你使用<hr>标签做内容分隔时，不同屏幕阅读器会读出不同内容（比如“破折号”“分隔线”），想要只保留视觉效果、屏蔽阅读器朗读，完全可以实现，以下是两种可靠方法：

• 方法一：添加ARIA隐藏属性
  直接给<hr>加上aria-hidden="true"属性，这是无障碍领域的标准处理方式，能让屏幕阅读器直接忽略这个元素，同时完全不影响它的视觉样式：

// content

<hr aria-hidden="true">

// content

• 方法二：用CSS模拟分隔线
  如果不想依赖原生<hr>标签，也可以用空<div>配合CSS实现相同的视觉分隔效果，空元素默认不会被屏幕阅读器识别：

// content

<div class="divider"></div>

// content

对应的CSS样式（可根据需求调整）：

.divider {
  height: 1px;
  width: 100%;
  background-color: #ccc;
  margin: 1rem 0;
}

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