VisuallyHidden

Ne zaman kullanılır

VisuallyHidden, yalnızca ekran okuyucuya söylenecek metin içindir: yalnız ikonlu bir düğmenin adı, görünür başlığı olmayan bir tablonun başlığı ya da bir atlama bağlantısı.

Ne zaman kullanılmaz

• Görünür etiket varsa: Ekranda zaten yazıyorsa gizli kopyasını eklemeyin; çift okunur.
• İçeriği gizlemek için: Hiç kimsenin görmemesi gereken içerik için hidden ya da koşullu çizim kullanın; VisuallyHidden içeriği ekran okuyucuya açık tutar.
• Uzun açıklama için: Gizli metni kısa tutun; uzun açıklamayı görünür yapın.

Anatomi

VisuallyHidden tek parçadır: <span> (ya da render ile verdiğiniz öğe).

1. Kök: sr-only sınıfı; 1 px kutuya kırpılır, konumu mutlaktır, erişilebilirlik ağacında kalır.

Davranış

• Varsayılan olarak içerik gözden gizlidir, ekran okuyucuya açıktır.
• focusable açıksa içerik, kendisi ya da içindeki bir bağlantı odak aldığı sürece görünür olur (focus:not-sr-only, focus-within:not-sr-only).
• render ile <caption>, <a> gibi öğeler çizilir.
• Satır içi stil kabul etmez; className ve style prop’ları yoktur.

Yönergeler

Gizli metin işlemi söylesin

Kapat

YapınGizli metin düğmenin ne yaptığını söylüyor.

YapmayınAd yok: ekran okuyucu yalnızca “düğme” der.

Atlama bağlantısını odakta gösterin

Atlama bağlantısı için focusable kullanın; yoksa klavye kullanıcısı odağın nerede olduğunu göremez.

İçerik

• Kısa yazın: Kapat, Menüyü aç, İçeriğe geç.
• Görünür metinle aynı dili kullanın.
• İkonun adını değil, düğmenin yaptığı işi söyleyin.

İlgili bileşenler

• Text: Herkesin okuduğu görünür metin.
• Icon: Yalnız ikonlu düğmede süs ikonu.
• Button: Yalnız ikonlu düğmenin kapsayıcısı.