Bileşenler
PreviewCard
Üzerine gelinince ya da odaklanınca gideceği yerin kısa önizlemesini gösteren bağlantı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”PreviewCard, Base UI Preview Card üzerine kuruludur. Tetikleyici yerel bir <a href> bağlantısıdır. Kart ek görsel bilgidir: odak almaz ve sekme sırasına girmez, bu yüzden bilgi hedef sayfada da bulunmalıdır.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Bağlantıya odaklanır; kart gecikmeyle açılır. |
| Enter | Bağlantıyı izler. |
| Escape | Kartı kapatır. |
Bağlantı focus-visible ile 2 px dışına çizilen 2 px color-focus-ring odak çizgisi gösterir. Kart açılınca odak bağlantıda kalır.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Bağlantı | “iade politikası, bağlantı” |
Kontrast
Bölüm başlığı “Kontrast”Bağlantı metni 4.5:1 ve altı çizilidir; renk tek ayırt edici değildir. Kart metni yükseltilmiş yüzeyde 4.5:1 kontrastlıdır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | PreviewCard nasıl karşılar | Ürün ekibi ne yapar |
|---|---|---|
| 1.4.13 Üzerine gelince ya da odakta içerik | Kart Escape ile kapanır, üzerine gelinince açık kalır, kendiliğinden kapanmaz. | Kartta yalnızca ek bilgi gösterin. |
| 2.4.4 Bağlantı amacı | Bağlantı metni adı taşır. | Bağlantı metnini tek başına anlamlı yazın. |
| 2.1.1 Klavye | Odakta da açılır. | Kartta işlem koymayın. |