Doğru semantik HTML öğelerini kullanarak klavye erişimi ihtiyaçlarınızın çoğunu veya tamamını karşılayabilirsiniz. Bu sayede tabindex ile uğraşmak için daha az zaman harcayacak ve daha mutlu kullanıcılara sahip olacaksınız.
Ü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ığı araçlar:
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çırmanız kolaydır.
Aşağıda, keşfedebileceğiniz bazı örnek öğeler verilmiştir. Farenizi kullanmak yerine klavyenizi kullanarak bu uygulamaları çalıştırmayı 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 oluşturmaya çalışmak çok zahmetli bir iş. Bu, mümkün olduğunda yerleşik öğelere bağlı kalmanın bir başka iyi nedenidir.
div yerine button kullanın
Erişilebilirlik için yaygın bir anti-pattern, div veya span gibi etkileşimli olmayan bir öğeye tıklama işleyici ekleyerek düğme olarak davranmaktır.
Ancak bir düğmenin erişilebilir olarak kabul edilebilmesi için:
- Klavyeyle odaklanılabilir olmalıdır.
- Destek devre dışı bırakılıyor
- İşlem gerçekleştirmek için
ENTERveyaSPACEtuşlarını destekleme - Ekran okuyucu tarafından düzgün bir şekilde duyurulmalıdır.
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* adlı kullanışlı bir özellik bulunur. Bir button öğesine "tıklama" işleyicisi eklerseniz bu işleyici, kullanıcı ENTER veya SPACE tuşuna bastığında ç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 örnekte farkı karşılaştırın. TAB ile kontrol edin ve ENTER ile SPACE tuşlarını kullanarak tıklamayı deneyin.
Mevcut sitenizde veya uygulamanızda div düğmeleri varsa bunları button öğeleriyle değiştirmeyi düşünebilirsiniz. button, stil vermesi kolay ve erişilebilirlik açısından avantajlar sunar.
Bağlantılar ve düğmeler
Yaygın anti-patternlerden biri 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, sentetik tıklama etkinleştirmenin bir biçimini destekler. Peki hangisini seçmelisiniz?
- Öğeyi tıkladığınızda sayfada bir işlem gerçekleştiriliyorsa
<button>simgesini kullanın. - Öğeyi tıklamak kullanıcıyı yeni bir sayfaya yönlendiriyorsa
<a>öğesini kullanın. Buna, yeni içerik yükleyen ve History API'yi kullanarak URL'yi güncelleyen tek sayfalık web uygulamaları da dahildir.
Bunun nedeni, ekran okuyucuların düğmeleri ve bağlantıları farklı şekilde duyurmasıdır. Doğru öğeyi kullanmak, ekran okuyucu kullanıcılarının ne tür bir sonuç alacağını bilmesine yardımcı olur.
TODO: DevSite - Think and Check assessment
Stil
Özellikle <input> gibi bazı yerleşik öğelerin stilini belirlemek zor olabilir.
Biraz akıllı CSS kullanarak bu sınırlamaların bazılarını aşabilirsiniz. (Eğlenceli bir isme sahip) WTFForms projesi, yerleşik öğelerin bazılarını biçimlendirmeyle ilgili çeşitli teknikleri gösteren bir örnek stil sayfası içerir.
Sonraki adımlar
Yerleşik HTML öğelerini kullanmak, sitenizin erişilebilirliğini önemli ölçüde artırabilir ve iş yükünüzü önemli ölçüde azaltabilir. Sitenizde sekme tuşunu kullanarak gezinmeyi deneyin ve klavye desteği olmayan kontrolleri arayın. Mümkünse bunları standartlaştırılmış HTML alternatifleriyle değiştirin.
Bazen HTML'de eşdeğeri olmayan bir öğe görebilirsiniz.
Hiç sorun değil. tabindex kullanarak özel etkileşimli denetimlere nasıl klavye desteği ekleyeceğinizi öğrenmek için okumaya devam edin.