Semantik Yapı ve Alternatif Metin

Semantik yapı, içeriğin rolünü doğru HTML öğeleriyle ifade eder; alternatif metin ise görselin bağlamdaki işlevini, görüntüyü göremeyen kullanıcıya gereksiz ayrıntı olmadan aktarır.

DERS PUSULASI

Bu sayfayı ne için kullanacaksın?

Ana fikir

Semantik yapı, içeriğin rolünü doğru HTML öğeleriyle ifade eder; alternatif metin ise görselin bağlamdaki işlevini, görüntüyü göremeyen kullanıcıya gereksiz ayrıntı olmadan aktarır. Bu bölümde noktayı özellikle “Doğrudan cevap” bağlamına uygula ve sonucu doğrulayacak ya da değiştirecek kanıtı kaydet. Bu derste “Semantik Yapı ve Alternatif Metin” yalnız…

Üretilecek kanıt

1. adım: Sayfanın bölgelerini ve başlık ağacını çıkar. 2. adım: Tıklanabilir öğelerin rolünü kontrol et. 3. adım: Her görseli bilgi, işlev, metin veya dekoratif olarak sınıflandır. 4. adım: Bağlama özel alt metin yaz veya dekoratifse boş bırak. 5. adım: Bağlantılı görselde hedef işlevini ifade et. 6. adım: Ekran okuyucu veya erişilebilirlik ağacıyla örnek…

Kontrol tuzağı

Yaygın hata Neden sorun? Düzeltme kontrolü Görsel dosya adını alt metin yapmak Header, nav, main, article ve footer gibi bölgeler yapıyı açıklar. Semantik bölge ilkesine dön; bölge ağacı. üret ve “Semantik Yapı ve Alternatif Metin” kararını yeniden sınırla. Her görsele uzun betimleme eklemek Başlıklar atlama ve yalnız…

Sonraki bağlantı

Bu ders için bir cümlelik açıklama, bir konuya özel kanıt ve düzeltilmiş bir hata kaydı bıraktıktan sonra sıradaki içerik <strong>Altyazı, Ses ve Çoklu Uyarı Biçimleri</strong>. Önceki kanıt tamamlanmadıysa yalnız sayfa sayısını artırmak için ilerleme işaretlenmez.

Modül kaynakları: WCAG 2.2 · WAI Tutorials

SeviyeBaşlangıç–Orta
Yaş10–15
Süre60–90 dk
Ön koşulÖnceki ders önerilir
İçerikStandart ders · 1674 kelime
Son güncelleme

Doğrudan cevap

Semantik yapı, içeriğin rolünü doğru HTML öğeleriyle ifade eder; alternatif metin ise görselin bağlamdaki işlevini, görüntüyü göremeyen kullanıcıya gereksiz ayrıntı olmadan aktarır. Bu bölümde noktayı özellikle “Doğrudan cevap” bağlamına uygula ve sonucu doğrulayacak ya da değiştirecek kanıtı kaydet.

Bu derste “Semantik Yapı ve Alternatif Metin” yalnız tanım düzeyinde bırakılmaz. Öğrenci, kavramın erişilebilir ve anlaşılır bir deneyim üzerindeki etkisini örnek, ölçüt, uygulama ve yeniden test yoluyla göstermelidir.

Neden önemli?

Görsel olarak başlık gibi duran bir div ekran okuyucuda başlık olmaz. Her görsele aynı “fotoğraf” metnini eklemek de bilgi sağlamaz; alt metin görselin sayfadaki amacına göre yazılmalıdır.

Başlangıç vakası: Mezuniyet fotoğrafına yalnız “Doruk” yazmak bağlamı eksik bırakıyor; fakat sayfadaki görünür başlık aynı bilgiyi zaten veriyorsa uzun tekrar da gereksiz. Alt metin, görselin o bölümde neden kullanıldığını anlatacak kadar yazılıyor.

“Semantik Yapı ve Alternatif Metin” konusunda görünen ilk belirti gerçek neden olmayabilir. Bu nedenle çözüm önerisinden önce kullanıcı, ortam, araç, ölçü ve test koşulu yazılır. Sonuç yalnız “çalıştı” veya “güzel oldu” biçiminde değil, hangi ölçütün hangi kanıtla karşılandığı biçiminde raporlanır.

