ListItem

Rol ve anlam

• ListItem.List bir <ul> öğesidir ve role="list" taşır; liste stili sıfırlanınca bazı tarayıcıların listeyi düz metne çevirmesini önler. Satırlar <li> olur ve ekran okuyucu “3 öğe” diye duyurur. Sayfada birden çok liste varsa aria-label verin.
• ListItem liste dışında <div> çizer; yalnız <li> bir <ul> içinde geçerlidir.
• render verilirse <li> bağlantıyı ya da düğmeyi sarar; liste yapısı korunur. Bağlantının adı satırın metnidir: başlık, alt metin ve bilgi.
• selected etkileşimli satırda aria-current="true" verir. Durağan satırda seçili durum yalnızca görsel kalır; durağan satırı seçili göstermeyin.
• disabled etkileşimli satırda aria-disabled="true" ve tabindex="-1" verir; tıklama yok sayılır.
• Gezinti satırlarını <nav aria-label> içine koyun. Düğme satırını açma-kapama düğmesi olarak kullanmayın; aria-pressed verilmez.

Klavye

Tuş	Davranış
Tab	Durağan satır odak almaz. Etkileşimli satır tek bir durak olur; trailing içindeki ayrı düğme (durağan satırda) kendi durağıdır.
Enter	Bağlantı satırını açar; düğme satırını etkinleştirir.
Boşluk	Düğme satırını etkinleştirir. Bağlantı Boşluk’a yanıt vermez.

Odak

Odak, render ile verilen bağlantıda ya da düğmededir. Halka 2 px kalınlıkta, 2 px uzaklıkta çizilir ve yalnızca klavye odağında görünür. Seçili satırın çubuğu odak göstergesi değildir. Devre dışı satır odak almaz.

Ekran okuyucu

Örnek	Okunan
Bağlantı satırı	“Ayarlar Hesap ve görünüm, bağlantı”
Seçili bağlantı satırı	“Ayarlar Hesap ve görünüm, bağlantı, geçerli”
Durağan satır	“Liste öğesi İkincil metin” listede “3 öğeden 1.”
Devre dışı bağlantı	“Bildirimler, bağlantı, kullanılamıyor”

Bağlantı adı uzun olabilir. Başlık yeterliyse alt metni meta ya da ayrı bir durağan satıra taşıyın.

Kontrast

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

Çift	Açık mod	Koyu mod
color-text-default / color-surface-default	16.16:1	17.18:1
color-text-subtle / color-surface-default	8.77:1	10.27:1
color-text-default / color-surface-selected	15.05:1	13.98:1
color-text-subtle / color-surface-selected	8.17:1	8.36:1
color-border-selected / color-surface-selected (çubuk)	5.56:1	7.11:1
color-focus-ring / color-surface-selected	5.56:1	7.11:1
color-text-disabled / color-surface-default (devre dışı, muaf)	2.52:1	2.80:1

Ayırıcı çizgi (color-border-subtle, 1.22:1) süstür: satırlar boşlukla da ayrışır. Devre dışı metin WCAG 1.4.3’ün etkin olmayan bileşen muafiyetindedir.

WCAG 2.2

Ölçüt	ListItem nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Liste ul/li ve role="list"; seçili satır aria-current.	Birden çok listeyi aria-label ile adlandırın.
1.4.1 Renk kullanımı	Seçili durum yüzey, çubuk ve aria-current ile verilir.	Durağan satırda seçili durumu tek başına renkle anlatmayın.
1.4.3 Kontrast (en düşük)	Metin en az 8.17:1.	Renkleri className ile değiştirmeyin.
1.4.11 Metin dışı kontrast	Odak halkası ve çubuk en az 5.56:1.	-
2.1.1 Klavye	Etkileşimli satır bağlantı ya da düğmedir; Tab, Enter ve (düğmede) Boşluk çalışır.	Satırı onClick ile tıklanabilir yapmayın; render kullanın.
2.4.4 Bağlantı amacı	Bağlantı adı başlıktır.	Başlığı anlamlı yazın.
2.4.7 Odak görünür	Halka satırın çevresinde.	className ile outline kaldırmayın.
2.5.8 Hedef boyutu	sm satır en az 8 + 20 + 8 = 36 px yüksekliktedir.	trailing içindeki düğmeler en az 24 px olsun (Button sm 32 px).
4.1.2 Ad, rol, değer	Bağlantı ya da düğme kendi rolünü taşır; aria-current ve aria-disabled durumu verir.	render için gerçek a ya da button kullanın.