Skip to main content
Browse documentation
On this page

Accessibility

A small set of interaction and accessibility fixes, applied by attribute rather than by class.

Behavior #

  • [aria-controls] gets cursor: pointer, a hint that the element toggles something else.
  • [aria-disabled="true"] and [disabled] get cursor: not-allowed.
  • [aria-hidden="false"][hidden] is shown (display: initial) rather than hidden, and visually clipped unless focused. This is for content that should stay in the accessibility tree but not take up layout space until focused (a common "skip to content" link pattern).
  • [dir="rtl"] sets direction: rtl. Most components in Cirth already mirror their icons/spacing under this attribute (nav breadcrumbs, dropdown menus, form icons); see each component's page for its specific RTL behavior.

Two more user preferences are handled globally, each on its own page: High contrast (prefers-contrast: more, and how it differs from forced-colors: active) and Reduce motion (prefers-reduced-motion). Output for paper is covered by Print.

Search documentation

Type at least two characters to search.