Temel Olarak Anlamsal HTML
ARIA'ya başvurmadan önce yerleşik erişilebilirlik elde etmek için button, nav ve heading gibi yerel HTML öğelerini kullanın.
Temel Olarak Anlamsal HTML, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Anlamsal HTML Erişilebilirliği Kendiliğinden Sağlar
Doğru HTML öğesini kullanmak size klavye desteği, ekran okuyucu duyuruları ve doğru ARIA rollerini ek bir işlem yapmadan sağlar. Erişilebilirlik sorunlarının çoğu, yerel öğe yerine div + JavaScript kullanılmasından kaynaklanır.
onClick ile düğme ve div karşılaştırması
Bir <button> focus alabilir, ekran okuyuculara 'düğme' olarak duyurulur, Enter/Space tuşlarına basıldığında tıklama olayı oluşturur ve form gönderimiyle çalışır. Bir <div onClick> bunların hiçbirine sahip değildir.
<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>
<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>Düğmeler için button, bağlantılar için a kullanın
Eylem bir URL'ye yönlendiriyorsa <a href> kullanın. Eylem sayfada bir işlem gerçekleştiriyorsa <button> kullanın. Bağlantıları düğme olarak kullanmayın (href yok, yalnızca onclick var) — bu, yardımcı teknolojiler için kafa karıştırıcıdır.
Başlıklar Belge Ana Hatlarını Oluşturur
Mantıksal bir ana hat oluşturmak için h1-h6 öğelerini sırayla kullanın. Ekran okuyucu kullanıcıları başlıklar üzerinden gezinir — seviyeleri atlamak (h1 -> h3) kafa karıştırıcı boşluklar oluşturur.
<h1>Article Title</h1>
<h2>Section One</h2>
<h3>Subsection</h3>
<h2>Section Two</h2>
<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>Belirgin Bölge Öğeleri
HTML5 belirgin bölge öğeleri (header, nav, main, aside, footer), ekran okuyucu kullanıcılarının ana bölümler arasında geçiş yapmasını sağlar. Sayfa başına bir <main> kullanın.
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<h1>Page Title</h1>
<article>...</article>
<aside>Sidebar</aside>
</main>
<footer>...</footer>Liste Öğeleri
Sırasız listeler için <ul>, sıralı listeler için <ol>, tanım listeleri için <dl> kullanın. Ekran okuyucular 'N öğelik liste' duyurusunu yapar — bu, anlamlı bir gezinme ipucudur.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->Formlar: Her Girdiyi Etiketleyin
Her girdiyle ilişkili bir <label> olmalıdır. for/id çifti bunları birbirine bağlar — etikete tıklamak girdiye focus verir ve focus geldiğinde ekran okuyucular etiketi duyurur.
<label for="email">Email</label>
<input id="email" name="email" type="email">
<!-- Or wrap (no for/id needed): -->
<label>
Email
<input name="email" type="email">
</label>Gruplar için fieldset ve legend
İlişkili girdileri (ör. radyo düğmelerini) <fieldset> + <legend> ile gruplandırın. Bir üye girdiye her focus verildiğinde ekran okuyucular legend metnini duyurur.
<fieldset>
<legend>Choose a plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Tablosal Veriler için table Öğeleri
<table> öğesini <thead>, <tbody> ve <th scope="col"> ile kullanın — tabloları hiçbir zaman sayfa düzeni için kullanmayın. Ekran okuyucular hücreler arasında iki boyutlu gezinir ve başlıkları duyurur.
article, section ve figure
<article>: kendi içinde bütünlük taşıyan içerik (blog yazısı, yorum). <section>: başlığı olan tematik gruplama. <figure> + <figcaption>: açıklama yazısı bulunan medya.
ARIA'yı Yalnızca Gerektiğinde Kullanın
ARIA'nın ilk kuralı: ARIA kullanmayın. Yerel HTML her zaman daha iyidir. ARIA'ya yalnızca özel bileşeniniz için uygun bir anlamsal öğe bulunmadığında başvurun (combobox, sekmeler, ağaç).
Hızlı Kontrol
Neden <button onclick="...">, <div onclick="..."> yerine tercih edilir?
Özet: Anlamsal HTML
Doğru öğeyi kullanın: eylemler için button, gezinme için a, ana hat için sırayla h1-h6, belirgin bölge öğeleri (header, nav, main, footer), listeler için ul/ol, her girdi için label, radyo grupları için fieldset/legend, veri tabloları için table. Yerel HTML erişilebilirliği ek bir işlem yapmadan sağlar. ARIA son çare olarak kullanılmalıdır.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“Temel Olarak Anlamsal HTML” dersi ücretsiz mi?
Evet — “Temel Olarak Anlamsal HTML” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Temel Olarak Anlamsal HTML” dersinde ne öğreneceğim?
ARIA'ya başvurmadan önce yerleşik erişilebilirlik elde etmek için button, nav ve heading gibi yerel HTML öğelerini kullanın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Temel Olarak Anlamsal HTML” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- WCAG Düzeyleri A AA AAA
- Temel Olarak Anlamsal HTML
- ARIA Rolleri ve Öznitelikleri
- Klavye Gezinmesi ve Odak Yönetimi