How to build an accessible InlineCitation in React

A real link whose accessible name starts with the visible number and includes the source title ("Source 1: Refund policy"), so it is meaningful without the hover card, which also opens on keyboard focus. Refused URLs keep the number and name but are not links

When to use a InlineCitation

• Attributing a claim in an AI answer to the source it came from, right where the claim is made

When not to use it

• Listing every source of an answer — use Sources (and number the citations to match)
• General footnotes in authored content — use a plain link or Prose

Keyboard interactions

Role link, verified at WCAG 2.2-AA.

• Tab
• Enter

Common mistakes

Avoid: Numbering citations independently of the Sources list

Prefer: Use the source’s position in Sources as `index`

A reader matches "2" in the text to row 2 of the list; mismatched numbers point at the wrong source

Example

<p>
  Refunds are available for 30 days.
  <InlineCitation index={1} source={{ title: 'Refund policy', url: 'https://example.com/refunds' }} />
</p>

See the full InlineCitation reference →