Publish Hide this page component

[trang-erskine]

What

Hide this page component (aka quick exit) was contributed to the Design System in 2020. https://github.com/alphagov/govuk-design-system-backlog/issues/213

Why

This component and/or pattern can be used by services to help users in vulnerable situations.

Who needs to know about this

Designer, Developers, Content Designer, Technical Writer, Product Manager, Accessibility Specialist

Acceptance Criteria

• [x] Has been reviewed by the working group, usable, consistent and versatile https://github.com/alphagov/govuk-design-system-backlog/issues/213#issuecomment-760155754
• [x] Works with keyboard only navigation https://github.com/alphagov/govuk-design-system/issues/2116
• [ ] Works with all screen readers we support (VoiceOver, NVDA, JAWS)
• [ ] Works with screen magnification, browser zoom and browser text zoom
• [ ] Works with JavaScript disabled
• [ ] Works with css disabled
• [ ] Works with voice control or tag as a known issue
• [ ] Behaves as expected in all browsers listed in the Service Manual - plus IE8
• [ ] We've written the accompanying guidance https://github.com/alphagov/govuk-design-system/issues/2067

Tasks

• [x] Initial scoping of Hide this Page contribution https://github.com/alphagov/govuk-design-system/issues/1604
• [x] Investigate button positioning https://github.com/alphagov/govuk-design-system/issues/2117
• [x] 1 week spike on Hide this Page https://github.com/alphagov/govuk-design-system-backlog/issues/213#issuecomment-1043203725
• [x] Chat to Designer on Women's Aid (Rose, now at GDS)
• [x] Reach out to 'Hide this Page' steering group to see if we can do research with them or their services, or past research they can share with us
• [x] Understand what accessibility research has already been done on the component, and if necessary plan further research https://github.com/alphagov/govuk-design-system/issues/2085
• [x] Revisit DAC audit of GOV.UK version of this
• [ ] Prepare and run usability testing sessions with people who have accessibility needs and with people who have relevant lived experience
• [ ] Review and compile testing notes and synthesise recommended changes
• [ ] Make edits to the Hide this Page component based on the research findings
• [ ] Write the accompanying Hide this Page component guidance
• [ ] Inform the working group of the final decisions and have them check out work
• [ ] Publish the component 🎉

Related Issues

• [ ] Work with contributions to use Hide the Page as an example of contribution journey https://github.com/alphagov/govuk-design-system/issues/2057
• [x] https://github.com/alphagov/govuk-design-system/issues/2144
• [x] Initial scoping https://github.com/alphagov/govuk-design-system/issues/1604
• [ ] Usability testing research https://github.com/alphagov/govuk-design-system/issues/2085
• [ ] Using the Hide this Page process as an example of the contribution journey https://github.com/alphagov/govuk-design-system/issues/2057

[kellylee-gds]

Previous body of issue:

What

Hide this page component (aka quick exit) was contributed to the Design System in 2020. https://github.com/alphagov/govuk-design-system-backlog/issues/213

Why

This component and/or pattern can be used by services to help users in vulnerable situations.

Who needs to know about this

Designer, Developers, Content Designer, Technical Writer, Product Manager

Done when

• [ ] Initial scoping of Hide this Page contribution https://github.com/alphagov/govuk-design-system/issues/1604

[owenatgov]

Proposed solutions (Feb 10)

As of February 10th, we have a fairly functional on-screen hide this page component for sighted users. It sits fixed at the bottom of the page on mobile and at the top-right of the page on desktop. It is styled as a warning button, complete with a red background.

The final decision for the on-screen functionality is the placement of the component, relative to the page body and header.

Our proposed solution as of Feb 10th:

Split the component into two portions: a screen reader element and an on-screen element. The screen reader element would be styled and built similar to a skip link.

Proposed specifications:

