JAWS 无法使用 Chrome 中的 ::before 和 ::after 伪元素读取 ins/del 元素

Question

我是一个具有文本编辑器的 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>

Answer 1

内容不在 DOM 中，屏幕 reader 正在阅读 DOM，不是屏幕上可见的内容。因此，仅使用 sr-only 将您的内容放在 HTML 中，即在屏幕上不可见，但在 DOM 中可用于屏幕-reader.

<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 class :-

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

JAWS 无法使用 Chrome 中的 ::before 和 ::after 伪元素读取 ins/del 元素

JAWS not able to read ins/del elements with ::before and ::after pseudo-elements in Chrome

google-chrome

accessibility

screen-readers

jaws-screen-reader

web-accessibility