Yükleniyor...

HTML Erişilebilirlik En İyi Uygulamaları

HTML Erişilebilirlik En İyi Uygulamaları, web sitelerinin herkes tarafından kullanılabilir ve anlaşılabilir olmasını sağlayan teknikler bütünüdür. Bu uygulamalar, görme, işitme, motor veya bilişsel engeli olan kullanıcıların web sitenize erişimini kolaylaştırır. Aynı zamanda arama motorları ve modern tarayıcılar için de yapıyı daha anlaşılır hâle getirir.
Bunu bir ev inşa etmeye benzetebiliriz: Evde odalar belirli bir düzenle inşa edilirse, kapılar doğru yerleştirilirse ve tabelalar konursa, misafirler rahatça dolaşabilir. Web sitenizde de başlıklar, menüler ve görseller doğru şekilde etiketlenirse, tüm kullanıcılar içeriklere rahatça ulaşabilir.
Bu uygulamaları şu durumlarda kullanmalısınız:

  • Kişisel web sitesi: Portföyünüzün herkes tarafından gezilebilir olması için.
  • Blog: Yazılarınızın ekran okuyucularla kolayca okunması için.
  • E-ticaret sitesi: Ürünlerin klavye ve ekran okuyucularla erişilebilir olması için.
  • Haber sitesi: Manşetler ve içeriklerin kolayca bulunabilmesi için.
    Bu referans içeriğinde, semantik HTML, ARIA özellikleri ve alternatif metinlerin kullanımını öğreneceksiniz. Hedefiniz, sitenizi yalnızca şık değil, aynı zamanda herkes için kullanılabilir hâle getirmek olacak.

Temel Örnek

html
HTML Code 
<!DOCTYPE html>

<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Erişilebilir Menü</title>
</head>
<body>
<!-- Accessible main navigation -->
<nav aria-label="Ana menü">
<a href="#hakkimda">Hakkımda</a> |
<a href="#iletisim">İletişim</a>
</nav>

<!-- Image with descriptive alt text -->

<img src="profil.jpg" alt="Gülen yüzlü Ahmet Yılmaz, web geliştirici" width="200">
</body>
</html>

Bu temel örnek, HTML erişilebilirliğinin iki önemli boyutunu gösteriyor: semantik navigasyon ve görsellere alternatif metin ekleme.
<nav> etiketi, tarayıcı ve yardımcı teknolojilere içerikte bir navigasyon bölümü olduğunu bildirir. aria-label="Ana menü" özelliği ise ekran okuyuculara bu navigasyonun ne işe yaradığını açıklar. Bu, özellikle bir sayfada birden fazla navigasyon olduğunda kritik öneme sahiptir.
<img> etiketi görsel içerikler için kullanılır ve alt niteliği görselin anlamını iletir. Kullanıcı görseli göremese bile ekran okuyucu bu metni okuyarak içeriği aktarır. Alternatif metin, görselin amacına uygun olmalıdır:

  • Bilgi taşıyan görsel: Açıklayıcı alt kullanılır.
  • Süsleme amaçlı görsel: alt="" ile ekran okuyucunun atlaması sağlanır.
    Bu yapı kişisel bir site için portre fotoğrafınızı tanımlarken, blog için yazı görsellerini, e-ticaret için ürün görsellerini ve haber sitesinde manşet görsellerini erişilebilir hâle getirir. Kod kısa olmasına rağmen, kullanıcı deneyimini ciddi şekilde geliştirir.

Pratik Örnek

html
HTML Code 
<!DOCTYPE html>

<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Erişilebilir Ürün Kartı</title>
</head>
<body>
<article aria-labelledby="urun-baslik">
<img src="kamera.jpg" alt="Siyah DSLR Fotoğraf Makinesi" width="250">
<h2 id="urun-baslik">DSLR Kamera X500</h2>
<p>24 MP, 4K video, Wi-Fi özellikli</p>
<button aria-label="DSLR Kamera X500 sepete ekle">Sepete Ekle</button>
</article>
</body>
</html>

