Articles on: Consentik Cookies

Consentik - Web Accessibility Widget

Web Accessibility — let shoppers adjust how your store displays



What it does


Adds a small floating button to your storefront. A shopper who taps it gets a panel of adjustments they can apply to your store themselves — bigger text, stronger contrast, no animation, a reading mask, and more.


Nothing is applied to anyone until they ask for it. A shopper who never opens the panel sees your store exactly as you designed it.


Their choices stick as they move around your store, and are still there when they come back.


What it does not do


It does not make your store WCAG conformant, and it is not a legal shield.


This is a tool your shoppers operate. It does not scan your store, fix your images' alt text, rewrite your headings, or certify anything. A store with real accessibility problems still has them with the widget switched on.


Treat it as one helpful thing among several, not as "accessibility, done". If you need conformance, that is design and development work on the store itself.


Who can use it


Web Accessibility is part of the paid plans. Open Plans in your Consentik admin to see which plan includes it.


On a plan without it you can still open the page and look around — every setting is visible but read-only, so you can see exactly what you would be getting before you decide.


Turning it on — both steps


There are two switches, and the widget only appears when both are on. This is the single most common reason a merchant sees nothing on their storefront.


1. Switch it on in Consentik


  1. Open Web Accessibility in your Consentik admin.
  2. Switch on Enable the accessibility widget.
  3. Click Save.


2. Switch on the app embed in your theme


If this step is still needed, the page shows a banner at the top with a button that takes you straight there. Otherwise:


  1. In Shopify admin, go to Online Store → Themes → Customise.
  2. Open App embeds in the left sidebar.
  3. Switch on Consentik Accessibility.
  4. Click Save.


The banner disappears once the embed is on. If you switch it on in another tab, come back to the Consentik tab and the banner clears itself.


The widget appears on your online store pages. It does not appear on checkout or customer account pages.




Choosing which tools shoppers get


The Features tab controls what appears inside the panel. Everything is on by default, which is the right starting point for most stores — a shopper only sees what they go looking for.


Profiles are one-tap starting points for a shopper who knows the difficulty they have but not which tool fixes it:


Profile

Switches on

Motor impairments

Big cursor, highlight links, reduce motion

Low vision

Bigger text, high contrast, highlight links, big cursor

Dyslexia

Dyslexia-friendly font, text spacing, reading mask, bigger text

Cognitive & attention

Reading mask, text spacing, hide images, reduce motion

Colour blindness

Colour-blind friendly, low saturation, highlight links

Epilepsy safe

Reduce motion, grayscale, low saturation


Tools are the individual adjustments, in four groups:


  • Vision — high contrast, grayscale, low saturation, colour-blind friendly, invert colours, hide images
  • Reading — bigger text, line spacing, text spacing, text alignment, dyslexia-friendly font, reading mask, read aloud
  • Motion — reduce motion
  • Navigation — highlight links, big cursor, page structure


Four of them have three levels rather than just on and off: bigger text, line spacing, text spacing and text alignment. A shopper taps again to go up a level, and once more to turn it off.


Switching a tool off here removes it from the panel entirely. Shoppers never see it.



Making it match your store


The Design tab covers how the button and panel look.


Button icon — six to choose from. The one you pick is what shoppers see on the floating button and at the top of the panel.


Where the button sits — pick a corner on the little page diagram. If your cookie banner's re-open button uses the same corner, the accessibility button moves out of its way automatically; you do not need to plan around it.


Colours — four of them: your accent, the text on that accent, the panel text, and the panel background.


Readability check — under the colours, three contrast ratios with a pass or fail badge:


Pair

Needs at least

Panel text on panel background

4.5

Text on the accent colour

4.5

Accent on panel background

3


A failing pair does not stop you saving — your brand is your call. But it is worth reading twice on this feature in particular: the shoppers who open this panel are the least likely to be able to read it at low contrast.




Language


The widget speaks eleven languages. Default language decides which one it opens in:


  • Auto follows your storefront's language, so a shopper browsing your French storefront gets the panel in French.
  • Picking a language yourself overrides that, which is what you want on a single-language store.


Let shoppers change the language adds a language picker inside the panel. A shopper's choice is remembered for their next visit and overrides your default for them.



If you have an accessibility statement page, switch on Show accessibility statement and give its address — either a path on your store like /pages/accessibility, or a full https:// address. A link appears at the bottom of the panel.


The switch does nothing without an address, so the field is required once it is on.


"Powered by"


A small credit at the bottom of the panel. Text and a mark only.


Show only for store staff


Useful while you are setting up. With this on, the widget appears for you and your staff but not for shoppers, so you can check it on your live theme before opening it to everyone.


Remember to switch it off. It is the second most common reason a merchant sees the widget and their shoppers do not.


Hide on mobile


Off by default. Worth turning on only if you already have another floating button in that corner on small screens — phone users are among the most likely to want these tools.


Follow device accessibility settings


On by default. If a shopper's phone or computer already asks for reduced motion or more contrast, the widget turns those on for them straight away, and says so at the top of the panel so nobody is confused about why something changed.


Custom CSS


For fine adjustments to the widget's own appearance. It applies to the widget only — it cannot change your theme, and your theme cannot change it.


What shoppers see, and what is stored


A shopper's choices are kept in their own browser. They are never sent to us or to you, and they are never used for tracking.


Because these are accessibility preferences rather than marketing ones, they are kept even for a shopper who declines cookies — someone who needs bigger text to read your store should not lose it for saying no to tracking. Only the tools they chose and the language they picked are stored.


Reset all settings at the bottom of the panel clears the tools. It deliberately keeps their chosen language, since they picked it to be able to read the panel at all.


If something is not working


The widget does not appear on my storefront


In order of likelihood:


  1. The app embed is off in your theme — see step 2 of Turning it on.
  2. Show only for store staff is still on.
  3. Hide on mobile is on and you are looking on a phone.
  4. Your plan does not include the feature yet.
  5. You are looking at checkout or a customer account page, where it does not run.


Some text on my store does not change


Most content responds to the tools. Content drawn by other apps — a chat bubble, a reviews block — sometimes carries its own fixed styling that cannot be overridden from outside. Text size in particular can be pinned by an app in a way nothing external can move.


Read aloud does nothing


It uses the voice built into the shopper's own device. A device with no voice installed cannot speak, and the panel says so rather than failing silently. On phones, the first tap has to come from the shopper — browsers do not allow speech to start on its own.


The panel colours look wrong


Check the Readability check on the Design tab. A pair below its number usually explains it.

Updated on: 24/08/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!