♿ HTML Accessibility (Erişilebilirlik): Web Herkes İçindir

♿ HTML Accessibility (Erişilebilirlik): Web Herkes İçindir

aria-label sandığından daha önemli! 😎

Merhaba güzel insan, erişilebilirlik aşığı💖
Bugün biraz HTML, biraz empati, bolca “ben bunu niye daha önce yapmamışım” dedirten bilgilerle geldim.

Bir web sitesi düşün:

• Tasarım göz kamaştırıyor ✨
• Animasyonlar uçuyor 🛸
• Kodlar tertipli, girintiler hizalı 🧼

Ama…

• 👩‍🦯 Ekran okuyucu kullanan biri sitede kayboluyor
• ⌨️ Sadece klavye kullanan biri butona ulaşamıyor
• 🧠 Okuma güçlüğü olan biri metni çözemiyor

İşte o an site şunu diyor gibi oluyor:

“Ben herkes için değilim.” 😬

Ama biz ne diyoruz?

Web herkes içindir. ♿💙

Hazırsan HTML Accessibility dünyasına dalıyoruz 🚀

🤔 Accessibility (Erişilebilirlik) Nedir? (Ve Kimler İçin?)

Accessibility (kısaca a11y, aradaki 11 harften dolayı 😄), web sitelerinin herkes tarafından kullanılabilir olmasını hedefler.

Kimler için?

• Görme engelli kullanıcılar 👁️‍🦯
• İşitme engelli kullanıcılar 👂
• Motor becerileri sınırlı kullanıcılar 🖐️
• Dikkat / okuma zorluğu yaşayanlar 🧠

Mini sürpriz 🎁

Accessibility sadece engelli bireyler için değildir:

• Güneş altında ekranı zor görülenler ☀️
• Mouse’u bozuk olanlar ⌨️
• Yaşlı kullanıcılar 👵
• Yavaş internet kullananlar 🐢

Erişilebilir site = daha iyi kullanıcı deneyimi 😌

🧠 Accessibility Neden Bu Kadar Kritik?

Çünkü:

• ❌ Erişilemeyen site terk edilir
• ❌ Kullanıcı sinirlenir
• ❌ Google surat asar 😐

Ama erişilebilir site:

• ✔️ Daha iyi SEO
• ✔️ Daha uzun ziyaret süresi
• ✔️ Daha fazla kullanıcı

Google’ın gizli aşk dili:
Kullanıcı deneyimi ❤️

🏗️ 1. Semantic HTML: Erişilebilirliğin Temel Taşı

Accessibility’nin ilk adımı: doğru etiketi doğru yerde kullanmak.

❌ Yanlış Kullanım

<div onclick="goHome()">Anasayfa</div>

Ekran okuyucu:

“Bir div… ama ne işe yarıyor?” 🤨

✅ Doğru Kullanım

<button>Anasayfa</button>

Neden?

• Ekran okuyucu tanır
• Klavye ile erişilir
• Tarayıcı ne olduğunu bilir

En Önemli Semantic Etiketler

<header>
<nav>
<main>
<section>
<article>
<footer>

Semantic HTML = kendini anlatan kod 🗣️

🖼️ 2. Görseller ve alt: Görmeyenler İçin Görmek

❌ En Yaygın Hata

<img src="urun.jpg">

❌ Bir Tık Daha Kötü

<img src="urun.jpg" alt="resim">

✅ Doğru Kullanım

<img src="urun.jpg" alt="Ahşap masada duran siyah dizüstü bilgisayar">

Dekoratif Görseller

<img src="cizgi.png" alt="">

alt metni = görselin hikâyesi 📖

🏷️ 3. aria-label: Görünmeyen Ama Hayati Etiket

aria-label Ne Zaman Gerekli?

• İçinde metin olmayan butonlarda
• Sadece ikon içeren linklerde
• Anlamı sembolden belli olmayan elemanlarda

❌ Sorunlu Örnek

<button>🔍</button>

✅ Erişilebilir Örnek

<button aria-label="Ara">🔍</button>

aria-label = ekran okuyucuya fısıldanan sır 💌

⚠️ Uyarı:
Gereksiz yere aria-label kullanma.
Önce semantic HTML, sonra ARIA.

⌨️ 4. Klavye Erişilebilirliği: Mouse Yoksa Hayat Var

Kendine sor:

“Bu siteyi mouse olmadan gezebilir miyim?” 🤔

❌ Yanlış

<div onclick="submitForm()">Gönder</div>

✅ Doğru

<button type="submit">Gönder</button>

Odak (Focus) Meselesi

button:focus {
  outline: 3px solid #000;
}

Focus’u kaldırmak = kullanıcıyı karanlıkta bırakmak 🌑

🎨 5. Renk, Kontrast ve Renk Körlüğü Gerçeği

❌ Yanlış Yaklaşım

• “Kırmızı hata, yeşil doğru”

✅ Doğru Yaklaşım

• Renk + ikon + metin

<span class="error">❌ Hata oluştu</span>

Renk tek başına mesaj değildir 🎨

🧾 6. Form Accessibility: Sabır Testini Kolaylaştıralım

❌ Yanlış

<input type="email" placeholder="Email">

✅ Doğru

<label for="email">E-posta</label>
<input id="email" type="email">

Hata Mesajı Örneği

<p id="error" role="alert">E-posta zorunludur</p>

Placeholder geçici, label ömürlük ❤️

🧪 7. Mini Accessibility Kontrol Listesi

• ✔️ alt metinleri dolu mu?
• ✔️ Başlık sırası doğru mu? (h1 → h2)
• ✔️ Klavye ile her yere gidiliyor mu?
• ✔️ aria-label gerçekten gerekli mi?
• ✔️ Kontrast yeterli mi?

Her ✔️ = daha adil bir web 🌍

🎯 Büyük Özet (Kod + Vicdan)

• Accessibility bir opsiyon değil
• HTML bu işin temel taşı
• aria-label süs değil, ihtiyaç
• Erişilebilir site = kaliteli site

Web’i herkes için yapmıyorsan,
eksik yapıyorsun♿💙