VisuallyHidden

İçeriği gözden gizler ama erişilebilirlik ağacında tutar. Görsel olarak belli olan ama sesli okunduğunda kaybolan bağlam için kullan.

KararlıKaynak kod

Gelir %12 arttı (geçen aya göre)

<Text>
Gelir %12 arttı
<VisuallyHidden> (geçen aya göre)</VisuallyHidden>
</Text>

Import

tsx

import { VisuallyHidden } from "@merid/react";

Örnekler

Gizli başlık

Layout'tan anlaşılan bir bölge de ekran okuyucuyla gezinmek için bir başlıktan faydalanır. as doğru elemanı render'lar.

<nav aria-labelledby="vh-nav">
<VisuallyHidden as="h2" id="vh-nav">Hesap ayarları</VisuallyHidden>
<IconButton label="Ayarlar" icon={<SettingsIcon />} />
</nav>

API referansı

Varsayılan olarak bir <span> render'lar, ref'ini iletir ve diğer HTML attribute'larını olduğu gibi geçirir.

Prop	Tip	Varsayılan	Açıklama
`as`	`ElementType`	`"span"`	Onun yerine render'lanacak eleman ya da component.

Stil verme

Seçici	Değerler
`.mrd-visually-hidden`	Clip deseni; component olmadan da herhangi bir elemanda kullanılabilir

Erişilebilirlik

İçerik ekran okuyucular tarafından okunmaya devam eder; focus alabiliyorsa tab sırasında da kalır. Focus alabilen elemanları gizleme: gören bir klavye kullanıcısı görünmeyen bir şeye focus vermiş olur.
Yalnızca ikon içeren butonlarda IconButton'ın aria-label'ı doğrudan ayarlayan label prop'unu tercih et.

Kullanım ilkeleri

Yap

Görsel layout'un zaten ima ettiği kısa bir bağlam ekle, örneğin “geçen aya göre”.

Kaçın

Anahtar kelimeyle doldurulmuş metni ya da gören kullanıcıların da ihtiyaç duyduğu içeriği gizlemek.

İlgili sayfalar

IconButton: yalnızca ikon içeren aksiyonlara ad verir.
Link: “yeni sekmede açılır” ipucu için aynı sınıfı kullanır.