伪元素内容不会被屏幕阅读器读取，所谓“重复读取”是误判；实际是真实DOM元素的aria-label、title等与可见文本重复导致，伪元素根本不进入可访问性树。
伪元素内容根本不会被屏幕阅读器读取，所谓“重复读取”是误判
伪元素（::before、::after）生成的内容不进入 DOM 树，也不出现在可访问性树（AX Tree）中，屏幕阅读器完全无视它。如果你观察到某段文本被读了两遍，问题一定出在真实 DOM 元素上，而不是伪元素本身在“多读一次”。常见诱因是：宿主元素已含可见文本，又用 aria-label 或 aria-labelledby 重复声明了相同语义；或开发者误将伪元素当内容容器，同时又在 HTML 中写了等效文字。
为什么你会觉得“::after 被读了两次”
实际发生的是：屏幕阅读器读了真实文本节点 + 宿主元素的 aria-label（或 title），而你误以为其中一次来自伪元素。伪元素没有 nodeType、没有 textContent、不能被 getSelection() 捕获，更不会触发任何可访问性事件。验证方法很简单：document.querySelector('.item::after') 直接抛 SyntaxError，window.getComputedStyle(el, '::after').content 返回字符串值，但该值对读屏软件零影响。
真正导致重复播报的典型配置
以下组合极易引发重复，且和伪元素无关：
-
→ 屏幕阅读器先读aria-label，再读按钮内文本“提交” -
×→title和role="button"的默认朗读行为叠加 - 用
attr(data-label)驱动content: attr(data-label)，同时又给宿主加aria-label，两者值一致 - 父容器设了
aria-live="polite"，而子元素文本变更后，真实 DOM 更新 + 伪元素视觉更新被误认为两次触发
怎么确认是不是伪元素惹的祸
打开浏览器的 Accessibility Inspector（Chrome DevTools → Elements → 右键元素 → “Inspect Accessibility Properties”），检查目标区域的 AX Tree 中是否包含该伪元素——它永远不会出现。如果 AX Tree 里有两个相同语义的节点，一定是两个真实元素或一个元素配了双重语义属性。此时应：
- 删掉冗余的
aria-label，优先用真实文本 - 若需视觉缩写（如“5m”），用
visually-hidden类包裹完整文本，而非依赖content: attr() - 避免在已有文本的元素上叠加
title，尤其当title值与文本一致时 - 测试时关闭所有 CSS（DevTools → Rendering → “Disable all styles”），看读屏行为是否变化；若不变，说明问题纯属 DOM/ARIA 层
伪元素从不参与可访问性流程，但它常成为排查盲区——因为开发者容易把它当成“轻量级内容插入方式”，却忘了它连“内容”都不是，只是渲染层的一次绘图指令。真要控制读屏行为，只有一条路：操作真实 DOM 和 ARIA 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
