foundations

Accessibility

Accessible design works for everyone, including people who use a keyboard, a screen reader, zoom, or see colors differently.

The focus ring and target sizes are tokens like the others. Change them with /ds-add; the check refuses a target size under 24px.

Focus ring

  • 2px
    ring-width2px
    --ds-focus-ring-width
  • 2px
    ring-offset2px
    --ds-focus-ring-offset
  • Focus
    ring-color#2B5DFF
    --ds-focus-ring-color

Target sizes

  • ✓
    min24px
    --ds-target-mintw-min-h-target
  • ✓
    comfortable44px
    --ds-target-comfortabletw-min-h-target-comfortable