• Success Criterion 3.2.6
  • Conformance level A

Chat Widget That Changes Screen Position Between Pages

3.2.6 — Consistent Help

Scenario

Setting

A streaming music app's search results

What’s wrong

Chat widget bottom-right on most pages, bottom-left/hidden on checkout.

Example 

<!-- Search results page -->
<div class="chat-widget" style="position:fixed;right:16px;bottom:16px;">Chat</div>

<!-- Checkout page -->
<div class="chat-widget" style="position:fixed;left:16px;bottom:16px;display:none;">Chat</div>

Why it matters

A subscriber who relies on the bottom-right chat bubble for support finds it missing entirely at checkout, right when a billing question is most likely to come up.

How to test

Compare the chat widget's position across pages: bottom-right on most pages but bottom-left or hidden on checkout fails.

How to fix

Keep the same help mechanism visible in the same screen position across every page, including checkout.

<!-- Same position and visibility on checkout as everywhere else -->
<div class="chat-widget" style="position:fixed;right:16px;bottom:16px;">Chat</div>

Outcome

A subscriber with a billing question finds the same chat bubble at checkout that helped them earlier.

Who is affected

Users with cognitive disabilities and screen magnifier users who've located the chat bubble in one spot can't find it relocated, or hidden, on a page where they need it.

Learn more

Related scenarios