Skip to content
Toyota Motor Europe DX Playbook

Accessibility

For designers

Section titled “For designers”
  • Contrast and Visibility — Ensure backdrops provide sufficient contrast against the background (minimum 4.5:1).
  • Avoid relying solely on colour or transparency to convey meaning.
  • The backdrop itself should never handle focus or interactivity — these behaviours belong to the modal, drawer, or tooltip layered above it.

For developers

Section titled “For developers”

To ensure that all backdrop variants meet accessibility standards across platforms, please follow the implementation checklist below. These recommendations align with WCAG 2.1 AA, support keyboard navigation, and are compatible with assistive technologies.

  1. Focus management
    • Keep focus trapped within the backdroped component so users don’t navigate outside accidentally.
    • Return focus to the triggering element once the backdrop (or modal) is closed.
    • Focus must always remain within the active modal, drawer, or tooltip while the backdrop is visible.
  2. Keyboard navigation
    • Ensure all interactive elements are reachable via Tab.
    • Allow users to close backdrops with the Esc key when appropriate.
    • The backdrop layer itself must not receive focus or contain interactive elements — these belong to the modal, drawer, or tooltip layered above it.
  3. Screen Reader Support
    • Use appropriate ARIA roles, e.g. role="dialog" or role="alertdialog" for modals.
    • Apply aria-labelledby and aria-describedby to provide context when relevant.
    • Announce backdrops or dialogs when they appear (e.g. through live regions for alerts or notifications).
    • Assign aria-hidden="true" to the backdrop layer itself so it’s ignored by assistive technologies.
  4. Motion sensitivity
    • Respect user preferences for reduced motion (prefers-reduced-motion media query).
    • Avoid excessive fade or scale animations that could cause discomfort.

Screen readers

Section titled “Screen readers”
  • The backdrop is purely decorative — it should not be in the accessibility tree. A standalone <div class="tng-backdrop"> has no semantic role and is ignored automatically.
  • When used with <dialog> or popover, the ::backdrop pseudo-element is generated by the browser and is never exposed to assistive technologies.

Focus management

Section titled “Focus management”
  • Set inert on the background content while the overlay is visible to prevent focus from escaping behind the backdrop.
  • The close button overlaying the backdrop must have an accessible label (e.g. aria-label="Close").