Web Sitenizi Erişilebilir Nasıl Yaparsınız: WCAG 2.2 Başlangıç Rehberi

Bir web sitesini erişilebilir yapmak için, insanların fareyle olduğu kadar klavye, ekran okuyucu, yakınlaştırma ya da anahtar cihazla da kullanabileceği şekilde inşa edin: düğmeler, bağlantılar, başlıklar ve form etiketleri için gerçek HTML öğeleri kullanın, görsellere anlamlı alternatif metin verin, metin kontrastını yüksek tutun ve odağı görünür kılın. Hedeflenecek standart WCAG 2.2 Seviye AA'dır. Otomatik denetleyiciler sorunun bir kısmını yakalar; on dakikalık bir klavye ve ekran okuyucu testi ise geri kalanının çoğunu yakalar.

Pratikte "erişilebilir" ne demektir?

Erişilebilirlik insanlarla ilgilidir: ekran okuyucu kullanan görme engelli biri, klavyeyle gezinen titremesi olan biri, sayfayı yüzde 200'e kadar yakınlaştıran az görmeli biri, parlak güneş altında okuyan biri, geçici olarak kolu kırık biri. İyi erişilebilirlik çoğu zaman siteyi herkes için daha iyi yapar: daha net yapı, okunabilir metin, hataları açıklayan formlar.

Referans standart, W3C'nin Web İçeriği Erişilebilirlik Yönergeleri'dir (WCAG). Eylül 2026 itibarıyla güncel sürüm WCAG 2.2'dir (Ekim 2023'te yayımlanmış, Aralık 2024'te güncellenmiştir); WCAG 3 erken bir taslaktır. WCAG dört ilke etrafında düzenlenmiştir: içerik algılanabilir, kullanılabilir, anlaşılabilir ve sağlam olmalıdır; üç uygunluk seviyesi vardır:

Birkaç yerdeki yasalar WCAG'a atıfta bulunur; örneğin Avrupa Erişilebilirlik Yasası, Haziran 2025'ten beri AB'de birçok tüketiciye dönük dijital hizmete uygulanmaktadır. Hangi kuralların sizin için geçerli olduğu nerede faaliyet gösterdiğinize ve neyi sattığınıza bağlıdır; emin değilseniz bir danışmana sorun. Bu rehber pratik işi anlatır.

Seçenekler: oraya nasıl ulaşılır?

Çoğu küçük site için ilk ikisi yeterlidir: yapay zekâya baştan erişilebilir inşa etmesini söyleyin, sonra yayından önce denetleyin.

En çok önem taşıyan düzeltmeler

Doğru HTML öğelerini kullanın

Erişilebilirliğin çoğu doğru HTML ile bedavadır. Bir <button> odaklanabilir, Enter ve Boşluk ile çalışır ve düğme olarak duyurulur. Tıklama işleyicisi olan bir <div> bunların hiçbirini yapmaz. Yapay zekâ tarafından üretilen kod bazen her şey için stilize div'ler kullanır; anlamsal öğeler isteyin:

• Eylemler için <button>, gezinme için <a href>
• Sayfa başına bir <h1>, sonra sırayla <h2>, <h3> — ekran okuyucu kullanıcıları başlıklar arasında atlar
• Yer işaretleri: <header>, <nav>, <main>, <footer>
• Her form alanına bağlı <label>
• <html lang="tr"> ile sayfanın dili

ARIA özniteliklerini yalnızca hiçbir yerel öğe uymadığında kullanın — örneğin özel bir sekme kümesi ya da combobox için. Yanlış ARIA, hiç olmamasından daha kötüdür.

Klavye erişimi ve görünür odak

Fareyle yapabildiğiniz her şey yalnızca klavyeyle de yapılabilmelidir (WCAG 2.1.1). Sayfada Tab'a basın: her bağlantı, düğme ve alan mantıklı bir sırayla erişilebilir olmalı ve odağın nerede olduğunu her zaman görebilmelisiniz (2.4.7 Odak Görünür). WCAG 2.2, odaklanan öğenin yapışkan üst bilgilerin ya da çerez bandının tamamen arkasında kalmaması gerektiğini ekledi (2.4.11, Seviye AA).

