<div class="example">
<div class="editor" contenteditable spellcheck="false" role="textbox" aria-multiline="true">
  <h1 id="p1">Priority 1</h1>
  <p>The word <span role="mark">fish</span> is highlighted.</p>
  <p>The word <mark class="commented-text" aria-details="thread-1">cat</mark> has a comment tied to it.</p>
  <p>Suggestion: We shall eat <span role="suggestion" aria-details="thread-2"><del>oranges</del><ins>clementines</ins></span>.</p>
  <p>Revision 1 has some text <del>removed</del>, other text <ins>added</ins> and of course some <del>changed</del><ins>replaced</ins>.</p>
  <p>The word <span aria-invalid="spelling">smarple</span> is misspelled.</p>
  <p>There is a grammar error in <span aria-invalid="grammar">these</span> paragraph.</p>
  <p>The word <mark>fishtank</mark> is highlighted.</p>
  <p>The word snotface<span aria-details="thread-3"><del>, however,</del></span> was considered inflammatory.</p>
  <p>It's possible to <mark aria-details="thread-1 thread-4 thread-5">point</mark> to multiple comments.</p>
  <p>It's possible to point to a group or region of comments ... <mark aria-details="comment-region">don't expect sensible comments here</mark>.</p>

  <h1 id="p2">Priority 2</h1>
  <p role="doc-subtitle">Once more unto the breach</p>

  <div role="doc-toc">
    <h3>Table of Contents -- usually would come earlier in document.</h3>
    <p>Treat TOC as a landmark.</p>
    <ul>
      <li><a href="#p1">Priority 1 items</a></li>
      <li><a href="#p2">Priority 2 items</a></li>
      <li><a href="#p3">Priority 3 items</a></li>
    </ul>
  </div>
    <div role="group" aria-label="Other users here now">
    <p><span id="presence-1" </span></p>
  </div>

  <p><span aria-description="User nearby, Boaty McBoatface">Here is a sentence that is being edited by someone else.</span> Multiple authors can edit this document at the same time.</p>
  <code style="display:block; white-space: pre; border: 2px solid black; margin: 5px;">// Here is some code with a conditional breakpoint inside the loop:
for (index = 0; index &lt; 10; index ++) {
<span role="mark" class="breakpoint" aria-roledescription="breakpoint" aria-description="Condition: index == 2">  doSomething(index);</span>
}
  </code>
  <p>This content has a footnote<span role="doc-noteref" aria-details="footnote-1">1</span></p>
  <p>Some random text with a <sub>subscript</sub> and <sup>superscript</sup>.</p>
  <p>This is a paragraph that straddles the page break (and footnotes, footer and header). This paragraph actually</p>
    <!-- We skip role=doc-backlink because, for consistency, we should always use aria-details.
    Backlink would create a requirement to actually be a link because it's exposed via IA2 as a link.
    By using aria-details on the source element we automatically get the reverse relation.
    -->
  <aside role="doc-footnote"><sup>1</sup> <span>Footnotes are useful and occasionally funny. Page break below this text.</span></aside>

  <div role="doc-pagefooter">This is a running footer<span style="float:right">1</span></div>

  <hr role="doc-pagebreak">

  <div role="doc-pageheader">This is a running header<span style="float:right">Some author's name here</div>
  <p>continues on the next page.</p>
  <h1 id="p3">Priority 3 (this is page 2)</h1>
  <!-- TBD: we need browser and AT implementations for running headers/footers: https://github.com/w3c/dpub-aam/issues/3  -->
  <p>Some page 2 content.</p>
  <p>Column text then a column break.<span role="separator" aria-roledescription="Column break" class="colbreak">&nbsp;</span>Do we want to expose column breaks? Could be annoying to read.</p>

  <!-- TBD: we need browser and AT implementations for running headers/footers: https://github.com/w3c/dpub-aam/issues/3 -->
  <div role="doc-pagefooter">This is a running footer. In the future we'd like to have a built-in role for this rather than using a role descripton.</div>
</div>

<div id="comment-region" class="sidebar" role="region">
  <h2>Comments</h2>
  <div id="thread-1" role="comment">
    Cats are liquid BTW<br>&mdash;Danny Ainge
    <div role="comment">
      No they aren't<br>&mdash;Magic Johnson
    </div>
    <div role="form">
      <textarea cols="80" placeholder="Add reply..."></textarea>
      <input type="submit">
    </div>
  </div>

  <div id="thread-2" role="comment">
    Replaced "oranges" with "clementines"<br>&mdash;Kevin McHale
  </div>

  <div id="thread-3" role="comment">
    Deleted ", however,"<br>&mdash;Magic Johnson
  </div>

  <div id="thread-4" role="comment">
    When you come to a fork in the road, take it.<br>&mdash;Yogi Berra
  </div>

  <div id="thread-5" role="comment">
    The atoms or elementary particles themselves are not real; they form a world of potentialities or possibilities rather than one of things or facts.<br>&mdash;Werner Heisenberg
  </div>

</div>