A NSW Government website
NSW Design System v3.24.16

Quick exit

Helps users leave a site immediately without drawing attention.

Figma

Developed with lived experience

Quick exit was built and refined in consultation with the NSW Domestic, Family and Sexual Violence Lived Experience Advisory Group (LEAG).

Usage

Use the Quick exit component on pages where a user could be at risk if someone else sees what they are viewing.

This includes content related to:

  • Family and domestic violence
  • Sexual or reproductive health
  • Mental health support
  • Other sensitive or high-risk topics

Quick exit is a safety mechanism, not a navigational tool. It should only be used when speed, discretion and predictability are essential. Adding it to pages with no clear risk dilutes the signal and may result in users ignoring it.

What Quick exit can and cannot do

Be clear with your users and your stakeholders about the limits of this component. A false sense of safety is its own harm.

Quick exit helps a user leave the current page fast. It does not erase browsing history on the device or account level, and it cannot protect against someone determined or technical. Some things sit outside what a web page can control. These include router logs, account syncing across devices, saved passwords, saved searches in the address bar, and a phone physically handed over to be checked.

For this reason, pair Quick exit with safety advice in plain language. For example, a short note linking to guidance on clearing history and using private browsing. Never write copy that implies the component keeps someone safe. It helps them leave, it does not hide where they have been.

Do

  • Use Quick exit on pages where user safety, privacy or comfort may be compromised.
  • Place it inside the global sticky container so it doesn't overlap with other components.
  • Ensure it redirects to a safe, neutral destination that loads quickly.
  • Test the component with keyboard and screen readers.

Don't

  • Show it on pages with no clear safety or privacy risk.
  • Hide it inside menus or page content.
  • Send users to content that is confusing or likely to draw attention.
  • Rely on JavaScript alone for core functionality.

Content guidelines

Exit button label

The label "Exit now" is fixed and must not be changed. A consistent label is recognised faster across NSW Government websites, which matters in a high-stress moment when a user has little time to read.

Keyboard shortcut hint

The keyboard shortcut hint is fixed and only appears when enableEsc is enabled. The copy "2 times" is deliberate. Numerals are read faster than number words across reading levels. The digit also stands out as a visual anchor that is easier to remember, and it is more reliable for people reading in a second language. This is a deliberate choice.

Do not customise the Quick exit control with service-specific messages, phone numbers or support details. Keep that information in the page content, for example in a Support list, so the control stays fast to recognise and activate.

Tone

Keep instructional copy clear, calm and factual. Avoid urgent or alarming wording, which can raise stress at the wrong time.

Anatomy

The Quick exit control is made up of:

  • Container. Sits inside the global sticky container so it stacks predictably with other sticky elements and reserves its own space on the page.
  • Action label. The fixed "Exit now" text that triggers the exit.
  • Keyboard hint. Fixed text explaining the Esc shortcut when enableEsc is enabled.
  • Icon. A visual aid reinforcing that activating the control takes the user away from the page.

Behaviour

Quick exit helps a user leave the current page fast. Activating the visible control, or the optional double-Esc shortcut, sends the user to the configured safe destination.

With JavaScript available, the component can cloak the page before navigation, update the page title, support double-Esc activation and move first-Tab focus to the control. Without JavaScript, it remains a standard link.

The page title update is fixed to \u200B. It is not exposed through data-options or window.NSW.QuickExit.init().

Customisations

Safe destination URL

Redirect users to a neutral, trusted page such as nsw.gov.au, bom.gov.au or www.google.com/webhp. Choose and customise the destination based on who your users are and how they are likely to use the service, and test it to ensure it feels safe, appropriate and low-risk in context.

Choose a redirect destination with care. People we consulted agreed that it carries significant responsibility. It is the page a user lands on at a vulnerable moment. The default is a sound starting point, but check that it suits your users. Base the choice on your users and how they use the service, and test it so it feels safe and low-risk for them.

By default, the component redirects to www.google.com/webhp. A search homepage works well as a default because it avoids assuming what a user wants to see and lets them type any innocuous query themselves.

Google was the preferred default in consultation, but it needs care:

  • The /webhp suffix keeps mobile users in the browser rather than opening the Google app, which keeps the exit predictable across devices.
  • A signed-in user's past searches can show on the Google homepage. This is a real risk for this audience, so weigh it when you decide whether Google suits your users.

Check any destination before using it, rather than assuming that a government or weather page is neutral by default. If you do not have an obvious safe URL, a plain 404 or simulating a broken page is a sound option as it reveals nothing about the agency or the topic.

Tell users where Quick exit takes them on a calm help or Frequently Asked Questions (FAQ) page, not on the control itself. Putting this text on the element adds clutter and mental load at the very moment a user needs to act fast, and it can draw attention to the control. A separate FAQ entry lets users learn what to expect in advance.

Keyboard shortcut

