Heading

Rol ve anlam

Heading, level ile gerçek <h1>-<h6> öğesi çizer; rolü heading, düzeyi öğeden gelir. level zorunludur, çünkü başlık sırası sayfa yapısının parçasıdır (WCAG 1.3.1, 2.4.6).

Klavye

Tuş	Davranış
Tab	Heading odak almaz; Tab onun üzerinden geçer.

Ekran okuyucuların başlık gezinme tuşları (örneğin H) yerel <h1>-<h6> öğeleriyle çalışır.

Odak

Yok. Heading odak sırasında değildir ve odak halkası göstermez. Başlığa odak taşımanız gerekiyorsa (örneğin sayfa geçişinde) tabIndex={-1} ile programatik odak verin.

Ekran okuyucu

Örnek	Okunan
<Heading level={1}>Başlık örneği</Heading>	“Başlık örneği, başlık düzeyi 1”
<Heading level={2} size="sm">…</Heading>	Düzey 2; size okunmaz

Başlık sırası kuralları: sayfada tek h1; bir bölümün içinde düzey atlamayın (h2 sonra h4 olmaz); görünümü düzeyle değil size ile ayarlayın. Bileşen sırayı denetlemez; yapıyı ürün ekibi kurar.

Kontrast

Başlık rengi text-default token’ıdır. packages/tokens/test/contrast.test.mjs bu rengi surface-default, surface-layer-2 ve surface-sunken üzerinde her marka ve modda en az 4.5:1 için denetler. Başka zeminlerde ölçülmedi.

WCAG 2.2

Ölçüt	Heading nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Gerçek başlık öğesi çizer; level zorunludur.	Sırayı atlamadan kurun; tek h1 kullanın.
2.4.6 Başlıklar ve etiketler	Başlık metni çocuk olarak verilir ve kısaltılmaz.	Başlığı içeriği anlatacak biçimde yazın.
2.4.10 Bölüm başlıkları	Bölümleri başlıkla ayırmak için doğrudan kullanılır.	Uzun sayfalarda her bölüme başlık verin.
1.4.3 Kontrast (asgari)	text-default en az 4.5:1; token testi doğrular.	Test dışı zeminlerde kontrastı ölçün.
1.4.4 Metni yeniden boyutlandırma	Satır kırılır; metin yakınlaştırmayla büyür.	Sabit yükseklikli kapta başlığı kesmeyin.