GitHub

Live Region

ARIA live region wrapper for screen reader announcements on htmx content swaps.

<rhx-live-region>

Examples

Live Search Results

Type in the search box. Screen readers will announce updated results via the live region.

Type to search...

Assertive (Urgent Messages)

Use rhx-politeness="assertive" for error messages or urgent alerts that should interrupt the user.

Visually Hidden

Use rhx-visually-hidden="true" for screen-reader-only announcements with no visual output.

3 results found

htmx Polling

Combine with htmx polling for real-time status updates announced to screen readers.

<!-- Status updated via htmx polling -->
<rhx-live-region id="order-status"
                  rhx-politeness="polite"
                  hx-get="/api/order/status"
                  hx-trigger="every 10s"
                  hx-swap="innerHTML">
    Checking order status...
</rhx-live-region>

Properties

Property Type Default Description
rhx-politeness string polite Politeness level: polite, assertive, off
rhx-atomic bool true Whether the entire region is announced as a whole
rhx-relevant string - Which changes to announce: additions, removals, text, all
rhx-visually-hidden bool false Visually hidden but accessible to screen readers
rhx-role string status ARIA role: status, alert, log

Accessibility

  • Renders aria-live with configurable politeness: polite (default, waits for idle) or assertive (interrupts).
  • Uses aria-atomic="true" by default so the entire region is announced as a unit on changes.
  • aria-relevant can be set to control which types of changes trigger announcements.
  • The rhx-visually-hidden option provides screen-reader-only announcements using the standard visually-hidden technique.
  • The role defaults to status for non-urgent updates. Use alert for time-sensitive messages.