Components / Visually Hidden

Visually Hidden

Accessibility helper — renders children for assistive technology but hides them visually using the canonical W3C / a11y-project recipe (1×1px clipped box, taken out of flow). Use for icon-only buttons, ambiguous links, sortable column states, and other places where extra context is needed for screen readers but not for sighted users.

layout v0.8.0

Playground

Examples

Icon-only button — accessible name

Sighted users see only icons; screen readers announce the hidden label.

Delete item

Edit item

Duplicate item

<cg-stack direction="column" gap="md">
  <cg-text size="sm" muted>Sighted users see only icons; screen readers announce the hidden label.</cg-text>
  <cg-stack direction="row" gap="sm">
    <cg-button variant="tertiary"><cg-icon name="trash" size="sm"></cg-icon><cg-visually-hidden>Delete item</cg-visually-hidden></cg-button>
    <cg-button variant="tertiary"><cg-icon name="edit" size="sm"></cg-icon><cg-visually-hidden>Edit item</cg-visually-hidden></cg-button>
    <cg-button variant="tertiary"><cg-icon name="copy" size="sm"></cg-icon><cg-visually-hidden>Duplicate item</cg-visually-hidden></cg-button>
  </cg-stack>
</cg-stack>

Ambiguous link — extended context

Sighted users see "Read more"; screen readers hear "Read more about cognitive bias in design".

Cognitive bias in design

Why your dashboard layout shapes the decisions your users make.

Read more about cognitive bias in design

<cg-stack direction="column" gap="md">
  <cg-text size="sm" muted>Sighted users see "Read more"; screen readers hear "Read more about cognitive bias in design".</cg-text>
  <cg-card padding="md" style="max-width:480px;">
    <cg-stack direction="column" gap="sm">
      <cg-text size="md" weight="semibold">Cognitive bias in design</cg-text>
      <cg-text size="sm">Why your dashboard layout shapes the decisions your users make.</cg-text>
      <cg-link href="#article" variant="accent">
        Read more
        <cg-visually-hidden>about cognitive bias in design</cg-visually-hidden>
      </cg-link>
    </cg-stack>
  </cg-card>
</cg-stack>

Sortable column header — announces sort state

Screen reader hears: "Name, sorted ascending, button". The arrow is decorative; the state is announced.

Name

, sorted ascending

<cg-stack direction="column" gap="md">
  <cg-text size="sm" muted>Screen reader hears: "Name, sorted ascending, button". The arrow is decorative; the state is announced.</cg-text>
  <cg-button variant="tertiary">
    Name
    <cg-icon name="arrow-up" size="xs" aria-hidden="true"></cg-icon>
    <cg-visually-hidden>, sorted ascending</cg-visually-hidden>
  </cg-button>
</cg-stack>

Import

import { CgVisuallyHidden } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-visually-hidden';

Per-component imports ship only that component (~8 kB gzip).