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

Rob Dodson

Doğru semantik HTML öğelerini kullanarak klavye erişim gereksinimlerinizin çoğunu veya tamamını karşılayabilirsiniz. Bu da tabindex ile uğraşmak için daha az zamanınız, daha fazla mutlu kullanıcı demektir!

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

Uygun semantik ve klavye desteğine sahip birçok yerleşik etkileşimli öğe vardır. Çoğu geliştiricinin kullandığı araçlar şunlardır:

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

Bu öğelerin sunduğu yerleşik klavye desteğini gözden kaçırabilirsiniz. Keşfedebileceğiniz bazı örnek öğeler aşağıda verilmiştir. Bunları çalıştırmak için farenizi kullanmak yerine klavyenizi kullanmayı deneyin. Kontroller arasında geçiş yapmak için TAB (veya SHIFT + TAB) tuşunu, değerlerini değiştirmek için de ok tuşlarını ve ENTER ve SPACE gibi tuşları kullanabilirsiniz.

Bir telefonunuz yanınızdaysa, bu yerleşik öğelerin birçok kez mobil cihazlarda benzersiz etkileşimlere sahip olduğunu görebilirsiniz. Bu mobil etkileşimleri yeniden üretmeye çalışmak çok emek istiyor. Bu, mümkün olduğunda yerleşik öğelere bağlı kalmanın bir başka iyi nedenidir.

div yerine button kullanın

Yaygın bir erişilebilirlik karşıt kalıbı, div veya span gibi etkileşimli olmayan bir öğeye tıklama işleyici ekleyerek düğme olarak ele alınmasıdır.

Ancak bir düğmenin erişilebilir olarak kabul edilmesi için şu özelliklere sahip olması gerekir:

  • Klavye ile odaklanabilirsiniz
  • Desteğin devre dışı bırakılması
  • Bir işlem gerçekleştirmek için ENTER veya SPACE tuşlarını destekleyin
  • Ekran okuyucu tarafından düzgün bir şekilde duyurulmamalıdır

div düğmesinde bunlardan hiçbiri yoktur. Bu nedenle, button öğesinin size ücretsiz olarak sunduğu şeyi kopyalamak için ek kod yazmanız gerekir.

Örneğin, button öğelerinde *sentetik tıklama etkinleştirme* adlı bir püf noktası vardır. button öğesine bir "tıklama" işleyici eklerseniz kullanıcı ENTER veya SPACE tuşlarına bastığında çalışır. Bir div düğmesi bu özelliğe sahip değildir. Bu nedenle, keydown etkinliğini dinlemek için ek kod yazmanız, anahtar kodunun ENTER veya SPACE olduğunu kontrol etmeniz ve ardından tıklama işleyicinizi çalıştırmanız gerekir. Ah! Bu, fazlasıyla ekstra iş yükü anlamına gelir.

Bu örnekteki farkı karşılaştırın. kontrol etmek için TAB ve bunları tıklamayı denemek için ENTER ile SPACE tuşlarını kullanın.

Mevcut sitenizde veya uygulamanızda div düğmeleri varsa bunları button öğeleriyle değiştirmeyi düşünebilirsiniz. button kolayca biçimlendirilebilir ve pek çok erişilebilirlik avantajı sağlar.

Yaygın olarak kullanılan bir başka karşıtlık da, 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?

  • Öğenin tıklanması sayfada bir işlem gerçekleştirirse <button> kullanın.
  • Öğe tıklandığında kullanıcı yeni bir sayfaya gitecekse <a> değerini kullanın. Yeni içerik yükleyen ve History API'sini kullanarak URL'yi güncelleyen tek sayfalık web uygulamaları buna dahildir.

Bunun nedeni, düğmelerin ve bağlantıların ekran okuyucular tarafından farklı duyurulmasıdır. Doğru öğenin kullanılması, ekran okuyucu kullanıcılarının hangi sonucu bekleyeceklerini bilmelerine yardımcı olur.

YAPILACAKLAR: DevSite - Think and Check and Check değerlendirmesi

Stil

Bazı yerleşik öğelerin (özellikle <input>) stilini belirlemek zor olabilir. CSS'yi biraz akıllıca kullanarak bu sınırlamalardan bazılarını aşabilirsiniz. WTFForms projesi, bazı sert yerleşik öğelerin stil özelliklerini ayarlamaya yönelik çeşitli teknikleri gösteren örnek bir stil sayfası içerir.

Sonraki adımlar

Yerleşik HTML öğelerini kullanmak, sitenizin erişilebilirliğini büyük ölçüde artırabilir ve iş yükünüzü önemli ölçüde azaltabilir. Sitenizde gezinmeyi deneyin ve klavye desteği olmayan denetimleri arayın. Mümkünse bunları standartlaştırılmış HTML alternatifleriyle değiştirin.

Bazen HTML'de karşılığı olmayan bir öğe bulabilirsiniz. Devam etmeyi tercih ettiğinizde de sorun yaşamazsınız! tabindex kullanarak özel etkileşimli denetimlere klavye desteğini nasıl ekleyeceğinizi öğrenmek için okumaya devam edin.