A lightweight set of accessible React hooks (a11y) for building inclusive, screen reader–friendly web applications.
Screen readers do not automatically announce dynamic updates like “Message sent” or “7 results found.” Unless focus moves or an ARIA live region is used, these changes can go unnoticed.
The useAnnouncer
hook enables you to programmatically send messages to screen readers — without disrupting the layout or moving focus.
- 🔊
useAnnouncer
— announce messages viaaria-live
regions - ♿️ Follows accessibility best practices (WAI-ARIA)
- ⚛️ Works in any React project (TypeScript-ready, zero dependencies)
- 🧹 Composable, tree-shakable, and easy to integrate
npm install react-aria-hooks
import { useAnnouncer } from "react-aria-hooks";
import { useState } from "react";
function SearchResults() {
const announce = useAnnouncer();
const [results, setResults] = useState(0);
const handleSearch = () => {
const newResults = Math.floor(Math.random() * 10);
setResults(newResults);
announce(`${newResults} results found`);
};
return (
<div>
<button onClick={handleSearch}>Search</button>
<p>Results: {results}</p>
</div>
);
}
Use it when:
- Content updates without a focus change
- Screen readers might miss visual changes
- You want to notify users non-visually
announce("Message sent successfully"); // Toasts or alerts
announce("Email field is required"); // Form errors
announce("Sort by: Price"); // Custom selects
announce("Data loaded"); // Async events
announce("7 results found"); // Search
announce("Page 2 of 10"); // Pagination
More accessible hooks are on the way:
useFocusTrap
– trap focus inside modals or drawersuseVisuallyHidden
– visually hide content but expose it to assistive techuseSkipLink
– add skip-to-content links- And more!
MIT © Andrii Tsapko