Temeller
Etkileşim durumları
Etkileşimli her öğe aynı durum listesini aynı biçimde gösterir. Bu sayfa durumları, öncelik sırasını, durum katmanını ve durumların koddaki öznitelik adlarını anlatır.
Durumlar
Bölüm başlığı “Durumlar”| Durum | Ne zaman | Görsel değişiklik | Kodda |
|---|---|---|---|
| Varsayılan | Öğe beklemede | Yok | |
| Üzerine gelme | İşaretçi öğenin üstünde | Arka plan bir adım koyulaşır; 110 ms | :hover, yalnızca işaretçili cihazlarda |
| Basılı | İşaretçi ya da tuş basılı | Bir adım daha koyulaşır, öğe %97’ye küçülür; 70 ms | :active |
| Odak | Klavyeyle gelindi | 2 px odak halkası, 2 px dışarıda | :focus-visible |
| Seçili | Öğe seçimde ya da etkin sayfada | surface-selected zemin, border-selected kenar ve renkten bağımsız bir işaret (onay ikonu, kalın yazı, gösterge çizgisi) |
aria-selected, aria-pressed, aria-current, data-selected |
| Devre dışı | Öğe şu an kullanılamaz | action-disabled renkleri, üzerine gelme ve basma yok |
disabled ya da aria-disabled, data-disabled |
| Yükleniyor | İş sürüyor | Gösterge döner, renkler aynı kalır, odak korunur | data-loading |
| Geçersiz | Değer kuralı karşılamıyor | border-danger kenar ve alanın altında hata metni |
aria-invalid, data-invalid |
| Salt okunur | Değer görünür ama değiştirilemez | Kenarlık hafifler; odak alır ve kopyalanabilir | readonly, data-readonly |
| Sürükleniyor | Öğe taşınıyor | Durum katmanı %16 ve üst katman gölgesi | data-dragging |
Öncelik sırası
Bölüm başlığı “Öncelik sırası”Birden fazla durum aynı anda olabilir. Görünüm şu sırayla belirlenir; üstteki alttakini bastırır:
- Devre dışı
- Yükleniyor
- Geçersiz
- Basılı
- Üzerine gelme
- Seçili
- Varsayılan
Odak halkası her durumla birlikte görünür ve hiçbir durum onu gizlemez. Devre dışı bir öğe yalnızca focusableWhenDisabled ile odak alır; bu durumda da halka görünür.
Durum katmanı
Bölüm başlığı “Durum katmanı”Kendi işlem renkleri olmayan öğeler (liste satırı, menü öğesi, tablo satırı) durumu bir katmanla gösterir: öğenin metin renginde, aşağıdaki saydamlıkta bir katman zeminin üstüne serilir. Böylece aynı kural her yüzeyde ve her modda çalışır.
| Token | Açık mod | Koyu mod |
|---|---|---|
--bigbang-state-layer-hovered | 0.080.080.08 | 0.080.080.08 |
--bigbang-state-layer-focused | 0.10.10.1 | 0.10.10.1 |
--bigbang-state-layer-pressed | 0.10.10.1 | 0.10.10.1 |
--bigbang-state-layer-dragged | 0.160.160.16 | 0.160.160.16 |
Button gibi kendi işlem token’ları olan öğeler katman yerine action-*-hovered ve action-*-pressed renklerini kullanır. Bkz. Renkler.
Hareket
Bölüm başlığı “Hareket”Durum geçişleri hareket token’larıyla yapılır ve yalnızca renk, saydamlık ve dönüşüm değişir.
| Geçiş | Token |
|---|---|
| Üzerine gelme | motion-hover-duration, motion-hover-easing |
| Basma | motion-press-duration, motion-press-scale |
| Bırakma | motion-release-duration |
| Odak | motion-focus-duration |
| Seçim | motion-selection-duration |
Azaltılmış harekette küçülme ve kayma kalkar, renk değişimi anında olur. Ayrıntılar Hareket sayfasındadır.
Dokunmatik ekranlar
Bölüm başlığı “Dokunmatik ekranlar”- Dokunmatik cihazda üzerine gelme durumu yoktur;
:hoverstilleri@media (hover: hover)içinde kalır, böylece dokunulan öğe “takılı” görünmez. - Basılı durumu parmak kalkana kadar sürer; parmak öğenin dışına kayarsa iş başlamaz.
- Uzun basma tek başına bir işi başlatmaz; aynı iş görünür bir kontrolle de yapılabilir.
Erişilebilirlik
Bölüm başlığı “Erişilebilirlik”- Seçili ve geçersiz durumları renkten başka bir işaret de taşır (WCAG 1.4.1).
- Durum göstergeleri (odak halkası, seçili kenarlık, geçersiz kenarlık) zemine karşı en az 3:1 kontrast taşır (WCAG 1.4.11).
- Devre dışı öğeler kontrast kuralının dışındadır; yine de nedeni yakındaki metinle açıklanır.
- Durum değişikliği ekran okuyucuya ARIA özniteliğiyle bildirilir:
aria-pressed,aria-expanded,aria-invalid. Yükleniyor durumuaria-busyyerine kibar bir durum bölgesiyle duyurulur. Bkz. Erişilebilirlik.
Yönergeler
Bölüm başlığı “Yönergeler”Seçimi yalnızca renkle göstermeyin
Bölüm başlığı “Seçimi yalnızca renkle göstermeyin”Seçenek bir
Seçenek iki