Yükleniyor...

HTML Erişilebilirlik

Önceki derste datalist bir input’a öneri bağlıyordu. Erişilebilirlik daha geniştir: tüm sayfa klavye, ekran okuyucu ve yakınlaştırmayla kullanılabilir olsun. İyi HTML — landmark, label, alt, başlık, gerçek düğme — temeldir.

Erişilebilirlik neden önemli

Bazıları fare olmadan gezer, metni büyütür veya sayfayı dinler. Alt’siz grafik sessizdir; labelsiz arama isimsizdir; tıklanabilir div odak almayabilir. Kapsayıcı işaretleme herkese yardım eder. Çoğu HTML yazarken alışkanlıktır.

Doğrudan yanıt

1) Anlamsal bölgeler ve yerel denetimler. 2) Her denetimde for/id ile label. 3) Bilgilendirici görseller için anlamlı alt; boş alt yalnızca süs. 4) Net h1 ve vahşi atlamasız mantıklı yuvalama. 5) Tab ile bağlantı ve düğmeler. 6) Yerel HTML yetmezse ARIA — önce yapı.

📊 Accessibility habits beginners use

Habit Why it helps Beginner tip
Semantic landmarks Tools jump to regions Prefer main/nav over anonymous divs
Labels on controls Names fields clearly for= must match the control id
Alt on images Describes non-text content Say what the image communicates
Logical headings Outlines the page Do not jump h1 → h4 for style
Keyboard-operable controls Not everyone uses a pointer Prefer button/a over clickable divs
Native before ARIA Roles come built-in Repair HTML; do not wallpaper broken markup

Landmark’lı etiketli arama

Küçük arama şeridi: erişilebilir adlı nav, etiketli alan ve gerçek düğme. Ekran okuyucu bölgeyi ve adı duyurur; Tab input ve düğmeye ulaşır.

Labeled search in a nav

html 
<nav aria-label="Site">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Search</button>
</nav>

Arama demosunu okumak

  • nav gezinme landmark’ıdır; aria-label birden fazla nav’ı ayırır
  • label for + input id erişilebilir ad verir
  • name gönderim içindir — erişilebilir addan ayrı
  • type=search yereldır
  • gerçek button Enter/Space ile
  • Önceki ders önerilerdi; burada adlandırma ve erişim

Başlıklar, alt ve gerçek düğme

İkinci parça: h1, iç içe h2, açıklayıcı alt’lı bilgilendirici görsel ve button eylemi. «Buraya tıkla» ve sessiz grafiklerin tersi.

Headings alt and button

html 
<main>
<h1>Monthly sales</h1>
<h2>Q1 results</h2>
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<p>Sales climbed through March.</p>
<button type="button">Download report</button>
</main>

Yapı demosunu okumak

  • Bir h1 konuyu koyar; altında h2, h4’e atlamadan
  • Grafik alt’ı sonucu söyler, yalnızca «image» değil
  • Süs: boş alt; bu grafik bilgilendiricidir
  • Eylem button’dur, div değil
  • main ana içeriği işaretler
  • Sonraki ders JavaScript — bu HTML alışkanlıklarını koruyun

Önce neyi düzeltmeli

  • İsimsiz alanlar: fancy placeholder’dan önce label
  • Sessiz bilgilendirici görseller: alt yazın
  • Sahte denetimler: tıklanabilir div’i button/a yapın
  • Başlık çorbası: mantıklı özet
  • Yalnızca-ARIA yamaları: yerel öğe varsa onu kullanın
  • Klavye çıkmazları: tıklanan her şey Tab ile ulaşılır olmalı

Alıştırma — sayfa geneli alışkanlıklar

  1. Arama demosu; label’ı kaldırın sonra for/id geri koyun
  2. Ayrı aria-label’lı ikinci nav
  3. Grafik alt’ını boşaltın; anlamlı alt geri
  4. Bilerek h1→h4 atlayın; h1→h2 düzeltin
  5. Düğmeyi div yapın; sonra gerçek button ve Tab
  6. Cümle: erişilebilirlik HTML yapısıyla başlar, ARIA duvar kâğıdıyla değil
  7. Sonraki ders script ekler — label ve düğmeleri koruyun

Kolay hatalar

  • Bağlamı olmayan «buraya tıkla» bağlantıları
  • Alt’siz veya boş alt’lı bilgilendirici görseller
  • Klavyeyi yok sayan tıklanabilir div’ler
  • Yalnızca görsel boyut için başlık düzeyleri
  • Label yerine placeholder
  • Bozuk işaretleme üzerinde ARIA rolleri
  • Datalist’in de label istediğini unutmak

Özet

  • Erişilebilirlik = daha fazla kişi ve araç için kullanılabilir yapı
  • Landmark, label, alt, başlık ve yerel düğmeler önemli
  • Klavye erişimi işin parçasıdır
  • Ağır ARIA’dan önce sağlam HTML
  • Datalist bir denetimdi; bu ders sayfaya bakar
  • Sonraki: HTML sayfalarına JavaScript eklemek

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 57 / 68
Html Ders