Style that keeps an element in the accessibility tree but off the screen.
The standard clip pattern. Used rather than a .sr-only class because MAIDR
has no stylesheet to put one in: dist/maidr.css is a placeholder emitted so
integrations that link it by name keep working, and the UI is styled at
runtime by emotion (see scripts/vite-plugin-math-stylesheet.js).
Shipping a global .sr-only rule instead would be worse than merely
inconvenient. MAIDR embeds in pages it does not control, and sr-only is a
common name — Bootstrap 4 and Tailwind both define it — so a global rule
would either be overridden by the host's or silently override the host's for
the rest of the page. An inline style on the elements MAIDR owns cannot
reach anything outside them.
Style that keeps an element in the accessibility tree but off the screen.
The standard clip pattern. Used rather than a
.sr-onlyclass because MAIDR has no stylesheet to put one in:dist/maidr.cssis a placeholder emitted so integrations that link it by name keep working, and the UI is styled at runtime by emotion (seescripts/vite-plugin-math-stylesheet.js).Shipping a global
.sr-onlyrule instead would be worse than merely inconvenient. MAIDR embeds in pages it does not control, andsr-onlyis a common name — Bootstrap 4 and Tailwind both define it — so a global rule would either be overridden by the host's or silently override the host's for the rest of the page. An inline style on the elements MAIDR owns cannot reach anything outside them.