Erişilebilirlik Temelleri

Ders 30/45 · 6 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda bir sayfanın herkes tarafından kullanılabilmesi için temel kontrolleri yapabileceksiniz.

Erişilebilirlik kimin için?

Web sitelerini herkes aynı şekilde kullanmaz:

Görme engelli kişiler sayfayı ekran okuyucu ile dinler.
Bazı kişiler fare kullanamaz, sayfayı yalnızca klavye ile gezer.
Az gören kişiler yazıları büyütür.
İşitme engelli kişiler videolarda altyazıya ihtiyaç duyar.
Yavaş internet veya eski telefon kullananlar da vardır.

İyi haber: Doğru HTML yazmak, erişilebilirlik işinin büyük kısmını çözer. Bu derste çoğunu zaten öğrendiniz.

Kontrol listesi

html etiketinde doğru lang değeri var mı?
Başlık seviyeleri sırayla mı ilerliyor?
Bütün resimlerin uygun bir alt metni var mı?
Her form alanının bir label etiketi var mı?
Bağlantı metinleri nereye gittiğini anlatıyor mu?
Tablolarda th ve scope kullanıldı mı?
Videolarda altyazı var mı?
iframe etiketlerinin title değeri var mı?

Tab testi

Sayfanızı açın, fareyi bırakın ve Tab tuşuyla ilerleyin. Shift + Tab geri gider, Enter bağlantıları ve düğmeleri çalıştırır.

Sayfadaki her bağlantıya ve düğmeye ulaşabiliyor musunuz? Ulaşamıyorsanız klavye kullananlar da ulaşamıyordur.

Sahte düğmeler

Aşağıdaki iki kod ekranda benzer görünebilir ama aynı değildir:

<button type="button">Kaydet</button>

button gerçek bir düğmedir. Tab ile ulaşılır, Enter ve Boşluk tuşlarıyla çalışır, ekran okuyucu “düğme” olarak okur.

Aynı işi <div onclick="kaydet()">Kaydet</div> ile yaparsanız bunların hiçbiri olmaz. Tıklanabilir bir şey yapacaksanız button veya a kullanın.

ARIA nedir?

aria-label gibi nitelikler ekran okuyuculara ek bilgi verir. ARIA kullanımının ilk kuralı şudur: İşi yapan gerçek bir HTML etiketi varsa ARIA kullanmayın, o etiketi kullanın.

Sık yapılan hatalar

Bilgiyi yalnızca renkle vermek. “Kırmızı alanları doldurun” demek, renkleri ayırt edemeyenlere bir şey anlatmaz. Alanın yanına yazıyla da belirtin.

Yazıyı resmin içine koymak. Resimdeki yazı seçilemez, büyütülünce bozulur ve ekran okuyucu tarafından okunamaz.

Soru 1

Tıklanınca kaydetme işlemi yapan bir eleman için hangisi doğrudur?

<div> :: div klavyeyle kullanılamaz.
<span> :: span klavyeyle kullanılamaz.
<button> :: Doğru.

Soru 2

Sayfanızın klavyeyle kullanılabildiğini en kolay nasıl kontrol edersiniz?

Sayfayı yenileyerek :: Yenilemek klavye kullanımını test etmez.
Tab tuşuyla sayfada gezerek :: Doğru.
Sayfayı yazdırarak :: Yazdırmanın bununla ilgisi yoktur.

Sorunları bulun

Aşağıdaki hatalı kodda beş erişilebilirlik sorunu var:

<h1>Hayvan Barınağı</h1>
<h4>Köpekler</h4>
<img src="kopek.jpg">
<a href="kopekler.html">Buraya tıklayın</a>
<p>E-posta adresiniz:</p>
<input type="email" name="eposta">
<div onclick="gonder()">Gönder</div>

Sorunları göster

h1 başlığından sonra h4 geliyor. Seviye atlanmış.
Resmin alt metni yok.
Bağlantı metni nereye gittiğini anlatmıyor.
E-posta alanının label etiketi yok.
Gönder düğmesi gerçek bir button değil.

Sayfayı düzeltin

Beş sorunu da düzeltin. Şu metinleri kullanın: Resmin alt metni Parkta koşan bir köpek, bağlantı metni Köpekleri görün, etiket E-posta adresiniz:. Alanın id değeri eposta olsun. Niteliklerin sırası type, name, id olsun. Düğmenin türü submit olsun.

<h1>Hayvan Barınağı</h1>
<h2>Köpekler</h2>
<img src="kopek.jpg" alt="Parkta koşan bir köpek">
<a href="kopekler.html">Köpekleri görün</a>
<label for="eposta">E-posta adresiniz:</label>
<input type="email" name="eposta" id="eposta">
<button type="submit">Gönder</button>

Bu derste öğrendikleriniz

Doğru HTML, erişilebilirliğin büyük kısmını çözer.
Sayfanızı Tab tuşuyla gezerek test edin.
Tıklanabilir şeyler için button veya a kullanın.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.