Card

Rol ve anlam

• Card.Title içeren Card bir <section> öğesidir ve aria-labelledby ile başlığa bağlanır; ekran okuyucu onu başlığıyla adlandırılmış bir bölge (region) olarak duyurur ve bölge listesinde gösterir.
• Başlığı olmayan Card düz bir <div> öğesidir; rolü yoktur.
• Card.Title gerçek bir başlıktır (varsayılan h3). level ile sayfadaki başlık sırasına uydurun.
• Bir listedeki kartlar için kökü render={<li />} ile liste öğesi yapın ve kartları bir <ul> içine koyun.

Klavye

Tuş	Davranış
Tab	Durağan kart odak almaz. Etkileşimli kartta önce Card.Link, sonra Card.Actions ve Card.Footer içindeki denetimler sırayla odak alır.
Enter	Card.Link odaktayken bağlantıyı açar.

Odak

Etkileşimli kartta odak Card.Link üzerindedir; halka bağlantının çevresinde değil, kartın çevresinde 2 px kalınlıkta ve 2 px uzaklıkta çizilir (has-focus-visible). Böylece odaklanan hedef ile tıklanan alan aynı görünür. Halka yalnızca klavye odağında görünür.

Ekran okuyucu

Örnek	Okunan
Başlıklı kart	“Kart başlığı, bölge” ve ardından başlık: “Kart başlığı, başlık seviye 3”
Etkileşimli kart	“Kart başlığı, bölge”; başlıkta “Kart başlığı, bağlantı”
Başlıksız kart	Bölge duyurulmaz; içerik akış içinde okunur

Bağlantının adı başlığın metnidir. Kartın geri kalanı (açıklama, durum) bağlantı adına eklenmez; böylece bağlantı listesinde kısa kalır. Bağlantıya açıklama gerekiyorsa aria-describedby ile açıklamaya bağlayın.

Kontrast

Metin her markada ve modda en az 4.5:1’dir; değerler bigbang ve fixture token çıktısından hesaplandı.

Çift	Açık mod	Koyu mod
color-text-default / color-surface-raised	16.71:1	15.44:1
color-text-subtle / color-surface-raised	9.07:1	9.23:1
color-text-default / color-surface-layer-1	15.44:1	15.44:1
color-text-subtle / color-surface-layer-1	8.38:1	9.23:1
color-focus-ring / color-surface-default (en düşük)	5.97:1	8.09:1

Kart kenarlığı (color-border-subtle, 1.22:1) süstür: kartı tanımak için gerekmez, içerik ve başlık kartı tanıtır (WCAG 1.4.11 kenarlığı zorunlu tutmaz).

WCAG 2.2

Ölçüt	Card nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Başlıklı kart section + aria-labelledby; başlık gerçek bir başlık.	level ile başlık sırasını koruyun; listedeki kartları <ul>/<li> yapın.
1.4.11 Metin dışı kontrast	Odak halkası en az 5.97:1. Kenarlık süstür.	Kartın durumunu kenarlık rengine yüklemeyin; Badge kullanın.
2.1.1 Klavye	Etkileşimli kartın tek hedefi bir bağlantıdır; Tab ve Enter ile çalışır.	Kökü onClick ile tıklanabilir yapmayın; Card.Link kullanın.
2.4.4 Bağlantı amacı	Bağlantı adı başlıktır.	Başlığı anlamlı yazın; “Daha fazla” yazmayın.
2.4.7 Odak görünür	Halka kartın çevresinde.	className ile outline kaldırmayın.
2.5.8 Hedef boyutu	Etkileşimli kartın hedefi kartın tamamı.	Kart içi işlemleri en az 24 px hedefle yerleştirin (Button sm 32 px).