Accessibility is not an enhancement.
It is the baseline quality bar of a design system.
When accessibility is treated as optional, it is postponed, fragmented,
or removed under pressure.
When treated as a baseline, it becomes invisible, reliable, and scalable.
Design accessible by default
Accessibility should be built into foundations and components from the start.
off
on
badge strong
Contrast ratio
6.71:1
badge weak
Contrast ratio
8.39:1
badge outline
Contrast ratio
6.71:1
badge strong
Contrast ratio
4.2:1
badge weak
Contrast ratio
3.61:1
badge outline
Contrast ratio
3.3:1
Use accessible color contrast as a non-negotiable constraint.
Rely on manual fixes after components are shipped.Define focus, hover, and active states consistently.Leave interactive states undefined.
A list of tools and services related to this argument.Component explorers
Accessibility should be expressed through behavior, not documentation alone.
Keyboard navigation
Bug report
Current behaviorIf the keyboard is used to navigate and enter key is pressed, the try keyboard combination fails instantly.
Expected behaviorOnce enter key is pressed, the try keyboard combination test should start listening.
Component affected mds-keyboard-key
Use keyboard to navigateThis is a dropdown menu.
Bake ARIA roles and keyboard support into components.Expect consumers to add accessibility features manually.Provide accessible defaults that work out of the box.
Ship components that require extra effort to be accessible.
A list of tools and services related to this argument.Accessibility patterns
Accessibility issues multiply when handled at the product level.
Centralize accessibility patterns and decisions.Solve the same accessibility problem in multiple products.Document accessibility guarantees per component.Leave accessibility expectations implicit.
A list of tools and services related to this argument.Example docs
Accessibility is not static and must be maintained over time.
Include keyboard and screen reader testing in reviews.Assume accessibility remains intact by default.Use automated checks to catch regressions.Rely solely on manual audits.
A list of tools and services related to this argument.Automated checks
A design system is a library of styles, components, and patterns used by product teams to consistently and efficiently launch new pages and features. A good system has accessibility embedded throughout and includes documentation, guidelines and implementation notes for accessibility. https://tetralogical.com/blog/2022/06/24/accessible-design-systems/
Nathan Curtis — “Accessible” Design Systems Don’t Guarantee Accessible Products
