Code

Implementation
SrOnly Props

Common Examples

The SrOnly component renders content that is visually hidden but remains accessible to screen readers. This is essential for providing context to assistive technology users without affecting the visual design.

import { SrOnly } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Text>
      <span aria-hidden="true">★★★★☆</span>
      <SrOnly>4 out of 5 stars</SrOnly>
    </Text>
  );
}

When to Use

Use SrOnly when:

Visual formatting conveys meaning (colors, symbols)
Abbreviations need expansion

When NOT to Use

Don’t use SrOnly when:

The visual text is already descriptive
aria-label or aria-labelledby would be more appropriate
The content should be visible to all users

React Accessibility

Content in SrOnly is read by screen readers but not visible
Uses CSS techniques that maintain content in the accessibility tree
Preserves all standard span element functionality

For more guidance on semantic page structure, see semantic markup best practices.

<SrOnly>
  Screen reader only content
</SrOnly>

`SrOnly` Props

The SrOnly component accepts all standard HTML span element props. The content is visually hidden using CSS but remains accessible to screen readers.

children

ReactNode

The content to be read by screen readers. This can be text, elements, or any valid React children.

className

string

Additional CSS classes to apply to the element.

string

Unique identifier, useful when referenced by aria-describedby or aria-labelledby.

Anvil2 Web

Resources

Common Examples

When to Use

When NOT to Use

React Accessibility

`SrOnly` Props

Anvil2 Web

Resources

​Common Examples

​When to Use

​When NOT to Use

​React Accessibility

​SrOnly Props

Common Examples

When to Use

When NOT to Use

React Accessibility

`SrOnly` Props