Öğrenme hedefleri

  • Semantik bölge kararını açıklamak ve kanıtlamak
  • Başlık hiyerarşisi kararını açıklamak ve kanıtlamak
  • Alt metin amacı kararını açıklamak ve kanıtlamak
  • Dekoratif görsel kararını açıklamak ve kanıtlamak
  • Hata ile kullanıcı hatasını birbirinden ayırmak
  • Güvenlik ve geçerlilik sınırını yazmak

Bu hedefler tamamlandığında “Semantik Yapı ve Alternatif Metin” okunmuş bir sayfa değil; yardımsız açıklama, konuya özel uygulama, hata bulma ve yeni bağlama aktarım yoluyla gösterilmiş bir beceri olur.

Ana kavramlar ve karar noktaları

1. Semantik bölge

Header, nav, main, article ve footer gibi bölgeler yapıyı açıklar. “Semantik Yapı ve Alternatif Metin” içinde bu ilke, tasarımcının niyetini değil kullanıcının gerçekten algılayabildiği ve tamamlayabildiği görevi ölçmeyi sağlar.

Konuya özel örnek: Ders içeriğinin main içinde yer alması.

Beklenen kanıt: Bölge ağacı. Kanıtın tarihi, kullanılan araç veya tarayıcı, başlangıç koşulu ve sonucu birlikte yazılır. Böylece başka bir öğrenci yalnız son görsele değil, kararın nasıl verildiğine de ulaşır.

Sınır sorusu: “Semantik Yapı ve Alternatif Metin” açısından bu ilke hangi malzeme, cihaz, kullanıcı, üretim yöntemi veya kullanım ortamı değiştiğinde yeniden değerlendirilmelidir? Cevap, “her zaman böyledir” gibi genelleme yerine bir koşul ve doğrulama yolu içermelidir.

2. Başlık hiyerarşisi

Başlıklar atlama ve yalnız stil amacı olmadan içerik düzeyini gösterir. “Semantik Yapı ve Alternatif Metin” içinde bu ilke, tasarımcının niyetini değil kullanıcının gerçekten algılayabildiği ve tamamlayabildiği görevi ölçmeyi sağlar.

Konuya özel örnek: Tek H1, mantıklı H2/H3.

Beklenen kanıt: Başlık listesi. Kanıtın tarihi, kullanılan araç veya tarayıcı, başlangıç koşulu ve sonucu birlikte yazılır. Böylece başka bir öğrenci yalnız son görsele değil, kararın nasıl verildiğine de ulaşır.

Sınır sorusu: “Semantik Yapı ve Alternatif Metin” açısından bu ilke hangi malzeme, cihaz, kullanıcı, üretim yöntemi veya kullanım ortamı değiştiğinde yeniden değerlendirilmelidir? Cevap, “her zaman böyledir” gibi genelleme yerine bir koşul ve doğrulama yolu içermelidir. Bu bölümde noktayı özellikle “2. Başlık hiyerarşisi” bağlamına uygula ve sonucu doğrulayacak ya da değiştirecek kanıtı kaydet.

3. Alt metin amacı

Bilgi taşıyan görselin ilgili anlamı kısa ve bağlama özel yazılır. “Semantik Yapı ve Alternatif Metin” içinde bu ilke, tasarımcının niyetini değil kullanıcının gerçekten algılayabildiği ve tamamlayabildiği görevi ölçmeyi sağlar.

Konuya özel örnek: “Ayarlanabilir sensör tutucunun üç açı konumu”.

Beklenen kanıt: Alt metin kontrolü. Kanıtın tarihi, kullanılan araç veya tarayıcı, başlangıç koşulu ve sonucu birlikte yazılır. Böylece başka bir öğrenci yalnız son görsele değil, kararın nasıl verildiğine de ulaşır.

Sınır sorusu: “Semantik Yapı ve Alternatif Metin” açısından bu ilke hangi malzeme, cihaz, kullanıcı, üretim yöntemi veya kullanım ortamı değiştiğinde yeniden değerlendirilmelidir? Cevap, “her zaman böyledir” gibi genelleme yerine bir koşul ve doğrulama yolu içermelidir. Bu bölümde noktayı özellikle “3. Alt metin amacı” bağlamına uygula ve sonucu doğrulayacak ya da değiştirecek kanıtı kaydet.

