Düğme Ne Zaman Düğme Değildir?

Diyelim ki, kullanıcının tıkladığı bir arayüzün parçası var ve bir şey oluyor. Bana bir düğme gibi geliyor ama şimdilik buna “tıklayan şey” diyelim. Biliyorum, bunun da bir düğme olduğundan eminsiniz: Yuvarlak ve hoş bir domates rengiyle öne çıkıyor, etkileşime girmeyi istiyor. Ama bir an için düşünelim. Uzun vadede zaman kazandıracak, söz veriyorum.

Ya bu tıkırdayan şeydeki metin "Daha fazlasını okuyun" ise ve onu tıklamak kullanıcıyı başka bir sayfadaki bir makaleye yönlendiriyorsa? Hmm. Peki ya açılır pencereyi kapatan altı çizili mavi bir “Kapat” kelimesi varsa? Sadece mavi ve altı çizili olduğu için bir bağlantı mı? Tabii ki değil.

Vay! Sadece bakarak bunun bir bağlantı mı yoksa bir düğme mi olduğunu anlamanın bir yolu yok gibi görünüyor. Çılgınca! Doğru elemanı seçmeden önce bu şeyin ne yaptığını anlamamız gerekiyor. Ama ya henüz ne yaptığını bilmiyorsak ya da sadece kafamız karıştıysa? Bizim için kullanışlı bir akış şeması var:

1. Bu bir düğme.
2. Değilse, o zaman bir bağlantıdır.
3. Bu kadar.

Peki, her şey bir düğme mi? Hayır, ancak tıklayabileceğiniz veya benzer şekilde etkileşime girebileceğiniz hemen hemen her öğe için her zaman bir düğmeyle başlayabilirsiniz. Başka bir sayfaya gitmek gibi bir şey eksikse, bunun yerine bir bağlantı kullanın. Ve hayır, bir işaretçi onu <a href> yapmak için bir neden değildir. Bunun için cursor: pointer .

Pekala, bu bir <button> düğmesi — bunda hemfikiriz. Onu şablonumuza koyalım ve tasarıma göre biçimlendirelim: biraz dolgu, yuvarlama, domates dolgusu, beyaz metin ve hatta bazı odak stilleri. Çok güzelsin.

 <button type="button" class="button"> Something </button> <style> .button { display: inline-block; padding: 10px 20px; border-radius: 20px; background-color: tomato; color: white; } .button:focus { outline: none; box-shadow: 0 0 0 5px #006AE3; } </style>

Bu uzun sürmedi. Acıktığın için onu çabucak inşa etmek ve biraz öğle yemeği yemek istedin. Tamam, nasıl göründüğüne bir bakalım ve devam edelim.

Aman Tanrım! Tarayıcıda bir sorun var. Bu düğme neden bu kadar çirkin? body açıkça 16px olarak ayarlamış olmamıza ve font-family bile yanlış olmasına rağmen metin küçüktür. Aptal bir sözde gölge ile yuvarlak kenarlık o kadar retro ki henüz bir trend bile değil.

Ahh, tarayıcının varsayılan stili. Dikkatlice geri almanız, hatta Normalize.css veya Reset.css eklemeniz gerekir… veya sadece bir <div> kullanıp unutabilirsiniz. Sorunları çabucak çözmek, size ödedikleri para değil mi? Açsın ve bu hiç yardımcı olmuyor. Ama sen bir profesyonelsin: Kendini topla ve düşün.

Zaten bir <button> ve bir <div> arasındaki fark nedir? Yerleşik bir <button> etkileşimli bir öğedir, yani etkileşime girilebilir. O derin. Tıklayabilirsiniz, bir klavye kullanarak ona odaklanabilirsiniz ve ayrıca ekran okuyuculara erişilebilir bir button rolü ileterek kullanıcıların bunun bir düğme olduğunu anlamasını mümkün kılar.

Etkileyici! Yalnızca HTML'nin <button> öğesinin farkında değilsiniz, aynı zamanda ARIA ve ekran okuyucu desteği hakkında da bir iki şey biliyorsunuz. Arayüzlerinizin ne kadar erişilebilir olduğunu test etmek için VoiceOver veya NVDA'yı bile denemiş olabilirsiniz.

Demek bir numara yapmaya karar verdin. Tarayıcının stilini bozmazsınız ve öğenin, ihtiyacı olabilecek kullanıcılar için uygun bir etkileşimli düğme gibi görünmesini sağlarsınız. Bu akıllıca!

 <div class="button" tabindex="0" role="button"> Something </div>

Artık sadece doğru görünmekle kalmıyor, tabindex="0" özelliği sayesinde klavye aracılığıyla odaklanabiliyor ve akıllıca role="button" eklediğiniz için ekran okuyucular buna uygun bir düğme gibi davranacak. Git taahhüt et && it o zaman! Bu şey için bazı ek görevler var, ancak stil ile işimiz bitti. Ne yanlış gidebilir ki? Öğle yemeği vakti. Harika hadi gidelim!

Bir saat sonra…

Güzel bir öğle yemeğiydi! Tıklama olayımıza geri dönelim. Devam etmeden önce bazı görevleri tamamlamamız gerekiyor. Bir bakalım… Butona tıklandığında bir doSomething fonksiyonu çağırmamız gerekiyor ve butonun tıklanabilir olmaması için butonu devre dışı bırakmanın bir yolu olmalı. Kulağa kolay geliyor. Bu butona bir olay dinleyicisi ekleyelim:

 <script> const buttons = document.querySelectorAll('.button'); [...buttons].forEach(button => { button.addEventListener('click', doSomething); }); function doSomething() { console.log('Something!'); } </script>

Tamamlandı. Kullanıcı artık masaüstünde fareyle tıklayıp dokunmatik ekranda parmağıyla dokunabilir. Bir tıklama olayı güvenilir bir şekilde tetiklenecek ve bir sürü Bir Şey göreceksiniz! konsolunuzda. Sıradaki görev ne?

Devam etmek! Klavye kullanıcıları için aynı şekilde çalıştığından emin olmamız gerekiyor. tabindex="0" olduğundan, odaklanabilir ve odaklandığında, kullanıcılar eklediğimiz her şeyi tetiklemek için boşluk çubuğuna veya "Enter" tuşuna basabilmelidir.

Bu nedenle, tüm anahtarları yakalamak için başka bir olay dinleyicisi eklememiz gerekiyor ve işlevimizi yalnızca belirli anahtarlar için tetikleyeceğiz. Tanrıya şükür, dokunmatik cihazlar tüm dokunuşları tıklamaya dönüştürecek kadar akıllı; aksi takdirde, bir sürü dokunma olayı da eklemek zorunda kalırdık.

 <script> const buttons = document.querySelectorAll('.button'); [...buttons].forEach(button => { button.addEventListener('click', doSomething); button.addEventListener('keyup', (event) => { if (event.key == 'Enter' || event.key == ' ') { doSomething(); } }); }); function doSomething() { console.log('Something!'); } </script>

Vay! Artık tıklama şeyimize klavyeden tamamen erişilebilir. Seninle gurur duyuyorum! Ve JavaScript gerçekten büyülü - onsuz ne yapardık?

Pekala, son görev nedir: "Düğmenin, görünüşünü ve davranışını uyuşmuş bir şeye dönüştüren devre dışı bırakılmış bir durumu olmalıdır." Hissiz? Sanırım bu gri ve etkileşime yanıt vermeyen bir şey anlamına geliyor. Tamam, BEM adlandırma kullanarak stil sayfasına bir durum ekleyelim.

 <div class="button button--disabled" tabindex="0" role="button"> Something </div> <style> .button--disabled { background-color: #9B9B9B; } </style> 

Bu bana rahat uyuşmuş görünüyor. Düğmenin devre dışı bırakılması gerektiğinde, onu gri yapmak için button--disabled değiştiricisini ekleyeceğiz. Ancak henüz yeterince uyuşuk değil: Hala hem bir işaretçi hem de klavyeden odaklanabilir ve tetiklenebilir.

Lanet olsun, bu zorlaşıyor.

Sadece bu değil, butona sekme sırasında erişilebilir olmamalı, yani tabindex niteliği orada olmamalıdır. Ve butonun devre dışı durumda olup olmadığını kontrol etmemiz ve ardından fonksiyonumuzu tetiklemeyi durdurmamız gerekiyor. Ayrıca, bu değiştirici dinamik olarak uygulanabilir. Öğeleri anında seçicilerle eşleştirmek ve stilleri uygulamak CSS için bir sorun olmasa da, bu düğme için diğer değişiklikleri tetiklemek için bir tür mutasyon gözlemcisine ihtiyacımız olabilir.

Doğruyu biliyorum? Bunun, bir işlevi tetikleyen ve devre dışı bırakılmış bir duruma sahip basit bir küçük düğme olacağını düşündük. Erişilebilirlik ve diğer şeylerle bunu düzeltmeye çalıştık ve şimdi bu tavşan deliğinin içindeyiz.

Biraz paket yemek alalım. Bunu bitirip düzgün bir şekilde test edene kadar akşam yemeği için evde olmayacağız. Lanet W3C! Neden hayatımızı kolaylaştırmaya çalışmıyorlar? Sanki bizi umursuyorlarmış gibi!

Aslına bakarsanız yapıyorlar…

Bu karmaşaya atlamadan önce birkaç adım geriye gidelim. Neden bunları <button> öğesini kullanarak yapmaya çalışmıyoruz? Sadece tarayıcının çirkin stilleri değil, bazı yararlı hileler de var. Oh, unutma type="button" - açılır pencerenin "Kapat" düğmesinin yanlışlıkla formu göndermesini istemezsiniz çünkü type="submit" varsayılan değerdir.

Görünüşe göre, <button> odaklandığında ve boşluk çubuğuna veya “Enter” tuşuna basıldığında, click olayını tetikleyecek, tıpkı mobil cihazların dokunma, okşama, yalama veya alabilecekleri başka bir şey aldıklarında yaptığı gibi bugün. Kodumuzda bir olay dinleyicisi daha az! Güzel.

 // A click is enough! button.addEventListener('click', doSomething);

Devre dışı durumuna gelince, disabled özniteliği <button> öğesi ve <fieldset> dahil tüm form öğeleri için kullanılabilir. Şaka yapmıyorum. Yalnızca <fieldset> üst öğesine tek bir öznitelik uygulayarak birlikte gruplandırılmış bir sürü girdiyi devre dışı bırakabileceğinizi biliyor muydunuz?

 <fieldset disabled> <legend>A bunch of numb inputs</legend> <p> <label> <input type="radio" name="option"> Of course it's a link </label> </p> <p> <label> <input type="radio" name="option"> Obviously, it's a button </label> </p> <p> <label> <input type="radio" name="option"> I just wanna go home </label> </p> <button type="button">Button</button> </fieldset>

Artık biliyorsun! Bu öznitelik yalnızca form öğelerindeki tüm olayları devre dışı bırakmakla kalmaz, aynı zamanda bunları sekme sırasından da kaldırır. Sorun çözüldü!

 <button disabled type="button" class="button"> Something </button>

Ama bekleyin, dahası var! Ayrıca, CSS'deki :disabled sözde sınıfını tetikler, yani stilleri bildirmek ve bunun yerine yerleşik dinamik değiştiriciyi kullanmak için BEM değiştiricisinden kurtulabiliriz.

 .button:disabled { background-color: #9B9B9B; }

Tarayıcının çirkin stillerine gelince, tek bir düğmeyi düzeltmek için Normalize.css'nin tamamını kullanmak zorunda değiliz. Bunu bir bilgelik kaynağı olarak kullanın: Aşağıdaki fazladan üç satır, <div> can sıkıcı farklılıkların çoğunu düzeltecektir. Daha fazlasına ihtiyacınız olursa, ilgili parçaları ondan kopyalayabilirsiniz.

 .button { font-size: 100%; font-family: inherit; border: none; }

Tamamlandı. Sonuçta HTML o kadar da kötü değil!

Ancak ara sıra sizi şaşırtıyorsa, yanıtlar için HTML spesifikasyonunu kontrol ettiğinizden emin olun. Yıllar içinde çok daha dostça bir hale geldi ve iyi kullanım ve erişilebilirlik örnekleriyle dolu. Ve elbette, iyi ol' HTML5 Doctor, <section> ve <article> öğeleri arasındaki farkı anlamak ve belge anahattının henüz bir şey olup olmadığını (gerçekte değil) kontrol etmek için hala güvenilir bir yerdir. Mozilla'nın HTML belgelerini de okuma olasılığınız yüksek ve bundan da pişman olmayacaksınız.

Bu görev artık tamamlandı! Sıradaki ne? Arama alanı olan bir açılır atlıkarınca takvimi mi? Aman! İyi şanslar. Ama unutmayın: <button> arkadaşınızdır!

SmashingMag'de Daha Fazla Okuma :

• Daha İyi Düğmeler Nasıl Tasarlanır
• Kapsayıcı Geçiş Düğmeleri Oluşturma
• Hayalet Düğme Tasarımı: Bu Gerçekten Hala Bir Şey mi (Ve Neden)?
• Tasarım Modelleri: Kuralları İhlal Ederken Tamamdır