VisuallyHidden

Rol ve anlam

VisuallyHidden varsayılan olarak <span> çizer; rolü yoktur. sr-only deseni (1 px kutuya kırpma, mutlak konum) içeriği gözden gizler ama erişilebilirlik ağacında bırakır; display: none ya da visibility: hidden kullanılmaz. render ile <caption> ya da <a> çizildiğinde anlam o öğeden gelir.

Klavye

Tuş	Davranış
Tab	Düz VisuallyHidden odak almaz. focusable ile <a> çizilirse bağlantı sekme sırasına girer ve odakta görünür olur.
Enter	Atlama bağlantısında hedefe gider (href="#main").

Odak

focusable içerik, kendisi ya da içindeki bir öğe odak aldığında görünür; böylece odak görünmez bir yerde kalmaz (WCAG 2.4.7). Odak halkasını render ile verdiğiniz öğe belirler; atlama bağlantısına görünür bir stil verin.

Ekran okuyucu

Örnek	Okunan
<button><Icon /><VisuallyHidden>Kapat</VisuallyHidden></button>	“Kapat, düğme”
<VisuallyHidden render={<caption />}>Öğe listesi</VisuallyHidden>	Tablo adı: “Öğe listesi”
<VisuallyHidden focusable render={<a href="#main" />}>İçeriğe geç</VisuallyHidden>	“İçeriğe geç, bağlantı”

Görünür metin zaten varsa gizli bir kopya eklemeyin; ekran okuyucu ikisini de okur.

Kontrast

Gizliyken görünür bir çıktı yoktur; kontrast ölçülecek bir şey yok. focusable ile görünen içeriğin rengini render ile verdiğiniz öğe belirler. Bu çift token testinin kapsamında değildir; ölçülmedi.

WCAG 2.2

Ölçüt	VisuallyHidden nasıl karşılar	Ürün ekibi ne yapmalı
1.1.1 Metin dışı içerik	İkona gizli metinle ad verilir.	Yalnız ikonlu her kontrole gizli ad verin.
1.3.1 Bilgi ve ilişkiler	<caption> gibi öğelerle ilişkiyi korur.	Tabloya ve alana ad verin.
2.4.1 Blokları atlama	focusable ile atlama bağlantısı kurulabilir.	Sayfanın ilk odaklanabilir öğesi atlama bağlantısı olsun.
2.4.7 Odak görünür	focusable içerik odakta görünür olur.	Odakta görünen öğenin kontrastını ve halkasını doğrulayın.
4.1.2 Ad, rol, değer	Gizli metin, içeren öğenin erişilebilir adına katılır.	Gizli metni görünür etiketle çakıştırmayın.