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
ENTER
veyaSPACE
tuş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.