Bir butonun görevi basittir: bir eylemi başlatmak. Ama ona dokunduğumuzda ne olduğunu anlamak da isteriz. Bu küçük deneyde süs eklemek yerine, eylem ile cevap arasındaki ilişkiyi görünür kılacağız.
Sonunda elde edeceğimiz şey aşağıda. Önce birkaç kez kurcala; sonra nasıl yapıldığına bakalım.
01. Önce anlam, sonra hareket
Başlangıç noktamız bir div değil, gerçek bir button. Böylece tarayıcının klavye ve odak davranışlarını baştan alırız. Düğme bir form göndermediği için türünü de açıkça belirtelim.
<button class="tinker-button" type="button">
Biraz kurcala
<span aria-hidden="true">↗</span>
</button>
Ok, metnin küçük bir görsel eşlikçisi. Tek başına bir anlam taşımadığı için ekran okuyucunun onu tekrar okumasına gerek yok. Asıl eylem metnin içinde kalıyor.
02. Biraz ağırlık ekle
Sarı bir yüzey ve koyu bir gölgeyle küçük bir fiziksel nesne hissi verelim. Gölge bulanık değil; butonun altında ikinci bir katman gibi duruyor. Boyutları sabitlemek yerine iç boşluk ve minimum yükseklik kullanıyoruz.
.tinker-button {
display: inline-flex;
align-items: center;
gap: 1.5rem;
min-height: 52px;
padding: 14px 24px;
border: 1px solid #25213a;
background: #efb933;
color: #25213a;
font: inherit;
cursor: pointer;
box-shadow: 5px 5px 0 #25213a;
transition: transform 160ms, box-shadow 160ms;
}
Renk tek başına durumu anlatmıyor. Konum ve gölge de aynı bilgiyi taşıyor. Kendi projenin renklerini kullanırken bu ilişkiyi koruyabilirsin.
03. Dokununca cevap versin
Dokunma anında buton gölgesine yaklaşsın. Klavyeyle gelen ziyaretçi için de net bir odak çizgisi kalsın. Böylece deneyimin ana parçası fareyle üzerine gelmeye bağlı olmaz.
.tinker-button:active {
transform: translate(4px, 4px);
box-shadow: 1px 1px 0 #25213a;
}
.tinker-button:focus-visible {
outline: 3px solid #4857ed;
outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
.tinker-button { transition: none; }
}
Üstteki canlı örnekte tıklama sayacı da var. Bu sayaç, CSS örneğinden ayrı olarak React durumu kullanıyor; butonun gerçekten cevap verdiğini göstermek için eklendi.
04. Şimdi sıra sende
Gölgeyi iki piksele indir. Sonra tamamen kaldır. Hangisi bu butonun işine daha çok yarıyor? Cevap her arayüz için aynı olmak zorunda değil.
- Klavyeyle Tab kullanarak butona ulaşabiliyor musun?
- Enter ve boşluk tuşlarıyla eylemi başlatabiliyor musun?
- Dar bir ekranda metin hâlâ rahat okunuyor mu?
- Hareket azaldığında hangi butona bastığın anlaşılabiliyor mu?
Bu küçük kontrol listesi, deneyi kendi arayüzüne taşımadan önce iyi bir başlangıç. Aşağıya yaptığın değişikliği ya da takıldığın noktayı bırakabilirsin.
Yorumlar açılıyor…