<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body text="#000000" bgcolor="#FFFFFF">
    <div class="moz-cite-prefix">Hi Tony,<br>
      <br>
      I'm not sure this addresses your issues, since I don't know what
      UL is, but, FWIW...<br>
      <br>
      Perhaps using the live region ARIA attributes would help here. 
      But, you shouldn't have to as browsers are supposed to emit
      accessibility events for changes in document content:<br>
      <a class="moz-txt-link-freetext" href="https://www.w3.org/TR/core-aam-1.1/#mapping_events_visibility">https://www.w3.org/TR/core-aam-1.1/#mapping_events_visibility</a><br>
      <br>
      Unfortunately, there is no guarantee that browsers are emitting
      those events, nor, if they are, that ATs are listening for them. 
      Judicious use of aria-live and its associates should force the
      issue.<br>
      <ul>
        <li>aria-live:  <a class="moz-txt-link-freetext" href="https://www.w3.org/TR/wai-aria-1.1/#aria-live">https://www.w3.org/TR/wai-aria-1.1/#aria-live</a><br>
        </li>
        <li>aria-relevant:
          <a class="moz-txt-link-freetext" href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">https://www.w3.org/TR/wai-aria-1.1/#aria-relevant</a><br>
        </li>
        <li>aria-atomic: <a class="moz-txt-link-freetext" href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">https://www.w3.org/TR/wai-aria-1.1/#aria-atomic</a><br>
        </li>
        <li>aria-busy: <a class="moz-txt-link-freetext" href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy">https://www.w3.org/TR/wai-aria-1.1/#aria-busy</a></li>
      </ul>
      Hope that helps.<br>
      <br>
      On 2017-10-23 8:57 AM, Tony Atkins wrote:<br>
    </div>
    <blockquote type="cite"
cite="mid:CAE9TW9C-B-zQqCBOPYbCYoAc4PEJDx00Q-E1zDd4vw2j0R0Hjg@mail.gmail.com">Hi,
      All:
      <div><br>
      </div>
      <div>In recent work on the UL, I have been trying to represent
        revisions to a document in a way that also makes sense with a
        screen reader.</div>
      <div><br>
      </div>
      <div>I started by using <i>aria-label</i> attribute to add hints
        like "this content was added" and "this content was removed". 
         At least with VoiceOver, this resulted in odd artefacts like
        announcing each change as a group containing two items.</div>
      <div><br>
      </div>
      <div>I moved on to trying to use the HTML <ins> and
        <del> elements to enclose insertions and deletions
        respectively.  This made no difference at all in the way
        VoiceOver read the content.</div>
      <div><br>
      </div>
      <div>I then updated this approach based on <a
href="http://pauljadam.com/demos/css-line-through-del-ins-accessibility.html"
          moz-do-not-send="true">the strategy described here</a> under
        "CSS Generated Content + Visually Clipped Text", which is to add
        visually-clipped content before <ins> and <del>
        elements using something like the following HTML and CSS
        snippets:</div>
      <div><br>
      </div>
      <blockquote class="gmail_quote">This string <del>is
        unchanged</del> <ins>has been updated</ins>.</blockquote>
      <blockquote class="gmail_quote">
        <pre><span>ins</span>:<span>before </span>{
    <span>content</span>: <span>"content added:"</span>;
    <span>position</span>: <span>absolute</span>;
    <span>clip</span>: <span>rect</span>(<span>0 0 0 0</span>);
}

<span>del</span>:<span>before </span>{
    <span>content</span>: <span>"content removed:"</span>;
    <span>position</span>: <span>absolute</span>;
    <span>clip</span>: <span>rect</span>(<span>0 0 0 0</span>);
}</pre>
      </blockquote>
      <div>In my limited testing with VoiceOver, this requires more
        effort on the user's part to move through the content, as the
        screen reader stops on each before as well as each element. 
        However, the text read aloud is clear and does not add odd
        "group" announcements like the "labeled-by" strategy.</div>
      <div><br>
      </div>
      <div>I was hoping to get some input from the wider group, as I
        know very many of you are quite knowledgeable in this area, and
        have experience with a wider range of screen readers as well. 
        Any ideas or pointers to previous work in this area would be
        appreciated.<br>
      </div>
      <div><br>
      </div>
      <div>Thanks,</div>
      <div><br>
      </div>
      <div><br>
      </div>
      <div>Tony</div>
    </blockquote>
    <p><br>
    </p>
    <pre class="moz-signature" cols="72">-- 
;;;;joseph.

'Call me hobophobic, but I don't think two vagrants should be allowed to marry.'
                               - J. Tiedrich -
</pre>
  </body>
</html>