Deep link my accessibility pop up

Store Design
1

Hi, I have a third party Shopify app add-in “AccessiBe” for accessibility compliance. It has a pop up widget that shows up on the bottom right of the site. Some customers have complained it is getting in their way when they add to cart, so I’m wondering if it’s possible for the widget to only pop up when a link in the footer is clicked, or some other way that would look nicer and be less intrusive. Thanks!

2

This is a common complaint with AccessiBe! Good news, they actually have a built in option for this.

In your AccessiBe dashboard go to Widget Customization and look for the “Hide the widget button” option. When enabled it hides the floating button completely and you can then trigger it manually, and there’re codes for this, if you feel comfortable with coding and it’s technicalities i can send it in, but try the first workaround.

3

Thanks! Would be great to know what you’ve implemented to trigger it manually.

4

Did you try the first approach though?

5

Yes, I’m able to hide it, but I can’t hide it unless I’ve got the ability to trigger it manually, for compliance purposes.

6

It can be done with some JS.

You need to:

  1. Create a link (say in the menu or elsewhere on the page) and point it to #show-widget.
    It would render to, say <a href=#show-widget>Control Accessibility</a>;
  2. Add a “Custom liquid” section in your footer group and paste this code:
<script>
document.addEventListener('click', (ev) => {
  
  if (ev.target?.href?.includes('#show-widget')) {
    ev.preventDefault();
    document.querySelectorAll('access-widget-ui').forEach(e=>{
      let button = e?.shadowRoot.querySelector('.trigger-button');
      if (button) button.dispatchEvent(new Event('click'));
    })
  }
})
</script>
  1. Switch your Accessibility app to hide button;

When visitors click your link “Control Accessibility”, this code will run, find and click the hidden widget button forcing widget to open.

If you have any troubles with the code do not forget to share a (preview?) link to your store.

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
7

Thank you so much! That worked perfectly.

8

Glad the deep link worked. One thing worth flagging for anyone landing here from a demand letter: a toolbar like that changes what a visitor can toggle, but it is not something a lawyer can attach to a response. If you ever get a letter, what actually helps is (1) getting your own counsel involved early rather than replying yourself, and (2) having a dated snapshot of the public store — the specific pages, the specific failures (keyboard traps, focus not visible, contrast, missing labels/alt text, form fields without labels), and dates you fixed each one. Automated scans and toolbars are a starting point, not evidence of anything. Fix the underlying theme markup and content so the store works with the widget turned off — keyboard-only pass through home, collection, product, cart, checkout is the fastest reality check.