Content Label
How the Content Label works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.
The Content Label is a role="group" named by its visible label, so the switch or close button inside it is heard with its context. Its leading image is decorative, its switch is a <button role="switch">, and the card's close is a named <button>.
Keyboard#
Moves to the switch, or the card's close button. The text is not focusable.
On the switch: turns it on or off.
On the switch: turns it on or off. On close: dismisses the card.
Semantics#
role="group" aria-labelledbyNamed by the label's id. Pass ariaLabel to name it differently.
Always<img alt="">The label already names the item, so the picture is decorative.
Avatar, brand, company, cardrole="switch" aria-checkedNamed from toggleLabel, or the label.
showToggle<button aria-label>The close button. Its default name is "Close"; pass closeLabel such as "Remove Apple Pay".
Content Card<p>Plain text after the label. It is not tied to the switch with aria-describedby.
DescriptionColour contrast#
Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.
Text · Row, Card
Label, sub-label, description and badge against white. All are 12–16px, so 4.5:1 applies.
WCAG 1.4.3 Contrast (Minimum) ↗Switch · Off, On
The off track is #f2f2f2 on white (1.12:1), so the white knob and track barely show. On is brand (5.40:1).
WCAG 1.4.11 Non-text Contrast ↗Focus indicator · Focus visible
#1a6ef8 (4.54:1 on white): a 2px ring with a white gap around the switch track, inset on the close button.
WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗Target size · Switch, Close
The switch's hit area is 32 × 24 around a 28 × 16 track; the close button is 24 × 24.
WCAG 2.5.8 Target Size (Minimum) ↗Measured contrast#
Each text role against white, on a row and on a Content Card, from the component's tokens. 1 of 8 pairs fall below their minimum (4.5:1 for text, 3:1 for graphics) and are marked in amber.
Motion#
- The switch slides over 200ms and stops moving under prefers-reduced-motion.
Checklist#
The row's sub-label is #8f8f8f, about 3.2:1 at 12px. Use the card's #6d6d6d there too.
The switch's off state is close to invisible on white (about 1.1:1). It needs a stroke or a darker track to meet 3:1.
Name the close button after the thing it removes.
If the description explains the switch, link them with aria-describedby so it is heard on focus.