4. Dekoratif görsel

Bilgi taşımayan görsel ekran okuyucudan gizlenir. “Semantik Yapı ve Alternatif Metin” içinde bu ilke, tasarımcının niyetini değil kullanıcının gerçekten algılayabildiği ve tamamlayabildiği görevi ölçmeyi sağlar.

Konuya özel örnek: Arka plan süsü için boş alt.

Beklenen kanıt: Dekoratif karar notu. Kanıtın tarihi, kullanılan araç veya tarayıcı, başlangıç koşulu ve sonucu birlikte yazılır. Böylece başka bir öğrenci yalnız son görsele değil, kararın nasıl verildiğine de ulaşır.

Sınır sorusu: “Semantik Yapı ve Alternatif Metin” açısından bu ilke hangi malzeme, cihaz, kullanıcı, üretim yöntemi veya kullanım ortamı değiştiğinde yeniden değerlendirilmelidir? Cevap, “her zaman böyledir” gibi genelleme yerine bir koşul ve doğrulama yolu içermelidir. Bu bölümde noktayı özellikle “4. Dekoratif görsel” bağlamına uygula ve sonucu doğrulayacak ya da değiştirecek kanıtı kaydet.

Adım adım örnek inceleme

Başlangıç vakası: Mezuniyet fotoğrafına yalnız “Doruk” yazmak bağlamı eksik bırakıyor; fakat sayfadaki görünür başlık aynı bilgiyi zaten veriyorsa uzun tekrar da gereksiz. Alt metin, görselin o bölümde neden kullanıldığını anlatacak kadar yazılıyor. Bu bölümde noktayı özellikle “Adım adım örnek inceleme” bağlamına uygula ve sonucu doğrulayacak ya da değiştirecek kanıtı kaydet.

İlk adımda tasarımcının ne anlatmak istediği değil, semantik bölge ve başlık hiyerarşisi açısından kullanıcının ne görebildiği, duyabildiği, odaklayabildiği veya tamamlayabildiği kaydedilir. Kullanıcıya yolu söylemek yerine gerçek davranış gözlenir.

Alternatif üretme: “Ayarlanabilir sensör tutucunun üç açı konumu”. örneği farklı cihaz, yakınlaştırma, klavye ve algı koşullarında sınanır. Bir çözüm yalnız fare ve yüksek çözünürlüklü masaüstünde çalışıyorsa kapsayıcı sayılmaz.

Test ve revizyon: Dekoratif görsel ile başarının ölçüsü yazılır. Otomatik araç sonucu, klavye görevi, gerçek tıklama ve kullanıcı gözlemi birbirini tamamlar. Revizyon, sorunu kişiye yüklemek yerine arayüzün rol, kontrast, durum veya geri dönüş eksikliğini düzeltir.

Karşı örnekle derinleştirme

“Semantik Yapı ve Alternatif Metin” senaryosundaki bir koşulu bilinçli biçimde değiştir: cihazı mobilden masaüstüne, malzemeyi kartondan plastiğe, fareyi klavyeye, aydınlık ortamı güneş ışığına veya tek kullanıcıyı farklı bir kullanıcı grubuna çevir. Sonucun neden değişmesini beklediğini önce yaz; ardından aynı test adımlarını uygula. Tahminin tutmadığı durumda başarısızlığı gizleme. Hangi varsayımın yanlış olduğunu ve bir sonraki sürümün hangi kanıtı üretmesi gerektiğini belirt.

Bu karşı örnek, “Semantik Yapı ve Alternatif Metin” bilgisini yalnız ders içinde geçerli bir tarif olmaktan çıkarır. Aynı kavramı yeni koşulda koruyabilmek için hangi ölçütün sabit, hangisinin yeniden tanımlanması gerektiğini gösterir.

Uygulama laboratuvarı

  1. 1. adım: Sayfanın bölgelerini ve başlık ağacını çıkar.
  2. 2. adım: Tıklanabilir öğelerin rolünü kontrol et.
  3. 3. adım: Her görseli bilgi, işlev, metin veya dekoratif olarak sınıflandır.
  4. 4. adım: Bağlama özel alt metin yaz veya dekoratifse boş bırak.
  5. 5. adım: Bağlantılı görselde hedef işlevini ifade et.
  6. 6. adım: Ekran okuyucu veya erişilebilirlik ağacıyla örnek sayfayı dinle.
