Neden?
Erişilebilirlik, sayfanın daha fazla kişi tarafından kullanılabilmesini sağlar.

Ne öğreneceğiz?
Bu derste alt, label, klavye kullanımı ve temel ARIA yaklaşımını öğreneceğiz.

Nasıl ilerleyeceğiz?
Önce kavramın amacını düşünün. Ardından aşağıda verilen örneği kendiniz yazın. Kodu kaydedin, tarayıcıda açın ve küçük bir değişiklik yaparak sonucu gözlemleyin.

 Öğrenme kuralı:  Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.

Derse başlamadan önce kendini yokla

• Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
  
• Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
  
• Uygulamayı kendi fikrimle nasıl değiştirebilirim?

Ders sonunda kontrol

• Kodu kendim, bakmadan tekrar yazabildim mi?
  
• Tarayıcıda sonucu test ettim mi?
  
• Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?

Ders hedefi
Erişilebilir/kullanılabilir HTML, içeriğin daha fazla kişi tarafından kullanılabilmesini sağlar. Temel yaklaşım, anlamlı HTML etiket ve elementlerini doğru kullanmaktır. Görsellerde anlamlı alt metni kullanmanızı tavsiye edilir resim eksik yüklendiğinde arama motorları bunu elementle ayırt eder:


Form alanlarını etiketleyin:


Bağlantı metni hedefi açıkça anlatmalıdır. Çoğu zaman Tıklayınız yerine şu kullanım daha iyidir:


Başlık seviyelerini sırayla kullanın (H1, H2, …) bir başlığı yalnızca yazı boyutunu değiştirmek için atlamayın. Renk kullanırken bilgiyi yalnızca renkle ifade etmeyin. Örneğin bir resmin yanında açıklayıcı metni de gösterin.

Klavye ile gezintiyi test etmek için fareyi bırakıp Tab tuşunu kullanın. Odaklanabilir elementlerin mantıklı bir sırada ilerlediğini kontrol edin.

ARIA öznitelikleri, HTML'nin tek başına yeterli olmadığı durumlarda yardımcı olabilir. Ancak gereksiz ARIA eklemek yerine öncelikle doğru semantik HTML kullanın: