Bu kılavuz, hem bağlantı hem de düğme öğeleri için erişilebilir, genişletilebilir bir düğme görünümü tasarlamanın ayrıntılarını keşfedecektir.
Kapsanan konular şunları içerir:
- için stilleri sıfırla
avebutton - görüntüleme, görsel, boyut ve metin stilleri
- erişilebilir stil konuları
- yaygın senaryolar için genişletilmiş stiller
Oh, düğme (veya bir bağlantı mı?). Görüntü sprite’ları aracılığıyla ikinci bir görüntünün yüklenmesini beklemekten fareyle üzerine gelme gecikmesinin olduğu günlerden bu yana düğmeyle savaştım ve sonra son derece rahatladım. border-radius, box-shadow ve gradyanlar olay yerine geldi.
Ama… düğme tasarımını çok ileri götürdük ve yol boyunca bir yerlerde, erişilebilir bir düğme (veya bağlantı) şöyle dursun, düğme olmanın gerçekten ne anlama geldiğini tamamen gözden kaçırdık.
DUR! Git bu harika makaleyi oku: Modern Web Uygulamalarında Bağlantılar ve Düğmeler ne zaman kullanmanın uygun olduğunu anlamak için
akarşıbutton
Her ikisi için de görsel olarak bir düğme görünümü oluşturmak için hangi özelliklerin gerekli olduğuna bakacağız. a ve buttonve erişilebilir bir şekilde oluşturulduklarından ve kullanıldıklarından emin olmak için gereken ek ayrıntılar.
İşte temel – Chrome’da oluşturulan yerel tarayıcı stilleri, şu ana kadarki tek değişiklik bağlantının gövdede ayarlanan özel yazı tipini devralmasıdır ve ben font-size ilave olarak:
Evde birlikte oynuyorsanız HTML:
<a href="javascript:;">Button Link</a>
<button type="button">Real Button</button>ben kullandım javascript:; için dize href değeri, navigasyonu tetiklemeden durumları test edebilmemiz için. Benzer şekilde, bu düğme bir form göndermek için olmadığından, açık bir türe ihtiyaç duyar. button bir alma isteğinin tetiklenmesini ve sayfanın yeniden yüklenmesini önlemek için.
Not: Genellikle normalleştirmek CodePens’e sıfırlayın, ancak bu ders için düğmeler ve bağlantılar için sıfırlamak için neyin gerekli olduğunu öğrenmek için sıfırdan başlıyoruz. Kullanımı normalleştirmek veya diğer popüler sıfırlamalar, bunlardan bazılarını sizin için yapar.
İlk olarak, sınıfını ekleyeceğiz button sadece bu ders için stillerin nerede uygulandığını vurgulamak için hem bağlantıya hem de düğmeye basın.
<a href="javascript:;" class="button">Button Link</a>
<button type="button" class="button">Real Button</button>box-sizing
Stillerinizin aşağıdaki sıfırlamayı içerdiğinden emin olun – genel olarak istemiyorsanız (yapmalısınız) düğme sınıfımıza dahil edebilirsiniz.
* {
box-sizing: border-box;
}Özetle, bu kural kenarlıklar ve dolgu gibi şeylerin beklenen öğe boyutunu genişletmesini engeller (ör. %25 genişlik, %25 + kenarlık genişliği + dolgu değil %25 kalır).
a
Bağlantı için yapmamız gereken yalnızca bir sıfırlama var:
a.button {
text-decoration: none;
}Bu sadece alt çizgiyi kaldırır.
button
Ardından, düğmeyi sıfırlamak için gereken birkaç kuralımız daha var:
button.button {
border: none;
background-color: transparent;
font-family: inherit;
padding: 0;
cursor: pointer;@media screen and (-ms-high-contrast: active) {
border: 2px solid currentcolor;
}
}
bazı farklılıklar vardır display tarayıcılar arasında da değer, ancak kısa süre içinde bunu benzersiz bir seçeneğe dönüştüreceğiz.
Bu sıfırlama stilleriyle artık şu görünüme sahibiz:
Sayesinde @overflowhidden Windows Yüksek Karşıtlık modu etkinleştirilmiş kullanıcılar için algılanabilir bir düğme kenarlığı sağlamaya yönelik bir çözüm sağlamak için.
Birçok senaryoda en iyi sonucu bulduğum şey display: inline-flex bu bize flexbox’ın içerik hizalama gücünü verir, ancak içindeki DOM’de bulunur inline-block davranış.
a.button,
button.button {
display: inline-flex;
align-items: center;
justify-content: center;
}Gelecekte simgeler eklediğinizde veya genişlik kısıtlamaları uyguladığınızda, esnek hizalama kullanışlı olur.
Ardından, kesinlikle zevkinize göre ayarlayabileceğiniz bazı standart görsel stiller uygulayacağız. Bu, en esnek stil grubudur ve dışarıda bırakabilirsiniz. box-shadow ve/veya border-radius.
$btnColor: #3e68ff;a.button,
button.button {
background-color: $btnColor;
color: #fff;
border-radius: 8px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
}
Şimdi bağlantımız ve düğmemiz daha çok benzemeye başlıyor:
İlk düğme stilleri oluşturulurken dahil edilen iki kontrast düzeyi vardır:
- Düğme arka plan rengi ile görüntülendiği arka plan arasında en az 3:1
- Düğme metni ile düğme arka planı arasında en az 4,5:1 (18,66 pikselden kalın veya 24 pikselden küçük metinler için) veya 3:1 (bu ölçülerden daha büyük metinler için)
Düğme renklerinin kontrast ilişkileriyle nasıl ilişkili olduğunu göstermek için oluşturduğum bir infografik:
Beyaz bir sayfa arka planı varsayarsak, düğme rengi seçimimiz 4.54:1 ile geçer.
Erişilebilir düğme renkleri oluşturmak için ButtonBuddy’yi deneyin. Oluşturduğum bu web uygulaması, tüm kontrast vektörlerini düğme renk paletinizde elde etmenize yardımcı olacak.
İlerleme ekran görüntüsünü gördüğünüzde gözden kaçırmış olabileceğiniz bir özelliği “Görsel” kategorizasyonu altında kasıtlı olarak dışarıda bıraktık: padding.
Dan beri padding nın parçasıdır box-modelbeden kısmına bıraktık.
Boyut değerlerini uygulayalım ve sonra tartışalım:
a.button,
button.button {
padding: 0.25em 0.75em;
min-width: 10ch;
min-height: 44px;
}Başvuruyoruz padding kullanarak em dolgunun uygulanan ile orantılı olarak yeniden boyutlandırılmasına izin veren bir tercih olan birimler font-size.
Ardından, bir min-width kullanmak ch genişliğine kabaca eşit olan birim, 0 Uygulanan yazı tipinin karakteri ve font-size. Bu öneri görsel bir ritim korkuluğudur. Bir kısa ve bir uzun etiketli iki yan yana düğmeniz olduğu senaryosunu düşünün, ör. “Paylaş” ve “Daha Fazla Bilgi Edinin”. Olmadan min-width“Paylaş” düğmesi “Daha Fazla Bilgi” den aniden daha kısa olacaktır.
bu min-height için WCAG 2.1 başarı kriterlerini karşılamak için dokunmatik cihazlarda düğmenin yeterince büyük bir hedef olmasını sağlamaya dayanır. 2.5.5 – Hedef Boyutu.
Stiller bir araya gelmeye başlıyor, ancak henüz işimiz bitmedi:
Son ilerleme ekran görüntüsüne göre, metin stillerini atlamak isteyebilirsiniz.
Ancak, görünüm alanı boyutunu küçülttüğümüzde ve duyarlı davranışı tetiklediğimizde ne olduğuna bakın:
Gördüğünüz gibi, farklı hizalamamız var ve line-height de ayarlanabiliyordu.
Sıfırlama stillerinde metin hizalamasını düzeltmeyi kasıtlı olarak atladım, bu yüzden şimdi her ikisinin de ortalandığından emin olacağız. Ardından satır yüksekliğini de azaltabiliriz – bunun kullanılan yazı tipine bağlı olarak ayarlanması gerekebilir.
a.button,
button.button {
text-align: center;
line-height: 1.1;
}Tamam, harika görünüyorsun!
Şu anda, bir kullanıcının düğmelerle etkileşime girmeye çalışırken aldığı tek görsel geri bildirim, imlecin “işaretçi” varyasyonuna değişmesidir.
Mevcut olduğundan emin olmamız gereken üç durum var.
Genelde en çok dikkat çeken hoverbu yüzden oradan başlayacağız.
Fareyle üzerine gelindiğinde yapılan tipik bir güncelleme, arka plan rengini değiştirmektir. 4.5’e oldukça yakın olduğumuz için rengi koyulaştırmak isteyeceğiz.
Bu rengi bizim için hesaplamak için Sass’tan yararlanabiliriz. $btnColor “Görsel” bölümünde tanımladığımız değişken:
a.button,
button.button {
&:hover {
background-color: scale-color($btnColor, $lightness: -20%);
}
}Etkisi biraz sarsıcı, ancak bunu yumuşatmak için uygun bir şekilde adlandırılmış başka bir modern CSS aracımız var. transition. bu transition mülkün dışına eklenmesi gerekecek hover kuralı, hem “üstü” hem de “dışarı” için geçerli olacak şekilde.
a.button,
button.button {transition: 220ms all ease-in-out;
}
Klavye kullanıcıları için, focus durum açıkça ayırt edilebilir.
Varsayılan olarak, tarayıcılar odak kazanan öğelere bir tür “halo” efekti uygular. Kötü bir uygulama, yalnızca outline bu etkiyi yaratan ve onu değiştiremeyen özellik.
Anahattı, kullanan özel bir odak durumuyla değiştireceğiz. box-shadow. Beğenmek outline, box-shadow genel öğe boyutunu değiştirmez, böylece düzen kaymalarına neden olmaz. Ve zaten uyguladığımız için transition, box-shadow Bunu, ekstra dikkat çekici bir etki için kullanmak için de devralacaktır.
a.button,
button.button {&:focus {
outline-style: solid;
outline-color: transparent;
box-shadow: 0 0 0 4px scale-color($btnColor, $lightness: -40%);
}
}
Bir kez daha, kullandık scale-color işlevi, bu sefer olduğundan biraz daha koyu gitmek için hover renk. Bunun nedeni, bir düğmenin her iki hover ve focus aynı anda devletler.
Sayesinde @overflowhidden algılanabilir bir çözüm sağlamak için :focus Windows Yüksek Karşıtlık modunun etkin olduğu kullanıcılar için durum.
Son olarak, özellikle “gerçek düğme” için, bir :active devlet tarzı.
Bağlantılar için bu, bir tıklamanın/dokunmanın “aşağı” sırasında kısa bir süre için görünür.
Düğmeler için, bu, süresiz olarak basılı tutulabilen boşluk tuşuyla bir düğmenin tetiklenebilmesi koşuluyla daha uzun süre gösterilebilir.
ekleyeceğiz :active bizim mevcut :hover stil:
&:hover,
&:active {
background-color: scale-color($btnColor, $lightness: -20%);
}Ana hatlarıyla belirtilen (“hayalet”) düğmelerin konusu farklı bir güne ait bir konudur, ancak hızlı bir şekilde ekleyeceğimiz iki varyasyon vardır.
BEM formatını kullanarak, button--small yazı tipi boyutunu küçültmek için sınıf. Dolguyu ayarladığımızdan beri em, bu orantılı olarak yeniden boyutlandırılacaktır. Ve bizim min-height düğmenin yeterince büyük bir dokunma hedefi olarak kalmasını sağlar.
&--small {
font-size: 1.15rem;
}istediğin zamanlar olabilir block satır içi yerine davranış, bu yüzden ekleyeceğiz width: 100% değiştirmek yerine bu seçeneğe izin vermek için display prop, düğme içeriğinde hala esnek hizalama istediğimizden:
&--block {
width: 100%;
}Gotcha: Esnek Sütunların Çocuğu
Düğmenin esnek bir sütunun çocuğu olduğu senaryosu göz önüne alındığında, düğme olmadan bile tam genişliğe genişlediğinde hazırlıksız yakalanabilirsiniz. button--block sınıf.
Bu senaryoya karşı geleceğe yönelik olarak şunları ekleyebilirsiniz: align-self: start temel düğme stillerine dönüştürün veya esnek/ızgara hizalama özelliği değerlerinin her biri için yardımcı program stilleri oluşturun: start, centerve end.
Stephanie Eckles (@5t3ph)
