Bir bağlantı düğme gibi görünüyorsa, yine de onu düğme olarak mı biçimlendirmeli?

Bağlantılar (<a> etiketi), başka bir sayfa veya kaynağa geçmek için kullanılır. Düğmeler (<button> etiketi) ise mevcut sayfada eylemler gerçekleştirir, örneğin bir formu göndermek veya JavaScript fonksiyonu çağırmak gibi.

Bir öğe bir eylem gerçekleştiriyorsa ama bağlantı gibi görünüyorsa, <button> olarak biçimlendirilmelidir. Tersine, bir öğe başka bir sayfaya gidiyorsa ama düğme gibi görünüyorsa, <a> kullanmak daha iyidir.

Erişilebilirlik açısından gerekçelendirme:

• Semantik: Ekran okuyucular ve diğer yardımcı teknolojiler, öğenin amacını anlamak için etiketlerin semantiğini kullanır. Düğme, etkinleştirilebilir etkileşimli bir öğe olarak algılanırken, bağlantı navigasyon içindir.
• Klavyeyle etkileşim: Varsayılan olarak, düğmeler Enter veya Space tuşlarıyla etkinleştirilir, bağlantılar sadece Enter ile. Klavye kullanıcısı bu davranışı bekler.
• Stil ve JavaScript: Doğru etiketleri kullanmak, stil ve olay işleyicilerinin uygulanmasını kolaylaştırır.

Bağlantı gibi görünen bir düğme örneği:

<a href="/page" class="button">Sayfaya git</a>

Bağlantıyı taklit eden bir düğme örneği (nadiren, ancak belirli UX çözümleri için mümkün):

<button type="button" onclick="doSomething()" class="link">İşlem yap</button>

Genel olarak, semantiğe uyun: navigasyon için bağlantılar, eylemler için düğmeler.