Video examples

iOS Voiceover

Android Talkback

MacOS Voiceover Safari

Pitfalls of sticky content

Unless you have a really good reason, it’s best to avoid sticking content to the bottom (or top) of the page. While it seems like an obvious solution, without user testing in production environments you won’t know how people are really going to interact with it.

Ask the following questions first

  • Where will this appear in the actual DOM (code) order?
    • If it’s injected at the top or bottom of the content, will it be cumbersome or impossible for someone using a keyboard or screen reader to locate it?
  • Is it preferable to place this content in multiple locations on the page?
    • A “Buy now” button can appear more than once in the page.
  • Will this content be perceived as an ad and thus ignored by the customer?
    • We’ve trained people for years to ignore sticky content in their browser offering app downloads and other ads. Why is your popup sticky content any different?

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 class="sticky-wrapper">
  <div class="promo-bar sticky top">
    <button>Upgrade today</button>
    <p>Content that sticks to the top</p>
  </div>
  <div class="vertical-spacer">
    <p><a href="/checklist-web/html/">Web page content</a> 
    and <a href="/checklist-web/link/">links</a>
    or <a href="/checklist-web/button/">buttons</a>
    will be <a href="/how-to-test/">read</a>  
    in <a href="/checklist-web/html/">DOM (code) order</a>.</p>
  </div>
</div>
<div class="promo-bar">
  <button class="secondary">See more</button>
  <p>Content that is <em>not</em> sticky</p>
</div>
<div class="sticky-wrapper">
  <div class="vertical-spacer">
    <p><a href="/checklist-web/html/">Web page content</a>
    and <a href="/checklist-web/link/">links</a>
    or <a href="/checklist-web/button/">buttons</a>
    will be <a href="/how-to-test/">read</a>  
    in <a href="/checklist-web/html/">DOM (code) order</a>.</p>
  </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 and links or buttons will be read in DOM (code) order.

Content that is not sticky

Web page content and links or buttons will be read in DOM (code) order.

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
  • To ensure that controls which receive keyboard focus are not concealed by a sticky container, utilize CSS scroll-padding or scroll-margin.