Accessible Dialog Markup

accessibleDialog.html

<!--  Dialog popups should be directly after the button that activates them
      in the HTML source order, so that they can be read by screen readers
      as soon as they are opened -->

<ul>
  <li class="button1">
      <a href="#">The button that activates the popup</a>
      <div class="popup1">My popup content</div>
  </li>
  <li class="button2">
      <a href="#">My second button</a>
      <div class="popup2">
        <h3>My 2nd title</h3>
        <p>MyThe second popup dialog,/p>
      </div>
  </li>
</ul>