我是具有文本编辑器的Web应用程序上的开发人员。我正在尝试在编辑器中构建功能以跟踪插入和删除，并且希望它可访问。我正在使用ins和del标记来标记更改，并且我正在使用此页面（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins#Accessibility_concerns）作为有关如何向跟踪的更改的开头和结尾添加消息以供JAWS阅读以使用户知道跟踪的更改的指导正在读取。这在Firefox中效果很好。但是，当我在Chrome中打开同一页面时，JAWS一旦遇到:: before伪元素，就会停止读取该行。谁能帮助我找出我在做错什么，还是建议一种替代方法，让我在Firefox和Chrome中为JAWS用户提供此功能？
我在下面提供了一个简单的HTML页面，它将在运行时演示我的问题：
<html>
<head>
<style>
del::before, del::after, ins::before, ins::after {
clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100% );
-webkit-clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space:nowrap;
width:1px;
}
del::before {
content: " [start delete] ";
}
del::after {
content: " [end delete] ";
}
ins::before {
content: " [start insert] ";
}
ins::after {
content: " [end insert] ";
}
</style>
</head>
<body>
<div contenteditable="true" style="border: 1px solid black;">
<p>
This is a div where I am <ins>removing</ins><del>adding</del> text
</p>
<p>
<span>Regular text just to see how JAWS handles reading this.
</p>
</div>
</body>
</html>
该内容不在DOM中，并且屏幕阅读器正在读取DOM，而不是屏幕上的可见内容。因此，仅使用sr-only将您的内容放入HTML内，即在屏幕上不可见，但在屏幕阅读器的DOM中可用。
<div contenteditable="true" style="border: 1px solid black;">
<p>This is a div where I am
<span class="sr-only">start insert</span>
<ins>removing</ins>
<span class="sr-only">end insert</span>
<span class="sr-only">start delete</span>
<del>adding</del>
<span class="sr-only">end delete</span>
text
</p>
<p>
<span>Regular text just to see how JAWS handles reading this.
</p>
</div>
和用于sr-only类的css：-
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}