Cookie banners and chat widgets that cover your menu

Key takeaways

Cookie banners, chat widgets, WhatsApp buttons and sticky bars can cover the menu, buttons and links visitors need, especially on phones. WCAG 2.2 success criterion 2.4.11 says a focused element must not be entirely hidden by content the site adds. Keep banners compact, stack floating buttons neatly and make sure nothing covers the header or main action.

• Overlays can hide the menu, buttons and form fields on phones.
• WCAG 2.2 says focused items must not be fully hidden.
• Keep cookie banners compact and easy to answer.
• Use one floating button, not three.

How do overlays hide navigation?

On a phone, a cookie banner can fill a third of the screen, a chat bubble can sit over the main button and a sticky bar can cover the last links on the page. Visitors either dismiss them, which some do not know how to do, or try to work around them. Keyboard users can tab to links hidden under them.

• How clear website navigation improves user experience
• Sticky call-to-action bars on mobile: when they work

What does WCAG 2.2 say?

WCAG 2.2 success criterion 2.4.11, Focus Not Obscured (Minimum), at level AA, says when an element receives keyboard focus it must not be entirely hidden by author-created content such as sticky headers, footers or non-modal dialogs. Cookie banners that stay open while visitors tab through the page are a common cause.

• Accessible navigation: clearer for every visitor

How should cookie banners be designed?

Keep the banner compact, offer clear accept and reject choices with equal prominence, as the ICO's cookie guidance expects for consent, and do not let it cover the main menu. If it must stay open, make sure visitors can still reach navigation and that focus is not hidden behind it.

• Cookie banners and UK law

How should floating buttons be arranged?

Choose one floating button for the most important action, such as WhatsApp or chat, and keep it small and in a corner that does not cover the main button or form. If you need two, stack them neatly and check them on a small phone. Hide them while the mobile menu is open.

• One floating button where possible.
• Bottom corner, clear of main buttons.
• Hidden while the mobile menu is open.
• Not covering form fields or submit buttons.
• Checked on the smallest common phone size.

• Can an AI chatbot replace your website navigation?

How do you test for it?

Load the site on a small phone in a private window, so the cookie banner appears, and try to use the menu and main action before answering it. Then tab through the page with a keyboard on desktop and watch for any focused item that disappears under a fixed element.

What does this look like in practice?

A pattern we see: on a phone, a site's cookie banner covers the bottom third, the chat bubble sits over the 'Get a quote' button and the WhatsApp button sits on the chat bubble. Shrinking the banner and keeping one floating button clears the main action.

• See client work
• Website Design & Development for UK businesses

Overlay checklist

• Compact cookie banner with equal choices.
• Menu reachable while the banner is open.
• One floating button.
• Nothing covering the main action or forms.
• Focused items never fully hidden.
• Tested on a small phone.

• Announcement bars: useful notice or navigation clutter?
• Navigation at 200% zoom: menus for visitors who enlarge text

Next step

Open your site in a private window on a phone and try to tap the main button before closing anything.