HTML Erişilebilirliği
HTML Erişilebilirliği
Her zaman erişilebilirliği göz önünde bulundurarak HTML kodu yazın!
Kullanıcıya sitenizde gezinmesi ve sitenizle etkileşim kurması için iyi bir yol sağlayın. HTML kodunuzu mümkün olduğunca semantik yapın .
anlamsal HTML
Semantik HTML, doğru HTML öğelerini mümkün olduğunca doğru amaçları için kullanmak anlamına gelir. Anlamsal öğeler, anlamı olan öğelerdir; bir düğmeye ihtiyacınız varsa, öğeyi kullanın <button>
(bir
<div>
öğe değil).
anlamsal
<button>Report an Error</button>
anlamsal olmayan
<div>Report an Error</div>
Semantik HTML, bir sayfanın içeriğini yüksek sesle okuyan ekran okuyuculara bağlam sağlar.
Düğme örneğini göz önünde bulundurarak:
- düğmelerin varsayılan olarak daha uygun bir stili vardır
- bir ekran okuyucu onu bir düğme olarak tanımlar
- odaklanabilir
- tıklanabilir
Yalnızca klavyeyle gezinmeye güvenen kişiler için bir düğmeye de erişilebilir; hem fare hem de tuşlar ile tıklanabilir ve (klavyede sekme tuşu kullanılarak) arasında sekme yapılabilir.
Anlamsal olmayan öğelere örnekler : <div>
ve <span>
- İçeriği hakkında hiçbir şey söylemez.
Anlamsal öğe örnekleri : <form>
, <table>
, ve <article>
- İçeriğini açıkça tanımlar.
Başlıklar Önemlidir
Başlıklar <h1>
to <h6>
etiketleriyle tanımlanır:
Örnek
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Arama motorları, web sayfalarınızın yapısını ve içeriğini dizine eklemek için başlıkları kullanır.
Kullanıcılar sayfalarınızı başlıklarına göre gözden geçirir. Belge yapısını ve farklı bölümler arasındaki ilişkileri göstermek için başlıkların kullanılması önemlidir.
Ekran okuyucular ayrıca başlıkları gezinme aracı olarak kullanır. Farklı başlık türleri, sayfanın ana hatlarını belirtir.
<h1>
başlıklar, ana başlıklar için kullanılmalı, ardından <h2>
başlıklar, ardından daha az önemli
<h3>
olan vb. kullanılmalıdır.
Not: Yalnızca başlıklar için HTML başlıklarını kullanın. Metni BÜYÜK veya kalın yapmak için başlıklar kullanmayın .
alternatif metin
Kullanıcı alt
herhangi bir nedenle (yavaş bağlantı,
src
öznitelikteki bir hata veya kullanıcı bir ekran okuyucu kullanıyorsa) görüntüleyemiyorsa, öznitelik bir resim için alternatif bir metin sağlar.
Özelliğin değeri alt
, resmi açıklamalıdır:
Örnek
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
Bir tarayıcı bir resim bulamazsa, alt
özniteliğin değerini görüntüler:
Örnek
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
Dili Bildirin
Web sayfasının dilini belirtmek için her zaman etiketin lang
içine özniteliği eklemelisiniz. <html>
Bu, arama motorlarına ve tarayıcılara yardımcı olmak içindir.
Aşağıdaki örnek, dil olarak İngilizce'yi belirtir:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Net Dil Kullan
Daima açık, anlaşılması kolay bir dil kullanın. Ayrıca bir ekran okuyucu tarafından net bir şekilde okunamayan karakterlerden kaçınmaya çalışın. Örneğin:
- Cümleleri olabildiğince kısa tutun
- Çizgilerden kaçının. 1-3 yazmak yerine 1'den 3'e kadar yazın
- Kısaltmalardan kaçının. Şubat yerine Şubat yaz
- Argo kelimelerden kaçının
İyi Bağlantı Metni Oluşturun
Bir bağlantı metni, okuyucunun o bağlantıya tıklayarak hangi bilgileri alacağını açıkça açıklamalıdır.
İyi ve kötü bağlantı örnekleri:
İyi
Kötü
Not: Bu sayfa, web erişilebilirliğine bir giriş niteliğindedir. Daha fazla ayrıntı için Erişilebilirlik Eğitimimizi ziyaret edin .