İçeriğe geç

Günlük Tasarım

Avrupa Erişilebilirlik Yasası ve WCAG 2.2: Siteniz Hazır mı?

Avrupa Erişilebilirlik Yasası 28 Haziran 2025'te uygulamaya girdi. AB'deki kullanıcılara hizmet veren siteler için erişilebilirlik artık bir tercih değil; peki pratikte ne yapmak gerekiyor?

Yayın
Okuma süresi
6 dakika
Yazan
Webify

Erişilebilirlik uzun süre "olsa iyi olur" listesinde kaldı. 28 Haziran 2025 itibarıyla Avrupa Erişilebilirlik Yasası (European Accessibility Act, EAA) uygulamaya girdi ve bu tablo değişti. E-ticaret siteleri, bankacılık hizmetleri, rezervasyon ve bilet sistemleri gibi dijital hizmetler artık AB'deki kullanıcılara erişilebilir biçimde sunulmak zorunda. Türkiye'den Avrupa'ya satış yapan ya da Avrupalı kullanıcıya hizmet veren her marka için bu, doğrudan bir iş gereksinimi.

Kimleri Kapsıyor?

Yasa, şirketin nerede kurulu olduğuna değil, hizmetin kime sunulduğuna bakar. AB pazarında tüketiciye ürün satan bir online mağaza, merkezi İstanbul'da da olsa kapsamdadır. Çok küçük işletmeler (10 kişiden az çalışan ve yıllık cirosu 2 milyon avroyu aşmayan) hizmetler tarafında büyük ölçüde muaf tutulur; ancak büyüme planı olan her marka için bu muafiyet geçicidir.

Teknik taraftaki referans noktası EN 301 549 standardıdır; bu standart da web içeriği için pratikte WCAG ölçütlerine dayanır. Yani somut hedef, WCAG 2.1 AA seviyesini karşılamak, mümkünse 2.2 ile gelen yeni ölçütleri de kapsamaktır.

"Erişilebilir bir arayüz, engelli kullanıcılar için yapılmış bir istisna değildir; herkes için daha net, daha hızlı ve daha güvenilir bir arayüzdür."

WCAG 2.2 ile Gelen Ölçütler

WCAG 2.2, özellikle dokunmatik ekranlar, bilişsel yük ve klavye kullanımı üzerine yeni ölçütler ekledi. Tasarım aşamasında dikkate alınmazsa sonradan düzeltmesi en zor olanlar şunlar:

  • Odak görünürlüğü (2.4.11): Klavyeyle gezinirken odaklanan öğe yapışkan bir header ya da çerez bandı altında kalmamalı.
  • Hedef boyutu (2.5.8): Tıklanabilir alanlar en az 24×24 CSS pikseli olmalı ya da yeterli boşlukla ayrılmalı.
  • Sürükleme hareketleri (2.5.7): Sürükle-bırak ile yapılan her işlemin tek tıklamalı bir alternatifi bulunmalı.
  • Erişilebilir kimlik doğrulama (3.3.8): Giriş adımı kullanıcıdan bulmaca çözmesini ya da şifreyi hafızadan yazmasını şart koşmamalı; şifre yöneticisi ve yapıştırma desteklenmeli.
  • Gereksiz tekrar (3.3.7): Aynı süreçte daha önce girilen bilgi tekrar istenmemeli.

Pratik Kontrol Listesi

Bir siteyi erişilebilirlik açısından değerlendirirken ilk bakılan noktalar çoğunlukla aynıdır. Bunların büyük kısmı ekstra maliyet değil, doğru HTML alışkanlığıdır:

<!-- 1. Anlamlı yapı: div yerine doğru etiket -->
<header>, <nav>, <main>, <footer>, <button>

<!-- 2. İçeriğe atla bağlantısı -->
<a class="skip" href="#main">İçeriğe geç</a>

<!-- 3. Her form alanına görünür etiket -->
<label for="email">E-posta</label>
<input id="email" type="email" autocomplete="email">

<!-- 4. Görünür odak halkası -->
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

<!-- 5. Hareket hassasiyetine saygı -->
@media (prefers-reduced-motion: reduce) { * { animation: none; } }

Bunlara ek olarak metin kontrastı (normal metin için en az 4.5:1), anlamlı alt metinleri ve yalnızca renge dayanmayan hata mesajları da temel gereksinimler arasında. Otomatik araçlar (Lighthouse, axe) sorunların ancak bir kısmını yakalar; ekran okuyucu ve yalnızca klavyeyle yapılan manuel test her zaman şarttır.

Webify'da Biz Ne Yapıyoruz?

Bu sitede de kullandığımız temel ilkeler; içeriğe atla bağlantısı, her etkileşimli öğede belirgin :focus-visible stili ve prefers-reduced-motion tercihine göre kapanan animasyonlardır. Yeni projelerde erişilebilirliği lansman sonrası bir düzeltme değil, tasarım sisteminin ilk günden parçası olarak ele alıyoruz. Çünkü sonradan eklenen erişilebilirlik her zaman daha pahalıdır.