Skip to content
Toyota Motor Europe DX Playbook

Accessibility

Accessibility

Section titled “Accessibility”

Media buttons are icon-only play / pause controls placed over media surfaces — busy imagery, video frames, gradients. There’s no visible label to anchor meaning, and the surrounding contrast is unpredictable. Get the accessible name, the focus ring and the contrast right.

For Design

Section titled “For Design”

Minimum touch area

Section titled “Minimum touch area”

Both production sizes already meet WCAG 2.5.5 / EN 301549 touch-target guidance — Small is 40 × 40 (above the 24 × 24 minimum) and Large is 64 × 64 (above the 44 × 44 recommended). Don’t shrink the visible footprint below those values; if a denser layout is needed, switch to Icon Button instead.

Contrast over media

Section titled “Contrast over media”
  • Default to Neutral on dark imagery and Contrast on light imagery.
  • The icon must remain at least 3:1 against the button fill (WCAG 1.4.11 non-text contrast).
  • If the underlying media is unpredictable, add a subtle scrim behind the button so it sits on a stable, high-contrast layer.
Guidance on how to use a component.
  • Pick the contrast mode that matches the brightness of the media behind the button.
  • Add a scrim or gradient behind the button when imagery is variable or user-supplied.
  • Keep at least one full button width of clear space between adjacent media buttons.
Guidance on what to avoid when using a component.
  • Don’t place a Neutral media button on a light photograph without a scrim.
  • Don’t override the focus ring colour — it’s tuned to remain visible across both modes.
  • Don’t pack media buttons together more tightly than their own diameter; touch targets must not overlap.

For Dev

Section titled “For Dev”

These recommendations align with WCAG 2.2 AA and EN 301549.

  1. Semantic markup
    • Use a native <button>. Don’t style a <div> or <a> to look like one.
  2. Accessible name
    • Every media button must have an aria-label. For the play / pause toggle, swap the label as the state changes (Play ↔ Pause) and mirror it on aria-pressed.
    • Hide the icon glyph from assistive tech with aria-hidden="true".
  3. Keyboard navigation
    • Buttons must be focusable via Tab and activatable via Enter or Space.
    • Never suppress the focus ring — it’s the only way keyboard users know which control is active over media.
    • For player transport controls, group the cluster in a role="toolbar" container with a roving tabindex and Arrow-key navigation.
  4. Progress ring announcements
    • The --tng-media-button-progress ring is decorative. Don’t announce it directly on the button. Pair it with an aria-live="polite" region that surfaces meaningful milestones (e.g. “10% played”, “Ended”) if you need spoken feedback.
    • Use aria-busy="true" while the player is buffering.
  5. Testing and validation
    • Validate with Axe / Lighthouse / Accessibility Insights.
    • Verify focus visibility in both Neutral and Contrast modes, on representative imagery.
    • Test manually with a keyboard and a screen reader to confirm the play / pause label flips with the state.