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
veyaSPACE
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.
Bağlantılar ve düğmeler
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.