Video examples

iOS Voiceover Safari

Android Talkback Chrome

MacOS Voiceover Safari

Code examples

Place the element in logical DOM order

This semantic HTML appears in logical order in the page.

<div>
  <div class="sticky top">
    <button>Get a special deal</button>
    <p>Content that sticks to the top</p>
  </div>
  <div class="vertical-spacer">
    Web page content
  </div>
</div>
<div>
  <div class="vertical-spacer">
    Web page content
  </div>
  <div class="sticky">
    <button>Buy now</button>
    <p>Content that sticks to the bottom</p>
  </div>
</div>

Content that sticks to the top

Web page content
Web page content

Content that sticks to the bottom

Developer notes

Group

  • Must appears in logical page order within the page.
  • Do not place it at the actual end or beginning of the DOM