Introduction

Infofip (previously known as "Bubble Help") is a click-activated flyout. It discloses supplementary or advisory content about an existing onscreen element or region.

Thematically, you can think of infotip content fulfilling the same role as footnotes in a page.

Infotip is a composite pattern containing a button and an overlay. The button toggles the visibility of the overlay. The overlay contains the help content.

Updated: May 9th, 2019

Working Examples

You can take a look at the infotip pattern in action on our examples site.

Terminology

We use the following terminology when discussing this pattern.

• infotip: the pattern as a whole, comprised of the following sub-parts

• button: the button that hosts the overlay

• overlay: the overlay that contains the tip

• tip: the tip content

• expanded: an infotip with expanded overlay

• collapsed: an infotip with collapsed overlay

Best Practices

Overlay must not be modal. Please consider the dialog pattern for modal behaviour.

Button must not have aria-haspopup attribute. Despite the name of this property, it is actually intended specifically for a Menu.

The infotip must remain expanded until explicitly closed by user.

Overlay should be hidden by default.

Overlay content should be no more than one or two paragraphs in length. For lengthier content, consider instead using a dialog.

Interaction Design

This section provides the pattern interaction design for keyboard, screen reader & pointing devices.

Keyboard

Button must be keyboard focus-able.

Activating button must toggle the expanded state of the overlay. Keyboard focus should remain on the button.

If overlay contains focusable elements, tab order must flow directly from button to first of those elements.

If the overlay has no focus-able elements, tab order must flow directly to next page control.

Screen Reader

Button purpose must be announced (e.g. 'Help).

Button state must be announced (i.e. expanded or collapsed).

Reading order must flow directly from button to overlay.

Overlay content must be announced after expanded.

Pointer

Invoking button must toggle the expanded state of the overlay.

Developer Guide

This implementation will get us quickly up and running with the accessibility requirements of an infotip. It is not designed with progressive enhancement in mind. If JavaScript is unavailable or fails to load for any reason, the tip content will not be available.

HTML

The goal of our content layer is to add the button and overlay. The structure and DOM positioning of these elements is of utmost importance so that keyboard tabbing order and screen reader virtual cursor both naturally flow into the overlay.

<span class="infotip" id="infotip-0">
  <button class="infotip__host" aria-controls="infotip-0-overlay" aria-expanded="false" aria-label="Help" type="button"></button>
  <span class="infotip__live-region" aria-live="off">
    <div class="infotip__overlay" id="infotip-0-overlay">
      <!-- overlay content -->
    </div>
  </span>
</span>

Notice placement of the button directly before the live-region element. This allows natural tab order flow and screen reading order from the button into the overlay.

The live-region property is set to "off". This is a matter of preference. Some people prefer the new content to announce when it appears, others prefer not. Sometimes it makes sense to announce, sometimes it doesn't.

CSS

The goal of the CSS layer is to hide or show the overlay depending on the aria-expanded state.

.infotip {
  position: relative;
}
.infotip__overlay {
  display: none;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}
.infotip__host[aria-expanded=true] ~ .infotip__live-region .infotip__overlay {
  display: block;
}

The overlay must have display: none by default. This ensures that screen readers cannot access the overlay content when in a collapsed state.

JavaScript

CSS alone cannot change the value of an aria attribute; we require JavaScript. Fortunately, the makeup-expander module can handle this behaviour for us in just a few lines of code.

const Expander = require('makeup-expander');
​
const widget = new Expander(widgetEl, {
      contentSelector: '.infotip__content',
      expandOnClick: true,
      collapseOnClick: true,
      hostSelector: '.infotip__host'
});

Clicking the button with mouse or keyboard will now toggle the aria-expanded state of the button.

Animations are also possible of course, but fall outside the scope of accessibility.

Utilites

The following JavaScript modules may assist you in creation of an infotip pattern:

• ​makeup-expander: creates the basic accessibility for an element that expands and collapses another element (e.g. a fly-out or fly-in).

ARIA Reference

aria-live

Informs assistive technology to announce the overlay contents whenever the button changes from collapsed to expanded.

role=button

Informs assistive technology that our anchor element now behaves like a button instead of a link.

aria-label

Provides a more accessible button label for assistive technology, over-riding the inner text of the anchor element.

aria-expanded

Informs assistive technology of the expanded state of the button.

FAQ

This is different to the way BootStrap 'Popovers' work. Why?

The fundamental difference is that the Bootstrap Popovers get their content from a data attribute, whereas the pattern presented here gets it's content from an actual element. This allows us to more easily place HTML such as hyperlinks & images inside of our popovers and, unlike Bootstrap, the popover content will be fully accessible without JavaScript.

Changelog

• May 9th: Removed progressive enhancement example

• March 5th 2019: Renamed from Bubble Help to Infotip

​

​

​