HTML Eğitimi

HTML ANA SAYFA HTML'ye Giriş HTML Düzenleyiciler HTML Temel HTML Öğeleri HTML Özellikleri HTML Başlıkları HTML Paragrafları HTML Stilleri HTML Biçimlendirme HTML Alıntılar HTML Yorumları HTML Renkleri HTML CSS'si HTML Bağlantıları HTML Görselleri HTML Sık Kullanılan Simgesi HTML Tabloları HTML Listeleri HTML Bloğu ve Satır İçi HTML Sınıfları HTML Kimliği HTML İç Çerçeveleri HTML JavaScript'i HTML Dosya Yolları HTML Başlığı HTML Düzeni HTML Duyarlı HTML Bilgisayar Kodu HTML Semantiği HTML Stil Kılavuzu HTML Varlıkları HTML Sembolleri HTML Emojileri HTML Karakter Seti HTML URL Kodlaması HTML'ye karşı XHTML

HTML Formları

HTML Formları HTML Formu Nitelikleri HTML Form Öğeleri HTML Giriş Türleri HTML Girdi Nitelikleri HTML Giriş Formu Nitelikleri

HTML Grafikleri

HTML Kanvas HTML SVG'si

HTML Ortamı

HTML Ortamı HTML Videosu HTML Ses HTML Eklentileri HTML YouTube

HTML API'leri

HTML Coğrafi Konum HTML Sürükle/Bırak HTML Web Depolama HTML Web Çalışanları HTML ÖAM

HTML Örnekleri

HTML Örnekleri HTML Testi HTML Alıştırmaları HTML Sertifikası HTML Özeti HTML Erişilebilirliği

HTML Referansları

HTML Etiket Listesi HTML Özellikleri HTML Genel Nitelikleri HTML Tarayıcı Desteği HTML Olayları HTML Renkleri HTML Kanvas HTML Ses/Video HTML Doktipleri HTML Karakter Kümeleri HTML URL Kodlaması HTML Dil Kodları HTTP Mesajları HTTP Yöntemleri PX'den EM'ye Dönüştürücü Klavye kısayolları

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

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