Hide this page

Sample HTML

Show this section

<div class="ds_hide-page">
 <a href="http://bbc.co.uk/weather" class="ds_hide-page__button  ds_button  js-hide-page"><strong>Hide this page</strong> <span class="visually-hidden  js-enabled-text">Or press escape key to hide this page</span></a>
 <p class="ds_hide-page__text  js-enabled-text">(Or press Esc key)</p>
</div>

About this component

The hide this page component is a prominent button that closes the open service or website. Using the button hides some evidence that a user visited the page.

This can help victims of domestic abuse or other vulnerable users to look at sensitive content in safety. Abusers may try to keep tabs on what their victims do on a personal or shared device.

We designed our hide this page component so that:

• it is clearly visible on the content page at all times
• the red colour shows its importance and makes it easy to find in an emergency situation
• the button text “Hide this page” states what the component does in plain English

When a user clicks on the hide this page button, it:

1. changes the current tab to the Google homepage
2. removes the previous page visit from the browser history
3. opens the BBC Weather website in a new active tab

It does not remove every visit to a sensitive page from the browser history. It only removes the page on which the user clicks the button.

When to use this component

Use the component on pages where:

• viewing that service or content could put someone in danger or at risk of harm
• the information is sensitive and says something about a potential victim’s plans

For example, when a potential victim uses a service about leaving a domestic abuser.

You can use the component on either:

• pages covering a whole service
• parts of the journey where the information is sensitive and could alert an abuser

When not to use this component

Do not use this component if the service or content is unlikely to put a user at risk.

Evidence

This component has been through several iterations on mygov.scot.

Research and testing

We collaborated on the design, placement and language for this component with the:

• Ministry of Justice (MoJ)
• Department for Work and Pensions (DWP)

A previous version of this component took users to the website's homepage. User testing of that version in 2015 showed that users preferred the button to either:

• close down the site completely
• take them to a neutral site (such as Google)

We did desk-based research in 2020 by reviewing other websites with similar functionality. For example, we looked at charity organisations such as:

• Women’s Aid
• Refuge

This helped us confirm the findings from the 2015 usability testing.

Performance data

Domestic abuse content received increased traffic due to COVID-19 (1 April-30 June 2020). More than one in ten domestic abuse content users clicked the ‘Hide this page’ button in this period. Mobile users clicked the button more often than desktop users.

In 2017, we used a tool called ‘Mouseflow’ that allowed us to view sessions anonymously. We watched user sessions to find out if users clicked the button on purpose or by accident. During several sessions users moved the cursor at speed to the button. We took this behaviour to show deliberate action.

We plan to test with more users and to focus on behaviour and language of the button-supporting text.

Website analytics

You can track hide this page link clicks through the original page path and a data attribute describing the action.

The Design System’s ‘tracking’ script adds this data attribute.

Accessibility

Users can trigger the 'hide this page' action using the escape key. Research suggested speed is critical to keep users safe and avoid potential harm. It may be quicker for some users to press a keyboard button, like the escape key, than to move the mouse pointer.

Every page with the component should have a hidden instruction for screen readers. To do this, you should add the following code above the ‘Skip to main’ content element.

<div class="visually-hidden  ds_hide-page">
  <p>
    To leave the page quickly, press the escape key.
  </p>
</div>

When a user is using assistive technology, the code announces either or both:

• the presence of the ‘Hide this page’ button
• the use of the ESC key

Implementation

You should place the 'hide this page' button inside your main layout container. This will position the button in the right location on your page.

Add the class ds_has-hide-page to the body element. Small screens need this for correct placement of the button.

Browsers with support for CSS grid will anchored the button to the upper right of the layout. The CSS property position: sticky keeps it in view.