JAWS无法读取Chrome中具有：：before和：：after伪元素的ins/del元素

0wi1tuuw 于 2022-12-06 发布在 Go

关注(0)|答案(1)|浏览(158)

我是一个Web应用程序的开发者，它具有文本编辑器。我试图在编辑器中构建跟踪插入和删除的功能，我希望它是可访问的。我使用ins和del标记来标记更改，我使用这个页面（https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/ins#Accessibility_concernes）作为指导，指导如何在跟踪的更改的开头和结尾添加消息，以便JAWS读取，让用户知道正在读取跟踪的更改。这在Firefox中非常有效。但是，当我在Chrome中打开同一个页面时，JAWS在遇到伪元素之前立即停止阅读该行。有人能帮我找出哪里做错了吗？或者建议一种替代方法，让我在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>

google-chrome

来源：https://stackoverflow.com/questions/61623020/jaws-not-able-to-read-ins-del-elements-with-before-and-after-pseudo-elements

1条答案

按热度按时间

bf1o4zei1#

内容不在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类的css：-

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

赞(0）回复(0）举报 2022-12-06

我来回答

JAWS无法读取Chrome中具有：：before和：：after伪元素的ins/del元素

1条答案

相关问题

热门标签

最新问答