Bu pratik örnek, erişilebilirliğin e-ticaret senaryosundaki uygulanışını gösteriyor.

  1. <article> etiketi bağımsız bir içerik bloğunu ifade eder. aria-labelledby="urun-baslik" ile bu bloğun başlığına referans verilir. Ekran okuyucular böylece “DSLR Kamera X500” başlığını içerikle ilişkilendirir.
  2. <img> etiketi, ürünün görselini içerir. alt açıklaması görseli göremeyen kullanıcıya ürünün türünü ve görünümünü aktarır.
  3. <button> etiketi etkileşim için kullanılır. aria-label ile butona ekran okuyucular için benzersiz bir tanım eklenir. Aynı sayfada birçok “Sepete Ekle” butonu olduğunda her birinin hangi ürüne ait olduğunu kullanıcı anlayabilir.
    Bu yapı sadece e-ticaret için değil; kişisel sitelerde proje kartları, bloglarda öne çıkan yazılar ve haber sitelerinde öne çıkan manşetler için de uygulanabilir. Kod, semantik HTML ve ARIA kullanımının birleşimiyle kullanıcı dostu ve erişilebilir bir yapı oluşturur.

En İyi Uygulamalar

  1. Semantik HTML kullanın: <header>, <main>, <article> gibi etiketler ekran okuyucular için yol göstericidir.
  2. Görsellere anlamlı alt metin ekleyin: Bilgi taşıyan görselleri açıklayın.
  3. ARIA özelliklerini dikkatle kullanın: aria-label, aria-labelledby bağlam ekler.

  4. Başlık hiyerarşisini koruyun: <h1> → <h2> → <h3> sırası kullanıcıya yol gösterir.
    Sık Yapılan Hatalar

  5. Her yerde <div> veya <span> kullanmak.

  6. Görsellerde alt niteliğini boş bırakmak.
  7. Bağlantı ve butonların açıklamasız bırakılması.
  8. Etiketlerin yanlış iç içe yerleştirilmesi.
    Hata Ayıklama İpuçları
  • Klavye ile siteyi gezerek erişilebilirliği test edin.
  • NVDA veya VoiceOver gibi ekran okuyucularla test yapın.
  • Lighthouse veya Axe gibi araçları kullanın.

📊 Hızlı Referans

Property/Method Description Example
<nav> Navigasyon bölümünü tanımlar <nav aria-label="Ana menü">
alt Görselin alternatif metni <img src="x.jpg" alt="Ürün fotoğrafı">
aria-label Ekran okuyucuya görünmeyen açıklama ekler <button aria-label="Menüyü aç">
aria-labelledby Bir elementi başlık veya başka içerikle ilişkilendirir <section aria-labelledby="baslik">
<header> Sayfa veya bölüm başlığı <header><h1>Blog</h1></header>
article Bağımsız içerik bloğu <article><h2>Haber</h2></article>

Özet ve Sonraki Adımlar
Bu içerikte şunları öğrendiniz:

  • Semantik HTML kullanımı ile sayfaların daha anlaşılır hâle gelmesi.
  • Görseller için alt metinleri ile bilgi aktarımı.

  • ARIA nitelikleriyle erişilebilirliğin güçlendirilmesi.
    Erişilebilir bir site, iyi dekore edilmiş bir ev gibidir: Kapılar açık, odalar düzenli ve her oda etiketlidir. Bu yapı CSS ile stillendirme ve JavaScript ile etkileşim eklenmesi için de sağlam bir temel oluşturur. Örneğin, JavaScript ile açılan menülerde aria-expanded veya aria-hidden kullanabilirsiniz.
    Sonraki adım olarak şunları öneririz:

  • Klavye odak yönetimi (focus) üzerine çalışın.

  • Karmaşık ARIA rolleri (diyaloglar, sekmeler) öğrenin.
  • Düzenli olarak erişilebilirlik testleri yapın.
    Bu beceriler, web geliştirici olarak profesyonel seviyede farklılaşmanızı sağlar.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

❓
4
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 35 / 51
Html Ders