Micaela Avigliano

Mobile navigation

Design System

Design System

Hotspot

Content

Overview

Markers over an image that open a card about the thing they point at. There are two variants: the expanded card is a link that contains only a short name and description and leads the user to the product details page and a non-modal dialog that holds information organized in a more structured and complex way.

Live example

Usage

Link variant

The card is just one <a>. The marker is a button.

Dialog variant

The card is a non-modal dialog opened by a press and it would need a focus management. The marker is a button and the card is a dialog tag.

Both variants

  • A card is a popover tied to its marker by anchor positioning. It goes below the marker in the upper half of the image and above it in the lower half, or on the other side when that has more room.
  • It is at most as tall as the room on its side, less its margins, and scrolls inside when it needs more, so it never covers the marker.
  • Position is a percent of the image, to the centre of the marker. prefers-reduced-motion stops the pulse. With six or more markers, add a "View all" link below the image.

Accessibility

Link variant

Keyboard interaction

  • Tab moves from marker to marker. A marker that takes focus opens its card by itself (WCAG 1.4.13), and focus stays on the marker.
  • Tab again moves focus into the card's link while the card stays open. Shift+Tab goes back to the marker, and the card is still open.
  • Tab from the link closes the card and goes on to the next marker, which opens its own card. Only one card is open at a time.
  • Enter or Space on the marker never closes an open card. Enter on the link redirects the user to a different location.
  • Escape closes the card from the marker or from inside it and returns focus to the marker. The card stays closed until the pointer or the focus comes back, or the user interacts with it again by pressing Enter or Space.

Screen reader interaction

  • The list of markers is announced with its name and its count ("Pages in this image"), because it is a ul with an aria-label.
  • On a marker: "Expand to read more about Blog, button, expanded". The name says that pressing it shows more, and the browser adds expanded or collapsed itself from popovertarget.
  • In the card: "Blog, Posts on accessible components, Read more, link".

Pointer or touch interaction

  • Hovering a marker opens its card. Leaving closes it after 150ms, a wait the pointer can cross, so the card can be hovered.
  • On touch a tap on the marker opens the card, a tap on another marker switches to that card, a tap on the card follows the link and a tap outside closes it.

Semantic structure

  • The markers are in the lis of a ul named for what it holds ("Products in this image").
  • The marker is a button named by triggerLabel, with popovertarget pointing at the card and popovertargetaction="show".
  • The card is an a with popover="auto", so the whole card is the link. The browser gives it the top layer, light dismiss, Escape and the return of focus.
  • It holds three p: the name, the description and a last line ("Read more") that says what following the link gives.

Dialog variant

Keyboard interaction

  • Enter or Space on a marker opens its card, and focus moves to the card's heading.
  • Tab goes to the close button, then to the link if there is one. Shift+Tab goes to the previous interactive element. If it is the first interactive element, it goes to the marker because since it is not a modal dialog element there is no need to have a focus trap.
  • Tab if there is one, the focus goes to the next interactive eleent inside the non-modal dialog. If not, the focus leaves the card and goes to the next marker in the ul
  • Escape closes the card from anywhere inside it and returns focus to the marker. The close button does the same with Enter or Space.
  • Opening one card closes the other.

Screen reader interaction

  • On a marker: "View details for Design System, button, collapsed", and expanded once the card is open.
  • On opening, focus is on the heading so it is going to be announced by the screen reader. The card is named by that heading (aria-labelledby), so it is announced as a dialog called "Design System".
  • Then, in reading order: the detail line, the close button, the paragraph, the list with its count, and the link by its name ("Go to Design System"). The close button is named "Close".

Pointer or touch interaction

  • A press or a tap on the marker toggles the card, and a press or a tap outside closes it (light dismiss).
  • A tall card scrolls inside its own height, so it never covers the marker.

Semantic structure

  • The markers are in the lis of a ul named for what it holds. Each marker is a button named by triggerLabel, with popovertarget pointing at the card.
  • The card is a dialog with popover="auto", named by its heading. The browser handles the top layer, light dismiss, Escape, the return of focus and the expanded state of the marker. The close button is popovertarget with popovertargetaction="hide", so it needs no script.
  • Inside it is a section that holds a header (the heading and the detail on one side, the close button on the other, laid out with flex so nothing is positioned by hand), then the paragraph, the list and an optional link.
  • The heading is tabindex="-1" and takes the focus on open using javascript.

Related

This section is still in progress.

References

This section is still in progress.

On this page