AFDS user guide
A guide to Accessibility Focused Design Systems, for the designers, developers and testers who have to use one.
It explains what a design system is, why this project treats accessibility as the reason the system exists rather than a feature it happens to include, and then works through every part of AFDS: how a package claims conformance, what a component declares about itself and refuses to promise, the records that make a claim checkable, the optional method profiles that carry one way of designing, and the .afds package that carries all of it from one organisation to another. It assumes no prior knowledge of design systems, design tokens or WCAG.
How to read this
You do not need to read the guide in order. It is organised around tasks rather than around the specification’s argument, so a section that draws on clause 7 may sit next to one that draws on clause 29. Each section states the problem it addresses before it explains the mechanism, so you can enter anywhere.
The guide is informative documentation and issues no requirement of its own. Every statement of obligation carries the clause it comes from, and each of those citations links into the specification, so you can always get from an instruction here to the normative text behind it. Where the guide and the specification disagree, the specification wins and the disagreement is a defect in the guide. The status of this guide says what that standing means.
Contents
Status of this guide
Part 1. Before you start
Part 2. What a design system is, and why accessibility drives this one
Part 3. Conformance, claims, and the three axes
Part 4. The component contract
- What a component declares about itself
- Declaring a component
- The semantic model
- Native HTML first, and deriving from published patterns
- The keyboard contract
- Reflow and layout behaviour
- Recording WCAG criteria against a component
- Kinds of requirement
- Guarantees, and what a component refuses to promise
- Assertions
- Evidence records
- Uncertainty records
- Testing levels, and testing in composition
- Annotating a design
- A worked component: Dialog
Part 5. The method profiles
- The method profiles: choosing a way of building, or not
- The intrinsic layout profile — afds-layout-intrinsic
- The scoped reflow profile — afds-reflow-scoped
- The typography and colour profile — afds-typography-colour
- The native-first pattern profile — afds-patterns-native-first
- Deciding which profiles to claim