VisuallyHidden keeps its content in the accessibility tree and takes it off the screen. Use it for the words a sighted user gets from context and a screen reader user does not: the name of an icon-only control, the text of a status region, what a symbol such as ⌘ stands for.
It uses the clip pattern rather than display: none or visibility: hidden, which hide the content from screen readers as well. The content stays absolutely positioned and clipped to nothing, which also holds inside a transformed or overflow: hidden parent.
A live region announces changes without moving focus. The visible interface often already shows the result (a list that filters, a badge that updates), so the announcement itself can be hidden. Render the region once and change its text; a region that mounts with its message is often not announced.
With focusable, the content appears while it, or anything inside it, has keyboard focus, and hides again when focus moves on. Put it first in the page, so the first Tab offers a way past the header and navigation. It stays absolutely positioned when revealed, so it draws over the page instead of pushing the layout down.
