Visually Hidden

display: none and visibility: hidden also drop the element from the accessibility tree, so neither works for content meant for assistive tech. The correct technique is a clip rectangle, which is easy to get subtly wrong (a width: 0 variant collapses text nodes; text-indent: -9999px breaks in RTL). [forVisuallyHidden] applies the well-tested declaration inline, so it works with no global stylesheet and no CSS import:

• No stylesheet. The clip is an inline style on the host, so it survives CSS-module scoping, shadow boundaries, and consumers with no global sheet.
• Optional reveal on focus. With focusable, the host implements the skip-link pattern: it un-clips while it (or a descendant) holds focus and re-clips on blur.
• SSR-safe. The style is bound declaratively, so the server render matches and hydration is clean.

Naming an icon-only button through a hidden <span> (rather than aria-label) keeps the name translatable by the same pipeline as the rest of your copy, and visible to text-only browsers.

<span forVisuallyHidden>Delete invoice #4021</span>

<a forVisuallyHidden focusable href="#main">Skip to content</a>

ForVisuallyHidden

LiveAnnouncer

An @Injectable({ providedIn: 'root' }) service: inject it with no provider and no import needed.

Pick 'assertive' only for something the user must act on now, such as an error that blocks them or a session about to expire. Everything else is 'polite'; an assertive announcement cuts off whatever the screen reader was saying, including the user's own navigation.

forty-cdk ships no styles: put your own class on the host rather than styling the for* selector (Styling forty-cdk explains why). This primitive is the one exception to "no styles": it writes the clip rectangle as an inline style, because that is its entire purpose. With focusable, the inline style is dropped while focused, so your own :focus rules apply unopposed. Style the revealed state through a class on the host.

The directive binds its clip declaratively, so the server render matches the client's and hydration is clean. LiveAnnouncer creates no regions on the server and both of its methods are no-ops there, so you can announce freely from code that also runs during a server render. Nothing is queued and replayed on the client, because an announcement describes an event the user was present for.

• Keep it in the flow. The host stays in the DOM and in the accessibility tree, so it is announced in document order. Place it where you want it read, not at the end of the template.
• Not a security boundary. The content is in the DOM and readable by anyone inspecting the page. Never use it to hide sensitive data.
• Focus tracking, not :focus-within. focusable listens to focusin / focusout rather than relying on a CSS pseudo-class, because an inline style cannot express one. A focusout whose relatedTarget is still inside the host does not re-clip.
• No role, no ARIA. The element keeps whatever semantics you give it. Pair it with aria-hidden="true" on the decorative sibling (an icon, usually) so the name is not announced twice.
• The announcer's regions exist before you announce. Both are appended to <body> when the service is first injected, empty, because a live region has to be in the accessibility tree before its text changes for the change to be read. This is the detail a hand-rolled announcer usually misses: build the region inside the first announce() and the first message of the session is silently dropped.
• A repeat is announced again, and a superseding message wins. Each write is deferred by a macrotask with the region emptied first, so the same string twice is read twice instead of being ignored as unchanged text. Two announce() calls to the same region in one turn coalesce and only the latest is spoken. That is what makes a message assembled across a change-detection pass read once, in full.
• The two politeness levels are independent. They are separate regions with separate pending writes, so a polite announcement never cancels an assertive one already in flight.
• An open modal does not swallow announcements. The regions carry the marker [forDialog] and [forDrawer] use to skip a node when they inert the rest of the page, so anything announced over an open modal is still read.