Open DS

Accessibility

Five questions every design system answers about accessibility. These are Accessible 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 contextEveryone, including people with disabilities, AAA
  • R2Content and dataForms and tasks, one idea at a time

Question 1

Which states get their own visible value?

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

Why Accessible first picks it: Every state, including loading, gets its own value.

becauseR1

default3.25rem
compact3rem
disabled0.5
focus

Question 2

How many signals carry each meaning?

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

Why Accessible first picks it: Never color alone.

becauseR1

size2
opacity1
blue light1

Question 3

What contrast floor do we hold?

  • AA
  • AAA for text (chosen)

Why Accessible first picks it: AAA contrast for text.

becauseR1

  • AAA for text
  • from size
  • from opacity
  • from color.blue.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
  • Large (chosen)

Why Accessible first picks it: Large targets for tremor and touch.

becauseR1

  • default
    default
    → size.52
  • compact
    compact
    → size.48
  • disabled
    disabled
    → opacity.50
  • focus
    focus
    → color.blue.light.600· dark → color.blue.dark.700

Question 5

Where are the floors hardest to hold?

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

Why Accessible first picks it: Forms are where people are blocked.

becauseR2

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

When to use

  • Keyboard focusUse: button/focus-ring at border-width.focus, with an offset. Not: A thin or faint outline. Focus must be seen by everyone.
  • The smallest clickable thingUse: size.control.default (large). Not: Touch-minimum size. Large targets help people with motor needs.

All accessibility tokens

4 tokens · each decision and the primitive it points to

  • size · 2size.523.25rem · 52pxsize.483rem · 48px
  • opacity · 1opacity.500.5
  • color.blue.light · 1color.blue.light.600#0B4FC0
  • Decisions · 4size.control.default{size.52}size.control.compact{size.48}opacity.disabled{opacity.50}color.border.focus{color.blue.light.600}

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

Accessibility in Accessible first: large. Large targets for tremor and touch. Forms are where people are blocked.