Accessibility ARIA Semantics
A bare element wired to three empty slots takes its semantics in order, the name holding while the role and then the state arrive and drop away.
CSS
Accessibility
15 animationsAccessibility Contrast Ratio
A sample's copy gains value while the ratio meter below it climbs past the 4.5:1 threshold tick and holds there.
CSSAccessibility Error Description
The invalid rule under a field draws itself, a tie line runs down from it and only then does the error message arrive at the other end.
CSSAccessibility Escape Release
A key cap presses, the gate in the dialog boundary parts from the middle and the trapped focus ring leaves through it onto the control below.
CSSAccessibility Focus Ring
A focus ring steps down a stack of four controls in the order the DOM gives them, each control brightening as the ring lands around it.
CSSAccessibility Keyboard Trap
A focus ring steps the controls of a region, compresses against the lit boundary when it tries to leave and is thrown back inside while the page beyond stays dark.
CSSAccessibility Landmark Map
One marker walks a page wireframe in reading order, stretching to the shape of each landmark it names and holding there before moving on.
CSSAccessibility Large Text Threshold
Two samples rise to the same ratio against their own dashed rules, the large-text threshold sitting low enough to clear while the body one stays out of reach.
CSSAccessibility Live Region
A status strip clears and rewrites its message and broadcasts it in widening arcs while the focus ring above never leaves the field.
CSSAccessibility Reduced Motion
An arc circles its track until the preference switch is thrown, and the spinner is replaced by a closed ring that does not turn at all.
CSSAccessibility Skip Link
A skip link parked above the page drops into view with its focus ring, throws focus past the header, and the main region takes the ring in its place.
CSSAccessibility Tabindex Jump
A focus ring hops a grid of controls along a tab order that crosses itself, leaving the first control for the far corner before the one beside it.
CSSAccessibility Touch Target
A control's hit area starts no bigger than its icon, grows outward and settles exactly on the dashed minimum-size guide before falling short again.
CSSAccessibility Tree Walk
A reading cursor descends the accessibility tree node by node, out to the deepest child and back to the next sibling, while the visual layout beside it never lights.
CSSAccessibility Visible Focus
A control's focus indicator wipes off the track a custom style left behind and draws itself back on, so the ring survives being outlined away.
CSS