• It could be placed directly after the skip link in the HTML
• It could use either the skip link yellow colour or the warning red colour (to match the hide this page on-screen element
• It could show up visually on-focus (via tabbing) just like a skip link
• It could be navigated to easily via screen reader, by returning to the top of the page and then tabbing twice

The on-screen element would be styled the same as we’ve previously proposed, but could now feasibly be positioned anywhere in the page’s HTML

Proposed specifications:

It could be positioned vertically to be in-line with the page title initially, and then become fixed at the top of the viewport once the page is scrolled past the title (more testing needed).

We will also be exploring a keyboard shortcut for desktop users, specifically keyboard navigation and screen reader users, to potentially minimise time needed to reach the button. This will require research and testing as we need to consider users with motor issues, different keyboards across multiple locales and existing keyboard shortcuts we could be interfering with.

This proposal will require further investigation. It would help us to create a tailored experience for people navigating visually and people navigating via screen reader or keyboard.

[jbuller]

What thoughts have been given to a discrete way to activate the button using voice only?

[owenatgov]

Hey @jbuller

Thanks for the prompt. This is an important group to consider. We discussed this scenario briefly during the kick off phase of this work, however we have yet to come across a satisfactorily useful solution for users navigating via voice control. Since we don’t have a suitable solution at the moment, we don’t have anything for it in the above update.

It's worth noting that voice control users (in this case using Dragon Naturally Speaking as our stand-in tech) have a number of ways to access the button other than saying "click hide this page" out loud:

• They could navigate the mouse over the hide this page element using mouse commands and then say “Mouse click”
• They could use “show links to list the links, navigate to the proper link, then say “click link”
• They could use the mouse grid system to zone in on the button and say "click link"

We're conscious that the above aren't the best or most efficient experience. We are open to ideas and suggestions at this stage, if you or anyone else has experience in developing discreet commands for voice control navigation.

[owenatgov]

WIP govuk frontend branch: https://github.com/alphagov/govuk-frontend/tree/hide-this-page-component

WIP design system branch: https://github.com/alphagov/govuk-design-system/tree/hide-this-page-component

[jbuller]

All those voice commands either take quite a bit of time or require saying "Hide" out loud. Previously I suggested also providing a secondary innocuous command.

Nevertheless whatever you publish now will be a great step forward and of course further development can then be done.

[christopherthomasdesign]

Chatted with the designer who worked on a hide this page component for Women's Aid. It was a long time ago and they were only partly on the project so couldn't remember loads, but a couple of interesting bits:

we didn’t test with assistive tech. We were focussed on mobile due to the user group we were working with and one thing we found in UR was that the exit button became basically redundant because people have much faster ways of closing pages/apps when on mobile (like the physical buttons on the phone)

A very fair point, though I don't think this amounts to anything like an argument against showing the button on mobile.

One interesting thing the tech person implemented was that the button left the site on the original tab but also opened a new tab and went directly to that tab, this meant that someone could not hit back on the browser because it was a fresh tab.

Which sounds very similar to what we're proposing!

[owenatgov]

Hide this page component proposal - 14/03/2022

The current proposal is pending the gathering of existing research from contributors as well as a round of usability and accessibility user testing.

You can see a current draft implementation of the component here (from https://github.com/alphagov/govuk-design-system/pull/2079).

Current guidance plan

We're gonna request that teams set up 2 buttons on the page, one as a hidden "skip link" variant underneath the actual skip link on the page and one one the page itself, positioned under the main and visually on the right of the content (on mobile this would float at the bottom of the viewport above everything else). We're additionally going to request folks add guidance to the page saying something along the lines of "this page includes a hide this page button. You can use it by clicking xyz or using the xyz keyboard shortcut etc etc".

The reason we've got 2 is for keyboard and screen reader users so they can more easily reach a button from anywhere in the markup they are. The guidance is so that we're communicating to the user that the button is on the page and how it works without making the button obvious to observers, an indication of the trade off between observer and user visibility (figurative term) which has been central to the development of this component.

Current component flow for users

• When a user presses the button, a new tab will be opened, currently preset to BBC weather and the previous tab will change to a different URL, currently preset to google.com
• If a user checks their history, the "risk" page will have a different title, currently preset to a covid title
• If the user goes to the previous tab (google) and clicks back, they can return to the page they were trying to hide/escape and continue their journey

Outliers

• A keyboard shortcut has yet to be implemented. We will be discussing this with key contributors before continuing investigation and potentially putting this to user research.
• We have yet to write a draft for what content we want the user to see explaining how hide this page works.
• We haven't investigated in detail the defaults for the escape pages (current BBC weather and the google homepage) and the fake page title placed in the browser history (currently the govuk coronavirus landing page title).

[kellylee-gds]

Shipped on 6 July 2023. Next epic alphagov/govuk-design-system#2950