Enable the double-Esc shortcut with enableEsc: true. It gives users a discreet way to leave without moving the pointer or locating the control, which helps keyboard users and anyone for whom reaching for the mouse might draw attention. Keep it as an addition to the visible control, never a replacement for it. When enableEsc is false, the keyboard hint is not shown.

Implementation

Add the global sticky container

Implement the global sticky container described in the Global page structure guide. This container hosts all bottom-sticky elements, including Quick exit and Cookie consent, ensuring consistent placement and predictable stacking.

Using the global sticky container:

  1. prevents conflicts with critical header content such as global alerts
  2. allows multiple sticky elements to stack correctly as block elements
  3. ensures body padding is applied so page content is not obscured.

Render the Quick exit HTML inside the sticky container

Render the Quick exit HTML directly in your CMS or page template inside the global sticky container.

This ensures:

  • the control is available to users without JavaScript
  • screen readers can announce the control reliably
  • the link functions as a standard navigation even if scripts fail.

Use CMS- or template-level logic to control when the component appears, for example only on pages where safety or privacy risk applies.

When JavaScript is available, the Quick exit script enhances the server-rendered element with cloak mode, page title update, the keyboard hint, double-Esc activation, and first-Tab focus behaviour. Without JavaScript, the link still functions as a standard navigation to the safe URL.

Include the screen-reader announcement message

Include the screen-reader-only announcement message in your Masthead template, immediately before the Skip Link container.

This ensures the message:

  • is available to screen-reader users (even when JavaScript is disabled)
  • is announced consistently and predictably
  • does not rely on client-side injection.

When JavaScript is enabled, the Quick exit script will update this announcement message with the Esc shortcut detail only when enableEsc is enabled. This should be treated strictly as progressive enhancement, not the primary mechanism.

Do not add a separate "skip to Quick exit" link.

Load the NSW Design System JavaScript bundle

Load the NSW Design System JavaScript bundle to enable progressive enhancements, including:

  • Page cloaking on activation
  • Page title update before navigation
  • Double-Esc keyboard support
  • First-Tab focus behaviour

The server-rendered Quick exit element must exist before the JavaScript runs.

Use programmatic initialisation only as a fallback

Use window.NSW.QuickExit.init() only if your CMS cannot render the Quick exit markup server-side.

This approach:

  • Requires JavaScript to be enabled
  • Makes the control unavailable to users without JavaScript
  • Should be treated as a last resort

Server-rendered HTML remains the preferred and recommended approach for accessibility and resilience.

Accessibility

Quick exit is designed to meet Web Content Accessibility Guidelines (WCAG) 2.2 AA when implemented and configured correctly. As a safety-critical component, it must stay accessible and functional in all supported environments, including when JavaScript is unavailable.

Keyboard access

  • The control is included in the normal tab order.
  • Users can reach and activate it with standard navigation keys.
  • Focus styles are clearly visible and must not be removed or overridden.
  • No additional skip link is required or recommended.
  • The optional double-Esc shortcut is enabled by JavaScript and provides an alternative keyboard exit, but must not replace the primary control.

Screen reader support

  • Semantic HTML and Accessible Rich Internet Applications (ARIA) attributes ensure the control is announced with a clear purpose.
  • When JavaScript is enabled and enableEsc is true, instructional text explains both the on-screen action and the optional keyboard shortcut.
  • A screen-reader-only announcement message gives additional context when the component is present.
  • Render the announcement server-side where possible so it is available even without JavaScript.

JavaScript dependency

  • Quick exit must remain usable without JavaScript.
  • Without JavaScript, the control works as a standard link to the safe destination.
  • With JavaScript, enhancements such as cloak mode, the keyboard hint, double-Esc and focus behaviour improve usability but are not required for access.
  • Do not rely on JavaScript alone to render or activate the component.

Not obscuring content

The global sticky container reserves space at the bottom of the page so the control never sits on top of content a user needs. This is what allows the component to meet WCAG 2.2 success criterion 2.4.11 (Focus Not Obscured).

  • Content scrolls clear of the control, including below the footer.
  • The control stays clear of footer links on short pages.

Visual accessibility

  • The component meets WCAG 2.2 AA colour contrast requirements.
  • It supports zoom up to 400% without loss of content or function.
  • It adapts to smaller viewports and high zoom by allowing text to wrap.

Avoid overriding the component's styles or layout, as this can reduce visibility or make the control harder to use in high-stress situations.

Assistive technology testing

Always test Quick exit with:

  • keyboard-only navigation
  • screen readers on supported platforms
  • JavaScript disabled or partially blocked

This confirms the component behaves predictably and stays accessible in high-stress or constrained environments.

Related components

Implementation examples

Example 1

  • Cloaking enabled
  • Double-Esc activation enabled

Example 2

  • Cloaking disabled
  • Double-Esc activation disabled