Chart

Rol ve anlam

• Chart bir <figure> öğesidir ve <figcaption> ile aria-labelledby üzerinden adlandırılır.
• Çizim role="img" taşır. Adı başlık ile otomatik üretilen özet cümledir: tür, seri sayısı, kategori sayısı ve en yüksek değer (seri ve kategorisiyle). Örnek: “Aylık değerler. Çizgi grafik. Seri sayısı: 2. Kategori sayısı: 6. En yüksek değer: 30 (Birinci seri, Mayıs).”
• hideValues iken özette en yüksek değer yer almaz.
• description hem şekle hem çizime aria-describedby ile bağlanır.
• ECharts aria bileşeni açıktır ve çubuk ile halka grafiklerde desen (decal) çizer; ECharts’ın kendi etiketi kapalıdır, ad Chart’tan gelir.
• Her grafiğin anlamsal bir tablosu vardır: <caption> başlıktır, kategoriler th scope="row", seriler th scope="col".
• Yükleniyor durumunda şekil aria-busy olur ve “Yükleniyor” okunur.

Klavye

Tuş	Davranış
Tab	Tek durak tablo düğmesidir (table="toggle"). Grafik noktaları odak almaz.
Enter, Boşluk	Düğmeyi etkinleştirir: grafik ile tablo arasında geçiş yapar.

Noktalar klavyeyle odaklanmaz çünkü tüm veri tabloda vardır. İpucu yalnızca fareyle açılır; klavye ve ekran okuyucu kullanıcıları için eşdeğeri tablodur.

Odak

Odaklanabilen tek öğe tablo düğmesidir ve Button’un 2 px halkasını kullanır. Düğme aria-expanded ile durumunu, aria-controls ile tabloyu bildirir. table="visible" ya da "hidden" iken sayfada odak durağı yoktur.

Ekran okuyucu

Örnek	Okunan
Grafik	“Aylık değerler, şekil”; “Aylık değerler. Çizgi grafik. Seri sayısı: 2. Kategori sayısı: 6. En yüksek değer: 30 (Birinci seri, Mayıs)., resim”
Tablo düğmesi	“Tablo olarak göster, düğme, daraltılmış”
Tablo açıkken	“Grafik olarak göster, düğme, genişletilmiş”; ardından tablo, başlık hücreleri ve değerler
Küçük eğilim çizgisi, label ile	“Son altı ayın eğilimi, resim”
Küçük eğilim çizgisi, label olmadan	Okunmaz

Kontrast

Seri renkleri, metin olmayan nesne olarak yüzeye karşı en az 3:1 olmalıdır (WCAG 1.4.11). Değerler bigbang markası için color-surface-raised üzerinde hesaplandı; fixture markasında en düşük değerler 3.17:1 (açık) ve 3.32:1 (koyu).

Seri	Açık mod	Koyu mod
chart-series-1	4.45:1	3.75:1
chart-series-2	4.89:1	3.42:1
chart-series-3	4.64:1	3.61:1
chart-series-4	5.03:1	3.32:1
chart-series-5	4.26:1	3.92:1
chart-series-6	4.72:1	3.54:1
chart-series-7	4.78:1	3.49:1
chart-series-8 (en düşük, açık mod)	3.07:1	5.44:1
color-text-subtle (eksen yazısı)	9.07:1	9.23:1
color-text-default (ipucu)	16.71:1	15.44:1

Izgara çizgileri (color-border-subtle, 1.26:1) süstür; veri değerleri tabloda da bulunur.

Renk tek başına anlam taşımaz: çizgi serileri farklı sembol ve çizgi biçimi (düz, kesik, noktalı), çubuk ve halka serileri desen (decal) kullanır; seri adları gösterge ve tabloda yazılıdır.

WCAG 2.2

Ölçüt	Chart nasıl karşılar	Ürün ekibi ne yapmalı
1.1.1 Metin dışı içerik	Çizim özet cümleyle adlandırılır; tüm veri tabloda.	Anlamlı bir title ve gerekirse description yazın.
1.3.1 Bilgi ve ilişkiler	figure/figcaption; tabloda caption, th scope.	table="hidden" kullanıyorsanız veriyi başka yolla sunun.
1.4.1 Renk kullanımı	Sembol, çizgi biçimi ve desen rengin yanında.	Metinde “kırmızı çizgi” gibi renge bağlı ifadeler kullanmayın.
1.4.11 Metin dışı kontrast	Seri renkleri yüzeye karşı en az 3.07:1.	Seri renklerini kendiniz vermeyin.
1.4.13 Üzerine gelince içerik	İpucu grafik kabında kalır; aynı veri tabloda.	-
2.1.1 Klavye	Tüm işlev tablo düğmesi ve tablo ile klavyeyle kullanılır.	Tabloyu gizlemeyin.
2.3.3 Hareket	Azaltılmış harekette animasyon kapalı.	-
4.1.2 Ad, rol, değer	Düğme aria-expanded ve aria-controls taşır.	-