1. Ana Sayfa
  2. Yazılım

HTML Accessibility

HTML Accessibility
HTML Accessibility
+ - 0

HTML Accessibility(Erişilebilirlik) Nedir?

Web erişilebilirliği, web içeriğinin engelli kişiler için nasıl daha kullanılabilir olması gerektiğini tanımlar. Belirli türde engelleri bulunan insanlar içeriğe erişebilmek için assistive technologie (AT)’lerden faydalanırlar. 

Semantic 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, <button> öğesini kullanın (bir <div> öğesini 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.

Buton örneğini göz önünde bulundurarak:

  • Butonların varsayılan olarak daha uygun bir stili vardır
  • Bir ekran okuyucu onu bir buton olarak tanımlar
  • Odaklanılabilir.
  • Tıklanabilir.

Yalnızca klavyeyle gezinmeye güvenen kişiler için bir butona da erişilebilir; hem fare hem de tuşlar ile tıklanabilir ve (klavyede sekme tuşu kullanılarak) arasında geçiş yapılabilir.

Anlamsal olmayan öğelere örnekler : <div> ve <span>

Anlamsal öğe örnekleri : <form>, <table>, ve <article> İçeriğini açıkça tanımlar.

HTML Accessibility

Başlıklar Önemlidir

<h1>Başlık 1</h1>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<h4>Başlık 4</h4>
<h5>Başlık 5</h5>
<h6>Başlık 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.

Alternatif Metinler

alt bir resim için alternatif metin sağlamaktadır.

<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 :

<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">

Sayfanın Dilini Belirtin

Web sayfasının dilini bildirmek 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 Türkçeyi belirtir:

<!DOCTYPE html>
<html lang="tr">
<body>

...

</body>
</html>

Net Bir Dil Kullanın

Daima açık ve anlaşılır 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. Şbt yerine Şubat yaz
  • Argo kelimelerden kaçının

Not: Bu sayfa, web erişilebilirliğine bir giriş niteliğindedir. Daha fazla ayrıntı için Erişilebilirlik Eğitimini ziyaret edin .

Yazar Hakkında

Bu Yazıyı Yorumla