Accessibility
Every item on the stand is put through axe-core in a real browser, in the dark theme and in the light one, against WCAG 2.2 at A and AA and axe’s own best practices. The numbers below are that run. They are not typed here: the browser writes one file per item, the page is drawn from those files, and a gate holds the files to the stand - an item added without a report, an axe upgrade without a new run, or a fixed violation still listed as owed fails before anything is published. A page that claims a result the set no longer has is the one thing this report must not be.
What else holds the line. This run sees the examples as the stand draws them, closed. The unit tests put every primitive through axe as well, in every variant and open - a menu with its list showing, a dialog with its focus trapped - and drive the interactive ones by the keyboard. Colour contrast is also measured pair by pair - every ink on every ground it is promised on, for every accent of the line, in both themes and under more contrast (see Contrast) - the floor of a pointer target is a token at WCAG’s 24px, and every animation comes to rest for a reader who asked for less motion. The gates say what each one catches.
What no automated check sees. Whether a name makes sense when it is read aloud, whether the order a reader tabs in is the order the screen means, whether an error says what to do about it. axe marks some of these for a person - they are listed with each item - and the rest are what reading a screen with a screen reader is for.
123 items of the stand2 themes each47 rules applied13 WCAG criteria checked123 items with nothing owed
Run by axe 4.14.0 against wcag2a, wcag2aa, wcag21a, wcag21aa, wcag22aa, best-practice.
The criteria checked
Each WCAG success criterion a rule that applied checks, and on how many items it applied.
| Criterion | Rules | Items |
|---|---|---|
| 1.1.1 | aria-meter-name aria-progressbar-name image-alt role-img-alt svg-img-alt | 15 |
| 1.3.1 | aria-required-children aria-required-parent definition-list dlitem list listitem td-headers-attr th-has-data-cells | 28 |
| 1.3.5 | autocomplete-valid | 7 |
| 1.4.1 | link-in-text-block | 2 |
| 1.4.3 | color-contrast | 123 |
| 1.4.12 | avoid-inline-spacing | 19 |
| 2.1.1 | scrollable-region-focusable | 4 |
| 2.1.3 | scrollable-region-focusable | 4 |
| 2.4.4 | link-name | 123 |
| 2.5.3 | label-content-name-mismatch | 10 |
| 2.5.8 | target-size | 123 |
| 3.3.2 | form-field-multiple-labels | 24 |
| 4.1.2 | aria-allowed-attr aria-conditional-attr aria-deprecated-role aria-hidden-focus aria-input-field-name aria-prohibited-attr aria-required-attr aria-roles aria-toggle-field-name aria-valid-attr aria-valid-attr-value button-name duplicate-id-aria label link-name nested-interactive | 123 |
Not yet passed
Nothing: every item passes every rule that applied to it, in both themes.
Rules about a page, off on the stand
landmark-unique- Two examples of a breadcrumb trail on one page are two landmarks with one name; a product shows one.landmark-no-duplicate-main- An app shell and a sign-in screen are the page and bring its main; on the stand they sit inside the stand’s own.landmark-main-is-top-level- For the same reason: the block’s main is the product’s top level, and the stand’s frame is around it.heading-order- Where a heading sits in the outline is the page’s to say, and the stand’s headings are not a product’s.