Bir iletişim formunun ekranda düzgün görünmesi yeterli değildir. Klavyeyle gönderme düğmesine ulaşılamıyorsa, hata sadece kırmızı renkle belirtiliyorsa veya ekran okuyucu alanın adını söylemiyorsa ziyaretçi işlemi tamamlayamayabilir. Başlangıç noktanız bu tür somut engeller olsun.
WCAG Nedir, Hangi Seviyeyi Kullanmalısınız?
WCAG, W3C'nin yayımladığı Web Content Accessibility Guidelines, yani Web İçeriği Erişilebilirlik Kılavuzudur. WCAG 2.2 başarı ölçütlerini A, AA ve AAA düzeylerine ayırır. AA hedefi, ilgili A ve AA ölçütlerinin birlikte karşılanmasını gerektirir. Birkaç kontrolü geçmek bu seviyeye uygunluk ilan etmek için yeterli değildir.
Dört temel ilke algılanabilir, kullanılabilir, anlaşılabilir ve sağlam olmaktır; İngilizce baş harfleriyle POUR diye anılır. Örneğin konuşmayı altyazıyla sunmak algılamaya, klavye desteği kullanıma, açık hata mesajı anlamaya, doğru ad ve rol bilgisi yardımcı teknolojilerle uyuma hizmet eder. W3C'nin erişilebilirlik açıklaması, engelli kullanıcıların ihtiyaçlarını bu teknik kararların merkezine yerleştirir.
Projenin teknik hedefini sözleşme, kurum politikası ve geçerli düzenlemelerle birlikte belirleyin. Aşağıdaki dokuz kontrol, WCAG 2.2'ye dayanan bir başlangıç incelemesidir; bütün ölçütlerin yerine geçen sertifika listesi değildir.
Web Sitenizde Uygulayabileceğiniz 9 Erişilebilirlik Kontrolü
1. Bir İşlemi Yalnız Klavyeyle Tamamlayın
Önce menüden iletişim formuna gitmek gibi bir görev seçin. Tab ile ileri, Shift+Tab ile geri ilerleyin. Bağlantıyı Enter ile, düğmeyi Enter veya Space ile çalıştırın; seçili bileşenin türüne göre ok tuşları da gerekebilir. Menü, açılır pencere ve formun bütün işlevleri kullanılabilmeli; odak çıkılamayan bir yerde kalmamalıdır. Bütün gezinme yalnız Tab tuşundan ibaret değildir.
Klavye ölçütü işlevlerin klavye arayüzünden çalışmasını ister; serbest el çizimi gibi hareket yoluna bağlı işler için istisnalar vardır. Mobil tarayıcıda ve kullanılan yardımcı teknolojilerle ayrıca kontrol planlayın. Masaüstünde tamamlanan görev tek başına bütün cihazları doğrulamaz.
2. Odağın Nerede Olduğunu Görünür Tutun
Tab'a bastığınızda hangi bağlantı veya alanın etkin olduğunu görebilmelisiniz. Tasarımda odak çizgisini kaldırıp yerine görünür bir işaret koymamak, klavyeyle gezinmeyi zorlaştırır. Yapışkan üst menü ve çerez bildirimi gibi öğeleri açıkken de deneyin.
WCAG 2.2 AA içindeki 2.4.11 ölçütü, odaklanan bileşenin sayfanın kendi içeriği tarafından tamamen gizlenmemesini ister. Bileşeni bütünüyle görünür tutmak daha iyi bir tasarım hedefidir; AA'nın asgari ifadesiyle bu hedefi birbirine karıştırmayın.
3. Metnin ve Kontrollerin Kontrastını Ölçün
Normal metin için metin–zemin kontrastı en az 4,5:1, büyük metinde 3:1 olmalıdır. Büyük metin, ölçütte en az 18 pt veya kalın biçimde 14 pt olarak tanımlanır; yaklaşık karşılıkları 24 ve 18,67 CSS px'tir. Logolar ve etkin olmayan kontroller gibi istisnalar 1.4.3 açıklamasında yer alır.
Ölçümü yalnız ana paragrafta yapmayın: yardım metni, hata, bağlantı ve farklı zeminler de önem taşır. Kontrolü veya durumunu tanımak için gereken görsel bilgilerde metin dışı kontrast için 3:1 ölçütü ayrıca devreye girer. Bu, her düğmeye mutlaka çerçeve çizileceği anlamına gelmez. Durumu yalnız renk değişimiyle anlatmayın; metin, simge veya biçim gibi ek bir işaret kullanın.
4. Yazıyı Büyütün, Dar Ekranda İçeriği Kontrol Edin
Metni %200 büyüttüğünüzde içerik ve işlev kaybolmamalı. Ayrı bir kontrol olarak dikey okunan sayfayı 320 CSS piksel genişlikte inceleyin: normal metni okumak için sürekli sağa sola kaydırmak gerekiyor mu? Metin büyütme ile yeniden akış farklı ölçütlerdir. Harita ve veri tablosu gibi iki boyut gerektiren içeriklerin istisnaları vardır.
Başlıkların kesilmesi, form alanlarının üst üste binmesi veya gönderme düğmesinin dışarı taşması düzeltilecek sorunlardır. Yerleşimin temeli için responsive tasarım yaklaşımını, harf ve ağırlık seçimini gözden geçirmek için fontların kullanım özelliklerini birlikte değerlendirebilirsiniz.
5. Form Etiketini, Hatayı ve Sonucu Birlikte İnceleyin
Alan adı, yazmaya başlayınca kaybolmamalı. Görünür bir label ve alanla doğru ilişki kurun; açık ilişkilendirmede etiketin for değeri giriş alanının id değeriyle eşleşir. Placeholder, kalıcı etiketin yerine geçmez. W3C'nin form etiketleme örnekleri bu bağlantıyı gösterir.
Şemadaki üç işareti kendi formunuzda ayrı ayrı kontrol edin: 1 alanın adı görünür kalıyor mu; 2 klavye odağı belirgin mi; 3 hata metni hangi alanın nasıl düzeltileceğini söylüyor mu? “Geçersiz değer” yerine “E-posta adresinde @ işareti eksik” gibi uygulanabilir bir açıklama yazın. Girilmiş doğru bilgileri silmeyin.
Form geri bildirimi hem hatayı hem başarılı sonucu kapsar. Hata mesajı ilgili alanla yardımcı teknolojilerin anlayacağı biçimde ilişkilendirilmeli; dinamik bildirim veya odak yönetimi gerçek ekran okuyucuyla denenmelidir. Her değişikliği yüksek öncelikli sesli uyarıya çevirmek de kullanımın önüne geçebilir.
6. Görsele Amacına Göre Alternatif Metin Yazın
Bilgi taşıyan görseli sayfadaki görevine göre açıklayın. Yalnız dekor olan bir görselde alt="" kullanın. Görsel tek başına bağlantıysa alternatif metin hedefi veya eylemi anlatmalı. Karmaşık grafikte asıl bilgi ayrıca sayfanın metninde bulunmalı. W3C'nin alt metin karar ağacı, her resme uzun açıklama yazmak yerine amaca bakmayı önerir.
Dosya adı veya anahtar kelime listesi açıklama sayılmaz. Örneğin ürün fotoğrafının alt metni görünen ürünü ve ilgili özelliğini anlatabilir; “satın al” işlevi taşıyan tek simgenin metni ise görünümünden çok eylemini belirtmelidir.
7. Başlıkları, Dili ve HTML Öğelerini Kontrol Edin
Görsel olarak büyük yazmak, bir metni HTML başlığı yapmaz. Başlık düzeyleri içeriğin bölüm ilişkisini göstermeli; sayfanın dili lang ile doğru tanımlanmalıdır. İşlem için düğme, başka adrese gitmek için bağlantı kullanın. HTML öğelerinin anlamı, görünümün arkasındaki bu yapıyı açıklar.
Bir div öğesine role="button" eklemek, onu kendiliğinden klavyeyle çalışan düğmeye dönüştürmez. Yerleşik öğe uygun olduğunda onu kullanın; ARIA ile ad, rol veya durum eklediğinizde davranışı da test edin. Ekran okuyucuyla başlıklar ve form alanları arasında gezinmek, yalnız görsel incelemede fark edilmeyen sorunları açığa çıkarabilir.
8. Küçük Hedefleri ve Medya Kontrollerini Deneyin
Birbirine yakın küçük ikonlar yanlış seçime yol açabilir. WCAG 2.2 AA'daki hedef boyutu ölçütü 24×24 CSS pikseli esas alır; yeterli aralık, eşdeğer kontrol ve satır içi bağlantı gibi istisnaları vardır. “Her link mutlaka 24 piksel olmalı” şeklinde yorumlamayın. Kritik kontroller için daha rahat seçilebilen alanlar tasarlayın.
Video varsa konuşmayı ve anlamlı sesleri karşılayan altyazıyı kontrol edin. Ses kaydı için transkript, yalnız görüntüyle aktarılan gerekli bilgi için uygun betimleme düşünün. Oynatıcı da klavyeyle çalışmalı. Erişilebilir medya planlaması, gerekli alternatifin içeriğe göre seçilmesini açıklar. Otomatik başlayan hareketin durdurulabilmesi ve zaman sınırlı işlemler de inceleme kapsamına alınmalıdır.
9. Otomatik Bulguyu Elle Doğrulayın ve Kaydedin
Lighthouse, WAVE veya axe gibi araçlar bazı hataları bulmaya yardımcı olur; sıfır bulgu tam erişilebilirlik demek değildir. Alt metnin anlamını, görevin tamamlanabilirliğini veya hata mesajının anlaşılmasını yalnız tarama puanıyla değerlendiremezsiniz. W3C'nin ilk kontrol yaklaşımı da kapsamlı değerlendirme gereksinimini açıkça korur.
Her bulguda URL, tarih, tarayıcı/cihaz, kullanılan yardımcı teknoloji, tekrar adımları, beklenen davranış ve görülen sonucu yazın. Sonra sorumlu kişiyi ve yeniden test sonucunu ekleyin. “Form bozuk” yerine “Klavye odağı çerez kutusundan çıkamıyor; gönderme düğmesine ulaşılamıyor” gibi tekrar edilebilir bir kayıt, düzeltmeyi kolaylaştırır.
Erişilebilirlik, SEO ve Yasal Uyum Aynı Şey mi?
Hayır. Açıklayıcı alt metin gibi uygulamalar hem kullanıcıya hem görselin anlaşılmasına yardımcı olabilir; Google'ın görsel önerileri bu bağlamı açıklar. Fakat klavye erişimi veya bir denetim puanı için sıralama garantisi çıkarılamaz. Tarama, canonical ve indeksleme sorunları ayrıca teknik SEO kapsamında değerlendirilir.
Yasal kapsam da ülkeye ve kuruluşun faaliyetine bağlıdır. Türkiye'de 2025/10 sayılı Genelgeye ilişkin Bakanlık duyurusu, kapsanan kuruluşları ve izleme yapısını açıklar. Kendi yükümlülüğünüzü güncel resmî metin ve kurumunuza uygulanan şartlarla belirleyin; bu başlangıç listesi yasal uygunluk raporu değildir.
Hangi Düzeltmeden Başlamalısınız?
Önce işlemi bütünüyle engelleyen soruna bakın: açılamayan menü, gönderilemeyen form, kapatılamayan pencere. Ardından farklı sayfalarda tekrar eden ortak bileşenleri düzeltin. Aynı hatayı her sayfada ayrı ayrı yamamak yerine şablonun kaynağında çözmek bakım işini azaltır.
Erişilebilirlik kontrolünü UX/UI tasarım sürecine erken katın. Bir sonraki yayın öncesinde aynı görevi yeniden sınayın; mümkün olduğunda engelli kullanıcıların katıldığı değerlendirmelerle kapsamı genişletin. Hedef, raporda iyi görünen bir puandan önce kişinin işini tamamlayabilmesidir.
