Icon

Rol ve anlam

label verilmezse ikon süstür: aria-hidden="true" taşır ve ekran okuyucu onu atlar. label verilirse role="img" ve aria-label alır; ekran okuyucu bunu bir görsel olarak okur.

Button içindeki ikon süs kalır; adı kontrol taşır.

Klavye

Tuş	Davranış
Tab	Icon odak almaz; Tab onun üzerinden geçer. Icon’un kendine ait tuşu yoktur.

Odak

Yok. Icon odak sırasında değildir ve odak halkası göstermez. SVG’ye focusable="false" verilir; eski tarayıcılarda da odak almaz.

Ekran okuyucu

Örnek	Okunan
<Icon name="check" />	Hiçbir şey okunmaz
<Icon name="triangle-alert" label="Uyarı" />	“Uyarı, görsel”
<Button startIcon={<Icon name="download" size="inherit" />}>İndir</Button>	“İndir, düğme” (ikon okunmaz)

label kısa tutulmalı ve ikonun anlamını söylemelidir. Yanında zaten aynı anlamı veren metin varsa label vermeyin; aynı bilgi iki kez okunur.

Kontrast

default, subtle, danger, success, warning ve info tonları, yüzeylerine karşı en az 3:1 kontrast taşır; token paketindeki test bu çiftleri her derlemede, her markada ve modda denetler. Test color-icon-default için sayfa zeminini (color-surface-default), diğerleri için yükseltilmiş yüzeyi (color-surface-raised) kullanır.

brand, inverse ve disabled tonları bu testin dışındadır. disabled yalnızca devre dışı durumlar içindir ve kontrast şartından muaftır; brand ve inverse için kullanıldıkları yüzeyle kontrastı ürün ekibi denetlemelidir.

WCAG 2.2

Ölçüt	Icon nasıl karşılar	Ürün ekibi ne yapmalı
1.1.1 Metin dışı içerik	Süs ikon gizlenir; label ile anlamlı ikon adlandırılır.	Tek başına bilgi taşıyan her ikona label verin.
1.3.1 Bilgi ve ilişkiler	role="img" anlamlı ikonu görsel olarak bildirir.	Kontrol içindeki ikona label vermeyin; adı kontrol taşısın.
1.4.1 Renk kullanımı	Ton yalnızca destektir.	Durumu yalnızca ikon rengiyle anlatmayın; metin ya da label ekleyin.
1.4.11 Metin dışı kontrast	Altı ton, yüzeyine karşı 3:1 ile test edilir.	brand, inverse ve özel yüzeylerde kontrastı denetleyin.
4.1.2 Ad, rol, değer	label varsa ad verilir; yoksa ikon ağaçtan çıkar.	Tıklanabilir ikon için IconButton kullanın.