Uygulama laboratuvarı tablosu
Karar alanıKontrol örneğiKanıtYorumlama ölçütü
Semantik bölgeDers içeriğinin main içinde yer alması.Bölge ağacı.Header, nav, main, article ve footer gibi bölgeler yapıyı açıklar.
Başlık hiyerarşisiTek H1, mantıklı H2/H3.Başlık listesi.Başlıklar atlama ve yalnız stil amacı olmadan içerik düzeyini gösterir.
Alt metin amacı“Ayarlanabilir sensör tutucunun üç açı konumu”.Alt metin kontrolü.Bilgi taşıyan görselin ilgili anlamı kısa ve bağlama özel yazılır.
Dekoratif görselArka plan süsü için boş alt.Dekoratif karar notu.Bilgi taşımayan görsel ekran okuyucudan gizlenir.

Kanıt paketi: Semantik bölge/başlık ağacı, görsel sınıflandırması, alt metin kararları ve erişilebilirlik ağacı kaydı saklanır.

Uygulama boyunca yalnız başarılı son ekran saklanmaz. Başlangıç sürümü, hata belirtisi, test yöntemi, düzeltme ve yeniden test sonucu yan yana tutulur. Böylece “Semantik Yapı ve Alternatif Metin” için yapılan değişiklik estetik tercih değil, kanıtla açıklanan tasarım kararı olur.

Erişilebilirlik kaydı: “Semantik Yapı ve Alternatif Metin” için cihaz, tarayıcı, giriş yöntemi, yakınlaştırma ve test görevi yazılır. Otomatik puan tek başına sonuç sayılmaz; en az bir klavye veya gerçek görev kontrolü eklenir.

Aktarım görevi: Semantik yapı ders, galeri, proje kartı, veri grafiği ve interaktif araçlara aktarılır. Bu yeni bağlamda ölçütleri kopyalamadan önce kullanıcı, cihaz, malzeme, üretim yöntemi ve risk sınırlarını yeniden yaz.

Sık yapılan hatalar ve düzeltme yolları

Sık yapılan hatalar ve düzeltme yolları tablosu
Yaygın hataNeden sorun?Düzeltme kontrolü
Görsel dosya adını alt metin yapmakHeader, nav, main, article ve footer gibi bölgeler yapıyı açıklar.Semantik bölge ilkesine dön; bölge ağacı. üret ve “Semantik Yapı ve Alternatif Metin” kararını yeniden sınırla.
Her görsele uzun betimleme eklemekBaşlıklar atlama ve yalnız stil amacı olmadan içerik düzeyini gösterir.Başlık hiyerarşisi ilkesine dön; başlık listesi. üret ve “Semantik Yapı ve Alternatif Metin” kararını yeniden sınırla.
Başlığı kalın paragrafla taklit etmekBilgi taşıyan görselin ilgili anlamı kısa ve bağlama özel yazılır.Alt metin amacı ilkesine dön; alt metin kontrolü. üret ve “Semantik Yapı ve Alternatif Metin” kararını yeniden sınırla.
Tıklanabilir div kullanmakBilgi taşımayan görsel ekran okuyucudan gizlenir.Dekoratif görsel ilkesine dön; dekoratif karar notu. üret ve “Semantik Yapı ve Alternatif Metin” kararını yeniden sınırla.

“Semantik Yapı ve Alternatif Metin” çalışmasında hata yalnız yanlış son ürün değildir. “Semantik Yapı ve Alternatif Metin” bağlamında kullanıcıyı tanımlamamak, birimsiz ölçü vermek, yalnız fareyle denemek, başarısız prototipi silmek veya test koşulunu yazmamak da yöntemi zayıflatır. Hata bulunduğunda bütün sayfayı yeniden kopyalamak yerine bozulan varsayım ve gerekli yeni test açıklanır.

Güvenlik, etik ve yayın sınırı

Alternatif metinde kişisel konum, okul, sağlık veya özel bilgi gereksiz yere açıklanmamalı; yayımlanabilirlik onayı korunmalıdır.

