Doğru anlamsal HTML öğelerini kullanarak klavye erişim 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 için)
Uygun anlamlara ve klavye desteğine sahip çeşitli yerleşik etkileşimli öğeler 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 kolayca göz ardı edebilirsiniz.
Keşfedilecek bazı örnek öğeleri aşağıda bulabilirsiniz. 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, ok tuşlarını ve ENTER ve SPACE gibi tuşları kullanarak bunların değerlerini değiştirebilirsiniz.
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 öğeleri kullanmanı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 olması için şu özelliklere sahip olması gerekir:
- Klavye aracılığıyla odaklanılabilir
- 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 bunların 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. button öğesine bir "tıklama" işleyici eklerseniz kullanıcı ENTER veya SPACE tuşlarına 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 örnekteki farkı karşılaştırın. iki öğeyi de kontrol etmek için TAB ve bunları tıklamayı denemek için
ENTER ve SPACE tuşlarını kullanın.
Mevcut sitenizde veya uygulamanızda div düğmeleri varsa bunları button öğeleriyle değiştirebilirsiniz. button, stil vermesi kolay ve erişilebilirlik açısından avantajlar sunar.
Bağlantılar ve düğmeler
Yaygın olarak kullanılan bir başka özellik 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. History API'yi kullanarak yeni içerik yükleyen ve URL'yi güncelleyen tek sayfalık web uygulamaları da buna 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 gibi sonuçlar alabileceklerini bilmelerine yardımcı olur.
YAPILACAKLAR: DevSite - Değerlendirme ve Kontrol Etme
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 şekilde adlandırılmış WTFForms projesi, daha sert yerleşik öğelerden bazılarının stillerini belirlemeye yönelik çeşitli teknikleri gösteren bir örnek stil sayfası içeriyor.
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 bulabilirsiniz.
Hiç sorun değil. tabindex kullanarak özel etkileşimli denetimlere nasıl klavye desteği ekleyeceğinizi öğrenmek için okumaya devam edin.