Cookie Banner

Test cookie banner link

Header Content

Main Content

Test link to a paragraph in the footer.

Notes

  1. There is a CSS-only version of this technique that uses the new :has selector. That selector currently (October 2022) isn't supported by Firefox, so this version uses JavaScript instead.
  2. This also uses the HTML dialog element, with that being opened using the show() function, which makes it non-modal. The HTML living standard describes a dialog element like this: The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window. A cookie banner feels like a suitable use case for this. There is a bonus to using this element: most modern browsers automatically focus manage dialog elements when they open.
  3. When the cookie banner is visible, bottom margin is added to the page's body element. CSS scroll-margin is then used to force the focused content into view.
  4. When the cookie banner is closed, the margin and scroll padding are removed.
  5. This supports the Reflow Criterion: the cookie panel becomes un-fixed when the screen is zoomed in (thanks to my colleague, and ARIA Working Group member, Adam Page for help with this).
  6. Interesting discovery: if you use a class of .cookie-banner in your HTML, CodePen won't display that; you'll need to use a different class name.