Cookie banners without breaking UX

Why cookie banners cause problems

Many consent tools ship as third party scripts. They inject UI late. They add weight. They often behave like a modal without proper focus handling [2]Source 2 .

Users experience this as interference. Trust drops. Completion rates drop. Performance scores drop [3]Source 3 .

What a cookie banner must do

Consent UI works best when choices stay clear and equal. It stays readable. It stays predictable.

• Present clear choices. Accept, reject, manage.
• Explain what changes when consent is given.
• Respect the choice and store it reliably.
• Provide a route to change the choice later.

Common UX failures

• The banner covers content with no clear route forward.
• Reject sits behind extra clicks or hidden settings.
• The banner repeats after a choice.
• Layout shifts when the banner loads [4]Source 4 .
• The banner competes with your main call to action.

Accessibility requirements

Keyboard access

• All controls are reachable with Tab [1]Source 1 .
• Focus stays visible on every control [1]Source 1 .
• Banner dismissal and completion works without a mouse [1]Source 1 .
• Settings open and close without losing the user’s place [2]Source 2 .

Focus management

Some banners block the page. Some behave like a notice. Treat each pattern properly [2]Source 2 .

• If the banner blocks interaction with the page, treat it as a modal. Move focus into it and keep focus inside it [2]Source 2 .
• If the banner does not block the page, avoid stealing focus on load.
• After a choice, focus returns to a sensible place [2]Source 2 .

Clear labels

• Buttons use clear text. Accept all, reject all, manage settings.
• Settings controls are labelled clearly and grouped logically [1]Source 1 .
• Avoid vague language such as “personalised experience” without detail.

Prevent layout shift

Layout shift harms reading and triggers misclicks. Consent UI often causes it because it loads late [4]Source 4 .

• Reserve space if the banner sits within the page flow.
• If the banner overlays content, avoid pushing the page down after render.
• Avoid injecting fonts or styles that change layout after load [4]Source 4 .

Keep performance under control

A strong consent setup blocks non-essential scripts until a choice exists. This protects performance and supports privacy expectations [5]Source 5 .

• Load analytics and marketing scripts only after consent [5]Source 5 .
• Avoid heavy consent tools on small sites when tracking stays minimal.
• Audit third party scripts quarterly and remove low value tags [5]Source 5 .
• Set budgets for page weight and scripts on key journeys [6]Source 6 .

What to check on your own site

• Open the site in a private window. The banner appears once and behaves predictably.
• Use keyboard only. Completion works and focus remains visible [1]Source 1 .
• Zoom to 200%. The banner remains usable [1]Source 1 .
• Reload after choosing reject. Non-essential scripts remain blocked [5]Source 5 .
• Find the “change settings” link later. It works and returns you to the page.

A simple approach for small sites

If tracking stays minimal, keep consent UI lightweight and consistent with your site.

• Decide what you need. Analytics, then nothing else.
• Block non-essential scripts until a choice exists [5]Source 5 .
• Keep the banner readable and predictable.
• Keep a permanent “change consent” link in the footer.

Next step

Test consent UI like a user. Keyboard only, mobile, 200% zoom [1]Source 1 . Then measure the performance impact [3]Source 3 . If the banner shifts layout or adds heavy script cost, fix that first [4]Source 4 . If you need help implementing cookie consent that does not break UX or accessibility, accessibility services and performance services can help you get it right. For help with privacy policies, see privacy policies and GDPR compliance.