> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sr Only - Web

> A utility component for providing content that is visually hidden but accessible to screen readers.

> [!NOTE]
>
> For development, import `SrOnly` from
> `@servicetitan/anvil2`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3).

**Implementation**

## 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.

```tsx theme={null}
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](https://anvil.servicetitan.com/docs/accessibility/semantic-markup.md).

**SrOnly Props**

```tsx theme={null}
<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.

**id** `string`

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.