> ## 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 – Code

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

<Tabs>
  <Tab title="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](/docs/accessibility/semantic-markup).
  </Tab>

  <Tab title="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.

    <ParamField path="children" type="ReactNode">
      The content to be read by screen readers. This can be text, elements, or any valid React children.
    </ParamField>

    <ParamField path="className" type="string">
      Additional CSS classes to apply to the element.
    </ParamField>

    <ParamField path="id" type="string">
      Unique identifier, useful when referenced by `aria-describedby` or `aria-labelledby`.
    </ParamField>
  </Tab>
</Tabs>