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.

It uses only CSS (no JavaScript) to float content as desired.

<div>
  <div class="promo-bar sticky top">
    <button>Upgrade today</button>
    <p>Content that sticks to the top</p>
  </div>
  <div class="vertical-spacer">
    Web page content
  </div>
</div>
<div class="promo-bar">
  <button class="secondary">See more</button>
  <p>Content that is <em>not</em> sticky</p>
</div>
<div>
  <div class="vertical-spacer">
    Web page content
  </div>
  <div class="promo-bar sticky">
    <button>Buy now</button>
    <p>Content that sticks to the bottom</p>
  </div>
</div>

Content that sticks to the top

Web page content

Content that is not sticky

Web page content

Content that sticks to the bottom

Developer notes

Group

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