AppShell

Rol ve anlam

AppShell sayfaya yer işaretleri verir: kenar menüsündeki nav (“Ana menü”), header (banner) ve main. İlk odaklanan öğe “İçeriğe geç” bağlantısıdır ve main’e götürür; main tabIndex={-1} taşır, böylece odak oraya taşınabilir. Gruplar başlıklarına bağlı role="group"’tur. Geçerli sayfa aria-current="page" taşır. Daraltma düğmesi aria-expanded ve aria-controls ile kenar menüsüne bağlıdır. Açılır menü Base UI Dialog ile role="dialog" ve aria-modal taşır. Gösterge çubuğu ve ikonlar aria-hidden taşır.

Klavye

Tuş	Davranış
Tab	Sırasıyla içeriğe geç bağlantısı, kenar menüsü bağlantıları, daraltma düğmesi, üst çubuk ve içerik.
Enter	Bağlantıyı açar; içeriğe geç bağlantısı odağı main’e taşır.
Enter ya da Space	Grup başlığını, daraltma ve menü düğmelerini çalıştırır.
Escape	Açılır menüyü kapatır.
Ctrl+B ya da Cmd+B	Kenar menüsünü daraltır ya da genişletir; 1024 px’in altında açılır menüyü açar ya da kapatır. Daraltma düğmesi bunu aria-keyshortcuts ile duyurur.

Odak

Bağlantılarda 2 px color-focus-ring iç halkası yalnızca klavye odağında görünür. Açılır menü açılınca odak içine geçer ve orada kalır; kapanınca menü düğmesine döner. Daraltma odağı düğmede bırakır.

Ekran okuyucu

Örnek	Okunan
Geçerli sayfa	“Ana sayfa, bağlantı, geçerli sayfa”
Rozetli bağlantı	“Gelen kutusu 3, bağlantı”
Daraltma düğmesi	“Menüyü daralt, düğme, genişletilmiş”
Açılır menü	“Ana menü, iletişim kutusu”

Kontrast

Etiketler zeminde en az 4,5:1, ikonlar ve gösterge çubuğu en az 3:1 kontrast taşır. Geçerli sayfa yalnız renkle değil, gösterge çubuğu ve aria-current ile de bildirilir.

WCAG 2.2

Ölçüt	AppShell nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	nav, header, main ve group.	Sayfada başka main kullanmayın.
2.4.1 Blokları atlama	İçeriğe geç bağlantısı.	mainId’yi benzersiz tutun.
2.4.8 Konum	aria-current="page" ve gösterge.	Geçerli sayfayı her zaman işaretleyin.
2.4.11 Odak örtülmemeli (asgari)	Üst çubuk yapışkandır ama içerikte odağı örtmez.	İçerikte yapışkan öğe eklerken scroll-padding verin.
2.5.8 Hedef boyutu (asgari)	Bağlantılar ve daraltma düğmesi 32 px. Kenar şeridi fare için ek bir kısayoldur; ekran okuyucudan ve sekme sırasından gizlidir.	Daralmış menüde her bağlantıya ikon verin.
4.1.2 Ad, rol, değer	Daraltma ve menü düğmeleri adlıdır ve durum taşır.	Yönlendirici bağlantısı kullanırken render ile verin.