Exit This Page

Use the Exit This Page component to let users quickly leave a service and go to a neutral website. This is essential for services dealing with sensitive topics like domestic abuse.

When to Use

• Services about domestic abuse or violence
• Services about sensitive personal matters
• Any service where users might need to hide their activity quickly

Default Exit This Page Button

The button appears in a fixed position, typically at the top right of the page.

<div class="exit-this-page">
  <a href="https://www.google.com" class="exit-this-page-button" rel="noopener noreferrer">
    <span class="exit-this-page-icon" aria-hidden="true">&times;</span>
    <span class="exit-this-page-text">Exit this page</span>
  </a>
</div>

With Keyboard Shortcut

Add a keyboard shortcut (pressing Escape 3 times quickly) for users who cannot easily reach the button.

<div class="exit-this-page">
  <a href="https://www.google.com" class="exit-this-page-button" rel="noopener noreferrer">
    <span class="exit-this-page-icon" aria-hidden="true">&times;</span>
    <span class="exit-this-page-text">Exit this page</span>
  </a>
  <p class="exit-this-page-shortcut">Or press <kbd>Esc</kbd> key 3 times</p>
</div>

JavaScript Implementation

// Exit This Page - Triple Escape key shortcut
(function() {
  let escapeCount = 0;
  let escapeTimer;
  const exitUrl = 'https://www.google.com';

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      escapeCount++;

      clearTimeout(escapeTimer);
      escapeTimer = setTimeout(function() {
        escapeCount = 0;
      }, 1000); // Reset after 1 second

      if (escapeCount >= 3) {
        // Replace current history entry and redirect
        window.location.replace(exitUrl);
      }
    }
  });
})();

Behaviour

• Clicking the button immediately redirects to a neutral website (e.g., Google)
• Use window.location.replace() to avoid the service appearing in browser history
• The keyboard shortcut should also replace history
• Consider also clearing any stored form data

Positioning

.exit-this-page {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 100;
}

Accessibility

• The button must be clearly visible and easy to click
• Ensure sufficient colour contrast
• The keyboard shortcut provides an alternative for users who cannot use a mouse
• Consider users who may be in a hurry or under stress

Related Patterns

• Exit a page quickly pattern