Bu sınır “Semantik Yapı ve Alternatif Metin” içeriğinin sonradan eklenen küçük notu değil, tasarım ölçütüdür. “Semantik Yapı ve Alternatif Metin” çalışmasında fiziksel araç, kişisel veri veya rahatsız edici uyarı riski varsa görev güvenli dijital model, kurgusal veri ya da yetişkin gözetimli düşük riskli düzene çevrilir.

Ders özeti

“Semantik Yapı ve Alternatif Metin” için güçlü sonuç; ihtiyaç veya kullanıcı, ölçülebilir karar, konuya özel kanıt, hata analizi ve yeniden testin birlikte yazılmasıyla oluşur. Semantik yapı, içeriğin rolünü doğru HTML öğeleriyle ifade eder; alternatif metin ise görselin bağlamdaki işlevini, görüntüyü göremeyen kullanıcıya gereksiz ayrıntı olmadan aktarır.

Semantik yapı ders, galeri, proje kartı, veri grafiği ve interaktif araçlara aktarılır.

Kontrol soruları

  1. “Semantik Yapı ve Alternatif Metin” konusunun temel amacı nedir?
  2. Semantik bölge neden ilk adımda açıkça yazılmalıdır?
  3. “Semantik Yapı ve Alternatif Metin” senaryosunda hangi kanıt ilk varsayımı sınar?
  4. “Semantik Yapı ve Alternatif Metin” çalışmasında hangi hata sonucu yanıltabilir?
  5. “Semantik Yapı ve Alternatif Metin” için güvenlik veya mahremiyet sınırı nedir?
  6. “Semantik Yapı ve Alternatif Metin” bilgisi başka bir projeye nasıl aktarılır?

Açıklamalı cevaplar

  1. Semantik yapı, içeriğin rolünü doğru HTML öğeleriyle ifade eder; alternatif metin ise görselin bağlamdaki işlevini, görüntüyü göremeyen kullanıcıya gereksiz ayrıntı olmadan aktarır.
  2. Header, nav, main, article ve footer gibi bölgeler yapıyı açıklar. Bu nedenle bölge ağacı. hazırlanır ve karar yalnız kişisel yoruma bırakılmaz.
  3. Mezuniyet fotoğrafına yalnız “Doruk” yazmak bağlamı eksik bırakıyor; fakat sayfadaki görünür başlık aynı bilgiyi zaten veriyorsa uzun tekrar da gereksiz. Alt metin, görselin o bölümde neden kullanıldığını anlatacak kadar yazılıyor. durumunda başlık hiyerarşisi ile ilişkili başlık listesi. ilk varsayımı görünür kılar.
  4. Görsel dosya adını alt metin yapmak. Düzeltmek için alt metin amacı ilkesine dönülür ve alt metin kontrolü. üretilir.
  5. Alternatif metinde kişisel konum, okul, sağlık veya özel bilgi gereksiz yere açıklanmamalı; yayımlanabilirlik onayı korunmalıdır.
  6. Semantik yapı ders, galeri, proje kartı, veri grafiği ve interaktif araçlara aktarılır.

Kaynak ve doğrulama notları

“Semantik Yapı ve Alternatif Metin” için aşağıdaki birincil ve resmî kaynaklar teknik çerçeveyi doğrulamak amacıyla seçilmiştir. Yazıcı, malzeme, tarayıcı veya erişilebilirlik aracı sürümü zamanla değişebileceği için uygulama tarihinde gerçek ortam ayrıca kaydedilmelidir.

Sonraki adım

Bu ders için bir cümlelik açıklama, bir konuya özel kanıt ve düzeltilmiş bir hata kaydı bıraktıktan sonra sıradaki içerik <strong>Altyazı, Ses ve Çoklu Uyarı Biçimleri</strong>. Önceki kanıt tamamlanmadıysa yalnız sayfa sayısını artırmak için ilerleme işaretlenmez.

SORU HAVUZU

Bu dersi 10 soruyla pekiştir

Bu ders için 24 soruluk bir havuz hazırlandı. Her başlangıçta 10 soru ve seçenek sıraları yeniden seçilir; sonuçlar yalnız bu tarayıcıda kalır.