Pockets

Introduction

The Pocket component contains the page's main content in a truncated form. The purpose of this is to not overwhelm the user with content upon first arriving at the page. With the content shortened it is easier to see (and reach by keyboard or screen reader-based navigation) the functionality at the foot of the page.

A 'Show more' button at the foot of the Pocket allows the reader to unveil the obscured content. Importantly, when the unveiling takes place, a cue to continue reading is inserted between the last item of initial/preview content and the first of the unveiled content. This ensures the user does not lose their place.

Note that, although the patterns are similar, the Pocket differs from the Load more pattern in that it simply obscures content, rather than deferring the loading of content. The Pocket should be implemented without reliance on XHR.

Recommended markup

The markup is quite simple, since the Reference implementation uses progressive enhancement, and only adds the button functionality where JavaScript runs. Just two nested wrapping elements are needed.

<div class="gel-pocket">
  <div class="gel-pocket__truncated">
    <!-- content here -->
  </div>
</div>

<main id="main" tabindex="-1">
  <div class="gel-pocket">
    <div class="gel-pocket__truncated">
      <!-- content here -->
    </div>
  </div>
</main>

Recommended layout

The class="gel-pocket__truncated" needs to adopt a reasonable fixed height on initialization. Something set in viewport units^[2] is recommended since they pertain to a proportion of the viewport and would befit a viewport of any physical height: 50vh is 50% of the height of any screen. This value is set as one of the parameters of the Reference implementation's constructor.

The same element must, of course, take overflow-y: hidden for the truncation to work.

.gel-pocket__truncated {
  overflow-y: hidden;
}

The 'foot' of the Pocket element contains the 'Show more' button, centrally justified. It has no height and appears as a single line, with the button placed centrally over it on the vertical axis, using a transform.

.gel-pocket__foot button {
  transform: translateY(-50%);
}

When the Pocket is in its unveiled/showing state, the button's text changes to 'Show less' (see Recommended behaviour, below) and a class of gel-pocket--foot-shown is applied, enabling a margin-top style to separate the transformed button from the now unveiled content.

.gel-pocket__foot.gel-pocket--foot-shown {
  margin-top: double($gel-spacing-unit);
}

When the "Continue below..." element is focused, it draws attention by showing a brief outline animation:

@keyframes focus {
  0%{
    outline-width: 0px;
  }
  50% {
    outline-width: 2px;
  }
  100% {
    outline-width: 0px; 
  }
}

.gel-pocket__continue:focus {
  outline-style: solid;
  outline-width: 0px;
  outline-offset: 2px;
  animation: focus 1s linear 1;
}

High contrast

How the component looks with a Windows High Contrast Mode theme active.

Recommended behaviour

The Pocket is treated as a progressive enhancement. It does not initialize at all if JavaScript does not run or IntersectionObserver is not supported. Support for IntersectionObserver is covered by Chrome, Edge, Firefox, Opera, and various Android browsers at the time of writing^[3]. Browsers that do not enhance to a Pocket simply show the content in its expanded form.

The purpose of the IntersectionObserver is to apply (polyfilled) inert^[4] status to all the visually obscured children within the class="gel-pocket__truncated" element.

if (!item.isIntersecting) {
  // Add the inert attr if the element is cut off
  // or invisible
  item.target.setAttribute('inert', 'inert');
} else {
  // Remove inert from all elements when the
  // truncated element's height becomes 'auto'
  item.target.removeAttribute('inert');
}

Since inert hides items from assistive technologies like screen readers and makes them unfocusable by keyboard, IntersectionObserver creates a parity between the experience of sighted mouse users and other kinds of user. The content is hidden accessibly, until unveiled, and the 'Show more' button is the first tab stop after the last of the items above it.

Switching state

When the 'Show more' button is pressed, the content is expanded. A "Continue reading..." element is injected between the last of the preview/initial content and the first of the unveiled content. This element is focused, meaning keyboard dependent users are relocated to the correct position in the content to continue reading. The Reference implementation lets you choose your own text to override "Continued below..." if so desired.

self.constructor.prototype.showMore = function () {
  this.shown = true;
  this.next = this.truncated.querySelector('[inert]').previousElementSibling;
  this.truncated.style.height = 'auto';
  this.truncated.insertBefore(this.continue, this.next);
  this.continue.focus();
  this.button.textContent = 'Show less';
}

In this state, the 'Show more' button now reads 'Show less', and pressing it switches the Pocket back into its initial truncated state. In this case, focus is not moved anywhere. It remains on the button. The screen reader user can browse back into just the preview content from this point, or continue down into the footer.

Reference implementation

Open in new window

Related research

This topic does not yet have any related research available.

Further reading, elsewhere on the Web

---

1. WCAG 2.1 2.4.1 Bypass Blocks, https://www.w3.org/TR/WCAG21/#bypass-blocks ↩︎

2. CSS Viewport Units: A Quick Start — Sitepoint, https://www.sitepoint.com/css-viewport-units-quick-start/ ↩︎

3. IntersectionObserver support table — caniuse.com, https://caniuse.com/#feat=intersectionobserver ↩︎

4. inert polyfill — WICG, https://github.com/WICG/inert ↩︎