Visually Hidden

نصب

pnpm dlx @simurgh-ui/cli add visually-hidden

import { VisuallyHidden } from '@simurgh-ui/react/visually-hidden';
import { VisuallyHidden as VueVisuallyHidden } from '@simurgh-ui/vue/visually-hidden';
import { VisuallyHiddenComponent } from '@simurgh-ui/angular/visually-hidden';
import '@simurgh-ui/styles/visually-hidden.css';

پیش‌نمایش واقعی

Live component Visually Hidden ◆

XClose dialog<Previous page>Next page

Each icon has a hidden text label available to screen readers.

استفاده

React

<button>
  <CloseIcon aria-hidden />
  <VisuallyHidden>بستن dialog</VisuallyHidden>
</button>

Vue

<button>
  <CloseIcon aria-hidden="true" />
  <VisuallyHidden>بستن dialog</VisuallyHidden>
</button>

Angular

<button>
  <simurgh-close-icon aria-hidden="true" />
  <simurgh-visually-hidden>بستن dialog</simurgh-visually-hidden>
</button>

Visually Hidden متن معنادار را بدون اشغال فضای دیداری در اختیار فناوری کمکی می‌گذارد؛ برای کنترل‌های فقط‌آیکن و راهنمای تکمیلی مفید است. کنترل تعاملی را با این primitive پنهان نکنید. متن پنهان باید کوتاه باشد و نام دسترس‌پذیر یا context ضروری اضافه کند.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.