J AWS не может читать элементы ins / del с псевдоэлементами :: before и :: after в Chrome - PullRequest
Новая
       117

J AWS не может читать элементы ins / del с псевдоэлементами :: before и :: after в Chrome

2 голосов
/ 06 мая 2020

Я разработчик веб-приложения с текстовым редактором. Я пытаюсь встроить в редактор функции для отслеживания вставок и удалений, и я хочу, чтобы он был доступен. Я использую теги ins и del, чтобы отметить изменения, и я использовал эту страницу (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins#Accessibility_concerns) в качестве руководства по добавлению сообщений в начало и конец отслеживаемых изменений для J AWS в read, чтобы пользователь знал, что отслеживается изменение. Это отлично работает в Firefox. Однако, когда я открываю ту же страницу в Chrome, J AWS перестает читать строку, как только встречает псевдоэлемент :: before. Может ли кто-нибудь помочь мне понять, что я делаю не так, или предложить альтернативный подход, который позволит мне предоставить эту функциональность пользователям J AWS как в Firefox, так и в Chrome?

Я включил простая страница 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>

1 Ответ

0 голосов
/ 08 мая 2020

Контент отсутствует в DOM, и программы чтения с экрана читают DOM, а не видимое содержимое на экране. Так что поместите свой контент внутри HTML только с sr-only, т.е. не отображается на экране, но доступен в 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>

и css для sr-only класс: - 

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