htmlgoogle-chromeaccessibilityscreen-readersjaws-screen-reader

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

I'm a developer on a web application that features a text editor. I'm trying to build functionality into the editor to track insertions and deletions and I want it to be accessible. I'm using ins and del tags to mark the changes and I was using this page (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins#Accessibility_concerns) as guidance on how to add messages to the beginning and end of tracked changes for JAWS to read to let the user know a tracked change is being read. This works great in Firefox. However, when I bring up the same page in Chrome, JAWS stops reading the line as soon as it encounters the ::before pseudo-element. Can anyone help me figure out what I'm doing wrong or suggest an alternative approach that will let me provide this functionality to JAWS users in both Firefox and Chrome?

I've included a simple HTML page below that will demo my problem when run:

<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>
Solution

  • The content is not in the DOM and screen readers are reading the DOM, not the visible content on the screen. So put your content inside the HTML only with sr-only i.e. not visible on Screen but available in the DOM for screen-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>

    and the css for sr-only class :-

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