Klavyede kolay kazanımlar için semantik HTML kullanın

Rob Dodson

Doğru semantik HTML öğelerini kullanarak klavye erişimi ihtiyaçlarınızın çoğunu veya tamamını karşılayabilirsiniz. Böylece, tabindex ile daha az zaman harcayabilirsiniz, ve daha mutlu kullanıcılar!

Ücretsiz klavye desteği (ve daha iyi mobil deneyimler)

Uygun anlamlara ve klavye desteğine sahip çeşitli yerleşik etkileşimli öğeler vardır. Çoğu geliştiricinin kullandığı uygulamalar şunlardır:

Ayrıca, contenteditable özelliği bazen serbest biçimli metin girişi için kullanılır.

Bu öğelerin sunduğu yerleşik klavye desteğini kolayca göz ardı edebilirsiniz. Keşfedilecek bazı örnek öğeleri aşağıda bulabilirsiniz. çalıştırmak için klavyenizi kullanmayı deneyin. Kontroller arasında geçiş yapmak için TAB (veya SHIFT + TAB) tuşunu, değerlerini değiştirmek için ok tuşlarını ve ENTER ile SPACE gibi tuşları kullanabilirsiniz.

Elinizde bir telefon varsa bu yerleşik öğelerin mobil cihazlarda çoğu zaman benzersiz etkileşimlere sahip olduğunu görebilirsiniz. Bu mobil etkileşimleri kendiniz yeniden üretmeye çalışmak çok zahmetli bir iş. Sürekli iyileştirme yapmak için yerleşik öğelerden yararlanın.

div yerine button kullanın

Yaygın bir erişilebilirlik karşıt kalıbı, şunun gibi etkileşimsiz bir öğeyi ele almaktır: div veya span öğesine bir tıklama işleyici ekleyerek düğme olarak ayarlayabilirsiniz.

Ancak bir düğmenin erişilebilir olarak kabul edilmesi için:

  • Klavye aracılığıyla odaklanılabilir
  • Destek devre dışı bırakılıyor
  • İşlem gerçekleştirmek için ENTER veya SPACE tuşlarını destekleme
  • Ekran okuyucu tarafından düzgün bir şekilde duyurulma

div düğmesinde bu özelliklerin hiçbiri yoktur. Yani button öğesinin size ücretsiz olarak sunduğu özellikleri kopyalamak için ek kod yazmanız gerekir.

Örneğin, button öğelerinde *sentetik tıklama etkinleştirme* adı verilen kullanışlı bir özellik bulunur. Bir button öğesine "tıklama" işleyicisi eklerseniz kullanıcı ENTER veya SPACE tuşuna bastığında bu işleyici çalışır. div düğmesinde bu özellik bulunmaz. Bu nedenle, keydown etkinliğini dinlemek, tuş kodunun ENTER veya SPACE olduğunu kontrol etmek ve ardından tıklama işleyicinizi çalıştırmak için ek kod yazmanız gerekir. Ah! Bu çok fazla ek iş yükü demektir.

Bu örnekteki farkı karşılaştırın. TAB ile kontrol edin ve ENTER ile SPACE tuşlarını kullanarak öğeleri tıklamaya çalışın.

Mevcut sitenizde veya uygulamanızda div düğmeleri varsa şunu deneyin: bunları button öğeyle değiştirin. button, kolayca stilize edebilirsiniz erişilebilirlik kazandırdı!

Yaygın bir diğer anti-pattern de bağlantılara JavaScript davranışı ekleyerek bağlantıları düğme olarak ele almaktır.

<a href="#" onclick="// perform some action">

Hem düğmeler hem de bağlantılar bir tür sentetik tıklama etkinleştirmesini destekler. Peki hangisini seçmelisiniz?

  • Öğeyi tıkladığınızda sayfada bir işlem gerçekleştiriliyorsa <button> simgesini kullanın.
  • Öğeyi tıkladığınızda kullanıcı yeni bir sayfaya gidecekse, şunu kullanın: <a>. Buna, yeni içerik yükleyip güncellenen tek sayfalık web uygulamaları dahildir kullanılan URL'yi History API.

Bunun nedeni, düğme ve bağlantıların farklı şekillerde duyurulmasıdır. Ekran okuyucular. Doğru öğenin kullanılması, ekran okuyucu kullanıcılarının hangi öğenin beklentiler arasındadır.

TODO: DevSite - Think and Check assessment

Stil

Özellikle <input> gibi bazı yerleşik öğelerin stilini belirlemek zor olabilir. Biraz akıllı CSS'lerle bunların bir kısmını giderebilir, sınırlamaları vardır. Eğlenceli bir şekilde adlandırılmış WTFForms projesi bir örnek içeren stil sayfası ve zorlayıcı dizaynlara stil vermeye yönelik çeşitli teknikler yerleşik öğelerden yararlanın.

Sonraki adımlar

Yerleşik HTML öğelerinin kullanılması, sitenizin erişilebilirliğini büyük ölçüde artırabilir ve iş yükünüzü önemli ölçüde azaltır. Sitenizde sekme tuşunu kullanarak gezinmeyi deneyin ve klavye desteği olmayan kontrolleri arayın. Mümkünse bu ayarı devre dışı bırakın. için de kullanılabilir.

Bazen HTML'de eşdeğeri olmayan bir öğe bulabilirsiniz. Hiç sorun değil. tabindex kullanarak özel etkileşimli denetimlere nasıl klavye desteği ekleyeceğinizi öğrenmek için okumaya devam edin.