Usage

Import VisuallyHidden from its dedicated entry. The default slot is required:

<script setup lang="ts">
import { VisuallyHidden } from '@astryx-vue/core/VisuallyHidden'
</script>

<template>
  <a href="/articles/accessibility">
    Read more
    <VisuallyHidden> about accessibility primitives</VisuallyHidden>
  </a>
</template>

Best practices

Guidance	Practices
Do	Use to give icon-only buttons and controls an accessible name that screen readers announce.
Do	Render as a block element (as="div") with aria-live to announce dynamic updates like drag-and-drop or result counts.
Don't	Use it to hide content from everyone; it stays in the accessibility tree; use conditional rendering or hidden to remove content entirely.
Don't	Put interactive controls inside it; the content is not visible and cannot receive pointer input.

Examples

Add context and dynamic status information that assistive technology needs but the visual interface does not show.

Supplementary context

Page shows Read more about accessibility primitives

Screen readerRead more about accessibility primitives

Add screen-reader-only context to a short link so its purpose remains clear when read outside the surrounding page.

Live region

Items added: 0

Screen readerWaiting for an update

Use a block root and aria-live to announce dynamic visual updates while keeping the hidden content in the accessibility tree.