Stat

A single figure with its label.

Preview

Code

The three render the same class names, the same ARIA and the same data attributes. That is checked when this site builds: a class in any of these samples that neither the markup contract nor the shipped stylesheet defines fails the build.

<div class="wsu-stat">
  <span class="wsu-stat__label">Credits enrolled</span>
  <span class="wsu-stat__value">12</span>
</div>

Why it works this way

• Label first in the DOM, value second, so a screen reader reads "Credits enrolled, 12" rather than "12" followed by a guess. The visual order is the same. The CSS does not reverse them, because a reading order that disagrees with the visual order is a 1.3.2 failure.

Accessibility

• Meaningful sequence (1.3.2).
• The number is text, so it scales with the page and can be selected.

Success criteria in brackets refer to WCAG 2.2. Every one of them is checked by axe-core in both themes at three viewport widths before this page can be published. See Accessibility for what the gates are.

Props

Blade

Attribute	Default	What it does
label	required	Read first.
value	null	Or use the default slot.
hint	null	Small text under the value.

Vue

Prop	Type and default	What it does
label	String, ''	Or use the label slot.
value	String or Number, ''	Or use the default slot.

In the markup contract

contract/markup-contract.json is extracted from the two static templates and every package tests against it. This is what it records for .wsu-stat.

Template	Elements	Accessibility attributes	Uses
internal apps/examples/static-html/index.html	div	none recorded	4