Sık görülen hatalar: yalnızca üzerine gelindiğinde açılan menüler, odağı tutmayan ya da Escape ile kapatılamayan pencereler ve yerine bir şey konmadan CSS'te outline: none kullanmak.

Metin alternatifleri

Anlamlı her görselin, bağlamda ne gösterdiğini anlatan bir alternatif metni olmalıdır ("Tadım menüsünü hazırlayan şef", "image1.jpg" değil). Dekoratif görseller ekran okuyucuların atlaması için boş alt="" alır. Yalnızca simge içeren düğmelerin erişilebilir bir adı olmalıdır ("Kapat", "Ara"). Videolarda altyazı, seslerde ise metin dökümü olmalıdır.

Renk ve kontrast

WCAG 2.2 AA, normal metin için en az 4,5:1 kontrast oranı (1.4.3) ve büyük metin için 3:1, ayrıca giriş kenarlıkları ve anlam taşıyan simgeler gibi arayüz parçaları için 3:1 (1.4.11) ister. Açık gri yer tutucu metinler ve soluk düğmeler en sık başarısız olan örneklerdir. Ayrıca anlamı yalnızca renkle taşımayın — geçersiz bir alandaki kırmızı kenarlığın bir hata mesajına da ihtiyacı vardır.

Yeniden boyutlandırma ve akış

Metin yüzde 200'e yakınlaştırıldığında kullanılabilir kalmalı (1.4.4) ve içerik 320 CSS pikselde yatay kaydırma olmadan çalışmalıdır (1.4.10). Mobil uyumlu bir web sitesi nasıl yapılır rehberindeki duyarlı yerleşim bunların çoğunu karşılar.

Hedef boyutu, formlar ve hatalar

• Hedef boyutu: WCAG 2.2 AA, işaretçi hedeflerinin en az 24 x 24 CSS pikseli olmasını ya da daha küçüklerin etrafında yeterli boşluk bırakılmasını ister (2.5.8). Büyük olan telefonda daha naziktir.
• Formlar: yalnızca yer tutucu değil, görünür etiketler; net yönergeler ve neyin yanlış olduğunu ve nasıl düzeltileceğini söyleyen, alanın yanında duran hata mesajları.
• Giriş: İnsanlara bulmaca çözdürmeyin ya da alternatifi olmadan bir kod yazdırmayın; şifre yöneticilerine ve yapıştırmaya izin verin (3.3.8 Erişilebilir Kimlik Doğrulama).

İşe yarayan komutlar

Bu siteyi WCAG 2.2 Seviye AA'ya uygun olacak şekilde inşa et: anlamsal HTML yer işaretleri, sayfa başına bir h1 ve sırayla başlıklar, gerçek düğme ve bağlantı öğeleri, her form alanında etiketler, görünür odak stilleri, en az 4,5:1 metin kontrastı, anlamlı görsellerde alternatif metin ve dekoratif olanlarda alt="", ayrıca html lang ayarı.

/signup ve /checkout sayfalarını erişilebilirlik açısından denetle. Yalnızca klavye kullanımını, odak sırasını, görünür odağı, etiketleri, hata mesajlarını, kontrastı ve simge düğmelerin ekran okuyucu adlarını kontrol et. Her sorunu WCAG ölçütüyle listele, sonra görsel tasarımı gerekenden fazla değiştirmeden düzelt.

Mobil menü klavyeyle kullanılamıyor. Bunu aria-expanded içeren bir düğme yap, açıldığında odağı menüye taşı, Escape ile kapat ve odağı düğmeye geri döndür.

Adım adım

