Bileşenler
Slider
Bir tutamacı iz boyunca sürükleyerek ya da ok tuşlarıyla bir değer veya aralık seçme.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Her tutamaç içinde bir input type="range" taşır; rolü slider’dır ve etiketle adlandırılır. Aralıkta adlar “Aralık, alt değer” ve “Aralık, üst değer” olur. Değer aria-valuenow ile, biçimlenmiş metin aria-valuetext ile okunur. Açıklama aria-describedby ile bağlıdır. Balon ve işaretler aria-hidden taşır; görünür değer output öğesidir.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Tutamaca; aralıkta ikinci tutamaca. |
| Sol ve sağ, yukarı ve aşağı ok | Bir adım. |
| Shift + ok, Page Up, Page Down | largeStep kadar. |
| Home, End | En küçük ya da en büyük değer. |
Klavye odağı tutamaçta 2 px color-focus-ring halkası ve değer balonu gösterir.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Tek değer | “Düzey, kaydırıcı, 40” |
| Yüzde | “Düzey, kaydırıcı, %25” |
| Aralık | “Aralık, alt değer, kaydırıcı, 20” |
Kontrast
Bölüm başlığı “Kontrast”Dolu iz ve tutamaç kenarı zemine karşı 3:1 kontrast taşır. Değer metni 4,5:1.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Slider nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | Yerel aralık girişi, adlandırılmış. | — |
| 2.1.1 Klavye | Ok, sayfa ve Home/End tuşları. | — |
| 2.5.7 Sürükleme hareketleri | İze tıklamak değeri seçer; sürükleme zorunlu değil. | — |
| 2.5.8 Hedef boyutu (asgari) | 40 px dokunma alanı. | — |