Materi
Satu komponen punya beberapa keadaan, dan setiap keadaan butuh tampilannya sendiri. Halaman komponen tombol USWDS memperlihatkan keadaan default, hover, active, focus, dan disabled untuk setiap varian warnanya, dan meminta tombol terlihat bisa dipilih dengan variasi warna yang membedakan keadaan diam, hover, dan active. USWDS juga meminta tombol menampilkan keadaan fokus yang terlihat saat pengguna berpindah dengan Tab.
| Keadaan | Kapan terjadi (MDN) | Pseudo-kelas CSS |
|---|---|---|
| Hover | Penunjuk tetikus berada di atas elemen tanpa menekan tombol | :hover |
| Active | Elemen sedang diaktifkan, misalnya tombol tetikus utama sedang ditekan | :active |
| Focus | Elemen menerima fokus; :focus-visible cocok saat peramban menilai fokus perlu ditampilkan, misalnya lewat papan ketik | :focus-visible |
| Disabled | Elemen tidak bisa diaktifkan dan tidak bisa menerima fokus | :disabled |
Urutan aturan menentukan hasil. MDN menjelaskan bahwa gaya :active ditimpa pseudo-kelas tautan yang ditulis sesudahnya dengan spesifisitas setara, jadi aturan :active ditulis setelah :hover (urutan LVHA: :link, :visited, :hover, :active). MDN juga mencatat bahwa :hover bermasalah di layar sentuh: tergantung peramban, ia tidak pernah cocok, cocok sesaat, atau terus cocok sampai elemen lain disentuh. Informasi yang hanya muncul saat hover tidak sampai ke pengguna ponsel.
Keadaan disabled paling sering disalahpahami. Menurut MDN, atribut disabled membuat kontrol tidak bisa diubah, tidak bisa difokus, dan nilainya tidak ikut terkirim bersama formulir. GOV.UK menulis bahwa tombol disabled berkontras rendah dan bisa membingungkan sebagian pengguna, sehingga dihindari kecuali riset menunjukkan antarmukanya jadi lebih mudah dipahami. USWDS menambahkan: input readonly tetap bisa difokus dan nilainya terkirim, sehingga dipakai bila pengguna perlu meninjau atau menyalin nilainya.
.tautan-jadwal:hover { text-decoration-thickness: 3px; }
.tautan-jadwal:active { color: #1a4480; }
.tautan-jadwal:focus-visible { outline: 3px solid #2491ff; }
