Open DS

Accessibility

Five questions every design system answers about accessibility. These are Content first’s answers, and each one points back to the reasons that chose it.

View all 4 accessibility tokens ↓

The reasons this scheme answers from

  • R1People and work contextOccasional visitors, AA
  • R2Use scenariosAnywhere, on any device, one sitting
  • R3Content and dataLong-form text, one idea at a time

Question 1

Which states get their own visible value?

  • Hover, focus, disabled
  • Those and pressed (chosen)
  • All, including loading

Why Content first picks it: Pressed gets its own value for touch.

becauseQ4

default3rem
compact2.5rem
disabled0.4
focus

Question 2

How many signals carry each meaning?

  • Two: color and word (chosen)
  • Three: color, icon and word

Why Content first picks it: Status is rare; color and a word are enough.

becauseR1

size2
opacity1
navy light1

Question 3

What contrast floor do we hold?

  • AA (chosen)
  • AAA for text

Why Content first picks it: AA contrast, with large text helping further.

becauseR1

  • AA
  • from size
  • from opacity
  • from color.navy.light

Decisions point at primitives, so the rule lives in one place.

Question 4

What is the smallest target?

  • Compact, for a pointer
  • Touch size (chosen)
  • Large

Why Content first picks it: Readers are often on phones.

becauseR2

  • default
    default
    → size.48
  • compact
    compact
    → size.40
  • disabled
    disabled
    → opacity.40
  • focus
    focus
    → color.navy.light.600· dark → color.navy.dark.700

Question 5

Where are the floors hardest to hold?

  • Dense tables
  • Long text (chosen)
  • Forms
  • Brand color

Why Content first picks it: Long text needs steady contrast and line length.

becauseR3

  • button · 2 keys
  • input · 2 keys
  • overlay · 1 keys

When to use

  • Keyboard focusUse: button/focus-ring at border-width.focus. Not: Removing the outline. Keyboard users must always see where they are.
  • The smallest clickable thingUse: size.control.default (touch). Not: A compact control. Many readers are on phones.

All accessibility tokens

4 tokens · each decision and the primitive it points to

  • size · 2size.483rem · 48pxsize.402.5rem · 40px
  • opacity · 1opacity.400.4
  • color.navy.light · 1color.navy.light.600#1E3A5F
  • Decisions · 4size.control.default{size.48}size.control.compact{size.40}opacity.disabled{opacity.40}color.border.focus{color.navy.light.600}

Decisions reference primitives, so changing one primitive updates every decision and component that uses it.

Accessibility in Content first: touch size. Readers are often on phones. Long text needs steady contrast and line length.