Accessibility
Five questions every design system answers about accessibility. These are Dense data’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 contextDaily experts, AA
- R2Content and dataNumbers and records, a lot
- R3Use scenariosAt a desk, all day
Question 1
Which states get their own visible value?
- Hover, focus, disabled (chosen)
- Those and pressed
- All, including loading
Why Dense data picks it: Pressed reuses hover; experts do not need more.
becauseR1
Question 2
How many signals carry each meaning?
- Two: color and word
- Three: color, icon and word (chosen)
Why Dense data picks it: Many statuses share one table; color alone is not enough.
becauseR1R2
Question 3
What contrast floor do we hold?
- AA (chosen)
- AAA for text
Why Dense data picks it: AA contrast for every text.
becauseR1
- AA
- from size
- from opacity
- from color.violet.light
Decisions point at primitives, so the rule lives in one place.
Question 4
What is the smallest target?
- Compact, for a pointer (chosen)
- Touch size
- Large
Why Dense data picks it: Mouse and keyboard; compact targets are enough.
becauseR3
- default
- default
- → size.32
- compact
- compact
- → size.24
- disabled
- disabled
- → opacity.40
- focus
- focus
- → color.violet.light.600· dark → color.violet.dark.700
Question 5
Where are the floors hardest to hold?
- Dense tables (chosen)
- Long text
- Forms
- Brand color
Why Dense data picks it: Small text and thin lines in tables need the most care.
becauseR2
- 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.compact. Not: Anything smaller. Compact still fits a mouse. Touch is not this product's input.
All accessibility tokens
4 tokens · each decision and the primitive it points to
- size · 2
size.322rem · 32pxsize.241.5rem · 24px - opacity · 1
opacity.400.4 - color.violet.light · 1
color.violet.light.600#4B3FD9 - Decisions · 4
size.control.default{size.32}size.control.compact{size.24}opacity.disabled{opacity.40}color.border.focus{color.violet.light.600}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Accessibility in Dense data: compact, for a pointer. Mouse and keyboard; compact targets are enough. Small text and thin lines in tables need the most care.