1. Otomatik bir kontrol çalıştırın. Chrome DevTools'taki Lighthouse'un Erişilebilirlik bölümü ya da axe tarayıcı eklentisi, her ana sayfada. Bildirdiği her şeyi düzeltin.
2. Fareyi çıkarın. Her sayfada Tab'a basarak gezinin; her temel işi — kayıt olma, arama, ödeme — tamamlayın. Ulaşamadığınız, odağı göremediğiniz ya da çıkamadığınız her şeyi not edin.
3. Yüzde 200'e yakınlaştırın ve pencereyi telefon genişliğine daraltın. Hiçbir şey kesilmemeli ya da yatay kaydırma gerektirmemelidir.
4. On dakika bir ekran okuyucu deneyin: Mac ve iPhone'da VoiceOver, Android'de TalkBack ya da Windows'ta NVDA (ücretsiz). Başlıkları, bağlantıları ve form alanlarını dinleyin. Adı olmayan "düğme" ya da "bağlantı, buraya tıklayın" yapılacak iş demektir.
5. Metin, düğme ve alanların kontrastını bir kontrast denetleyicisiyle kontrol edin.
6. Düzeltin, sonra aynı görevleri yeniden test edin.
7. Bir erişilebilirlik beyanı yayımlayın: hangi standardı hedeflediğinizi ve sorunların nasıl bildirileceğini yazın — ve gelen bildirimlere yanıt verin.

Sık yapılan hatalar

• Bir kaplama widget'ına güvenmek, kodu düzeltmek yerine.
• Odak çizgilerini düzensiz göründükleri için kaldırmak, yerine bir şey koymadan.
• Yer tutucu metni tek etiket olarak kullanmak. Biri yazmaya başlayınca kaybolur ve çoğu zaman düşük kontrastlıdır.
• "Buraya tıklayın" ve "Devamını oku" bağlantıları. Bağlam dışında ekran okuyucu kullanıcıları aynı bağlantıların listesini duyar.
• Anahtar kelimelerle doldurulmuş alternatif metin. Alternatif metin insanlar içindir; görseli betimleyin.
• Bir kez test etmek. Her yeni özellik klavye erişimini bozabilir. Yayından önce test sürecinize bir klavye turu ekleyin.

Erişilebilirlik kontrol listesi

• Ana sayfalarda otomatik kontrol (Lighthouse ya da axe) temiz
• Her görev yalnızca klavyeyle tamamlanabiliyor
• Odak her zaman görünür ve yapışkan öğelerin arkasında kalmıyor
• Anlamsal başlıklar, yer işaretleri, düğmeler ve bağlantılar; lang ayarlı
• Anlamlı alternatif metinler; dekoratif görseller alt=""; videolarda altyazı
• Metin kontrastı ≥ 4,5:1 (büyük metin ≥ 3:1); arayüz parçaları ≥ 3:1
• Yüzde 200 yakınlaştırmada ve 320 px genişlikte çalışıyor
• Her form alanının görünür bir etiketi ve açık hata mesajları var
• Sorunların bildirilebileceği bir yol içeren erişilebilirlik beyanı

Bunların arkasındaki kavramlar için web erişilebilirliği nedir rehberini okuyun. Erişilebilir tasarım ile iyi tasarım büyük ölçüde örtüşür; görsel tarafı için yapay zekâ ile güzel görünümlü bir uygulama nasıl tasarlanır rehberine bakın.

Mythex'te erişilebilirlik

Mythex'te istediğiniz standartla inşa edersiniz; bu yüzden ilk komutunuza ve sonraki isteklerinize "WCAG 2.2 AA" yazın. Önizlemenin telefon boyutundaki çerçevesini kullanarak küçük ekranları kontrol edebilirsiniz (Önizleme ve Kod), ama klavye, yakınlaştırma ve ekran okuyucu testleri en iyi şekilde yayımlanmış adreste ya da önizlemenin kendi sekmesinde açılmasıyla yapılır. Ajandan bir sayfayı denetlemesini, bulduklarını düzeltmesini isteyin; sonra düzeltmeleri kendiniz test edin — otomatik bir tarama bir başlangıçtır, onay değildir.

Sorular