WCAG Nedir, Web Sitesine Nasıl Uygulanır?

Web erişilebilirliği, dijital ürünlerin ve platformların toplumun tüm kesimleri tarafından kısıtlama olmaksızın kullanılabilmesini sağlayan teknik ve yapısal bir gerekliliktir. Bu gerekliliğin küresel standartlarını belirleyen WCAG (Web Content Accessibility Guidelines), web sitelerini engelli bireyler için erişilebilir kılmayı amaçlayan evrensel dijital standartlardır. Yazılım mimarisinden tasarım kararlarına kadar geniş bir yelpazeyi kapsayan bu kılavuz, yalnızca sosyal sorumluluğun bir parçası değil, aynı zamanda yasal uyumluluk ve arama motoru optimizasyonu (SEO) süreçlerinin de temel bir bileşenidir. Bu teknik rehberde, "WCAG Nedir, Web Sitesine Nasıl Uygulanır?" sorusunu tüm mühendislik, tasarım ve ürün yönetimi boyutlarıyla analiz ederek, sitenizi küresel standartlara uyumlu hale getirmenin pratik yöntemlerini inceliyoruz.

WCAG (Web Content Accessibility Guidelines) Nedir?

WCAG'nin Amacı ve Tarihçesi

İnternet teknolojilerinin ilk yıllarında web siteleri ağırlıklı olarak statik metinlerden ve basit bağlantılardan oluşuyordu. Ancak web sitelerinin dinamikleşmesi, karmaşık kullanıcı arayüzlerinin (UI) gelişmesi ve zengin medya içeriklerinin artmasıyla birlikte, fiziksel, duyusal veya bilişsel kısıtlılıkları olan bireyler için ciddi engeller ortaya çıkmaya başladı. Bu engelleri ortadan kaldırmak amacıyla, web teknolojilerinin standartlarını belirleyen çatı kuruluş World Wide Web Consortium (W3C), 1990'ların sonlarında Web Erişilebilirliği Girişimi'ni (WAI - Web Accessibility Initiative) başlattı. WAI tarafından geliştirilen ve web sitelerinin engelli bireyler dahil herkes tarafından eşit şartlarda kullanılabilmesini amaçlayan evrensel dijital standartlar, WCAG (Web Content Accessibility Guidelines) adıyla literatüre girdi.

WCAG standartlarının gelişim süreci, internet teknolojilerinin evrimine paralel olarak şekillenmiştir:

• WCAG 1.0 (Mayıs 1999): Web erişilebilirliğinin ilk resmi yönergesiydi. Ağırlıklı olarak HTML işaretleme dilinin doğru kullanılmasına, görsellere alternatif metinler (alt text) eklenmesine ve temel yapısal hiyerarşinin korunmasına odaklanıyordu. Teknolojik olarak oldukça sınırlı bir dönemi hedef aldığı için dinamik web uygulamalarını kapsamakta yetersiz kalıyordu.

• WCAG 2.0 (Aralık 2008): Web teknolojilerinden bağımsız, daha geniş ve esnek bir yapı kurmak amacıyla geliştirildi. "POUR" adı verilen dört temel erişilebilirlik prensibi (Algılanabilirlik, Çalıştırılabilirlik, Anlaşılabilirlik, Sağlamlık) ilk kez bu sürümde tanımlandı. WCAG 2.0, günümüzde de pek çok yasal mevzuatın temel referans noktasını oluşturmaktadır.

• WCAG 2.1 (Haziran 2018): Mobil cihazların ve dokunmatik ekranların yaygınlaşmasıyla birlikte ortaya çıkan yeni ihtiyaçları karşılamak amacıyla yayımlandı. Mobil cihazlardaki jestler (sürükleme, çimdikleme vb.), ekran yönü (dikey/yatay mod uyumluluğu), kontrast oranları ve az gören ya da bilişsel engelleri olan kullanıcılar için ek başarı kriterleri (Success Criteria) getirildi.

• WCAG 2.2 (Ekim 2023): Modern web arayüzlerindeki karmaşıklığı azaltmayı ve kullanıcı deneyimini (UX) daha kapsayıcı hale getirmeyi amaçlayan en güncel sürümdür. Özellikle form doldurma süreçlerinde gereksiz veri girişlerinin önlenmesi, tıklama hedeflerinin minimum boyutları ve odaklama göstergelerinin görünürlüğü gibi pratik kullanılabilirlik konularına odaklanan 9 yeni başarı kriteri eklenmiştir.

W3C ve Web Erişilebilirliğindeki Rolü

W3C (World Wide Web Consortium), web standartlarını belirleyen, internetin kurucusu Sir Tim Berners-Lee tarafından yönetilen küresel ve bağımsız bir konsorsiyumdur. W3C bünyesindeki WAI (Web Accessibility Initiative), tarayıcı üreticileri, yazılım geliştiriciler, engelli hakları savunucuları ve araştırma kuruluşlarıyla ortaklaşa çalışarak erişilebilirlik yönergelerini oluşturur.

Konsorsiyumun temel misyonu, webin herkes için erişilebilir olmasını sağlamaktır. W3C, web erişilebilirliğini yalnızca bir "sosyal sorumluluk projesi" veya "yasal zorunluluk" olarak değil; internet mimarisinin doğal, organik ve teknik bir parçası olarak tanımlar. Bu doğrultuda, geliştirilen tüm yeni web standartları (HTML5, CSS Grid, ARIA vb.) doğrudan erişilebilirlik gereksinimleri gözetilerek tasarlanır.

Dijital Kapsayıcılık Kavramı

Dijital kapsayıcılık (digital inclusion), modern ekonomide ve toplumsal yaşamda bireylerin bilgiye, hizmetlere, istihdama ve sosyal etkileşime erişebilmesi için gerekli olan dijital yetenek ve erişim imkanlarının tamamını ifade eder. Bir web sitesinin erişilebilir olmaması, fiziksel bir mağazanın girişine rampa yapmamakla ya da asansör bulundurmamakla eşdeğer bir ayrımcılık yaratır.

Erişilebilirlik yalnızca kalıcı engelleri (görme, işitme, motor veya zihinsel engeller) olan bireylerle sınırlı değildir. Dijital kapsayıcılık çerçevesinde erişilebilirlik iyileştirmeleri, üç farklı kullanıcı senaryosunu doğrudan destekler:

1. Kalıcı Engeller: Doğuştan veya sonradan oluşan, kalıcı görme kaybı, işitme engeli, ellerini kullanamama gibi durumlar. Bu kullanıcılar ekran okuyucu (screen reader) yazılımlarına, Braille ekranlara veya özel klavyelere bağımlıdır.

2. Geçici Engeller: Kolu kırılan bir kullanıcının geçici olarak mouse kullanamaması ve sadece klavye navigasyonuna yönelmesi ya da geçici bir göz rahatsızlığı nedeniyle ekran kontrastını artırma ihtiyacı duyması.

3. Durumsal Sınırlamalar: Güneş ışığı altında mobil cihazından bir e-ticaret sitesine girmeye çalışan bir kullanıcının düşük kontrast nedeniyle içeriği okuyamaması veya gürültülü bir metroda video izlerken altyazılara ihtiyaç duyması.

Dijital kapsayıcılık odaklı tasarlanan bir web sitesi, bu üç senaryodaki kullanıcıların tamamına kusursuz ve engelsiz bir kullanıcı deneyimi sunmayı hedefler.

Web Erişilebilirliği Kurumlar İçin Neden Kritik Bir Gerekliliktir?

Yasal Zorunluluklar ve Uyumsuzluğun Cezaları

Dünya genelinde web erişilebilirliği, gönüllü bir uygulama olmaktan çıkıp bağlayıcı yasal düzenlemelerle desteklenen hukuki bir zorunluluğa dönüşmüştür. İşletmelerin ve kamu kurumlarının dijital platformlarını WCAG standartlarına uyumlu hale getirmemesi durumunda karşı karşıya kalabilecekleri başlıca yasal çerçeveler ve ceza riskleri şunlardır:

• ADA Title III (Americans with Disabilities Act - ABD): Amerika Birleşik Devletleri'nde ticari web siteleri, kamuya açık alanlar (places of public accommodation) olarak kabul edilmektedir. Web sitelerinin erişilebilir olmaması durumunda tüketiciler, federal mahkemelerde doğrudan tazminat davaları açabilmektedir. Her yıl binlerce şirket (özellikle e-ticaret siteleri, bankalar ve perakendeciler), erişilebilirlik standartlarını karşılamadıkları gerekçesiyle milyonlarca dolarlık uzlaşma ve dava masraflarıyla karşı karşıya kalmaktadır.

• European Accessibility Act (EAA - Avrupa Birliği): 2019/882 sayılı AB Direktifi olan EAA (Avrupa Erişilebilirlik Yasası), üye ülkeler genelinde yürürlüğe girmiştir. Bu yasa; e-ticaret siteleri, bankacılık hizmetleri, seyahat platformları, e-kitaplar ve tüm dijital ürün üreten/satan şirketler için WCAG 2.1 Level AA uyumluluğunu zorunlu kılmaktadır. Kurallara uymayan şirketler için üye ülkeler bazında ağır idari para cezaları ve faaliyet durdurma gibi ciddi yaptırımlar uygulanmaktadır.

• 5378 Sayılı Engelliler Kanunu (Türkiye): Türkiye Cumhuriyeti mevzuatında da engelli bireylerin bilgi ve iletişim teknolojilerine erişiminin sağlanması yasal güvence altındadır. Özellikle kamu kurumları, belediyeler ve kamu hizmeti sunan özel kuruluşların web sitelerinin erişilebilir olması zorunludur. Aile ve Sosyal Hizmetler Bakanlığı bünyesindeki denetim mekanizmaları, standart dışı siteler için idari yaptırım süreçleri işletmektedir.

Marka İtibarı ve Kullanıcı Deneyimi Üzerindeki Etkileri

Erişilebilirlik yatırımları, doğrudan kurumsal itibarın güçlenmesini sağlar. Toplumsal eşitliğe ve kapsayıcılığa değer veren markalar, tüketiciler gözünde daha yüksek bir güvenilirlik kazanır. Sosyal açıdan sorumlu bir imaj çizmek, özellikle yeni nesil tüketicilerin marka sadakatini doğrudan etkileyen bir faktördür.

Kullanıcı deneyimi (UX) perspektifinden bakıldığında ise, erişilebilirlik standartları doğrultusunda optimize edilmiş bir web sitesi, tüm kullanıcılar için daha akıcı bir gezinme deneyimi sunar. Örneğin:

• Yüksek renk kontrastı, parlak ekranlarda ve dış mekan kullanımlarında göz yorgunluğunu azaltır.

• Mantıklı ve tutarlı bir navigasyon yapısı, siteden hemen çıkma oranlarını (bounce rate) düşürür ve dönüşüm oranlarını (conversion rate) artırır.

• Net form alanları ve açıklayıcı hata mesajları, kullanıcıların e-ticaret ödeme adımlarında veya üyelik formlarında hata yapma sıklığını azaltarak sepeti terk etme oranlarını düşürür.

Erişilebilirlik süreçlerinde sıklıkla atıfta bulunulan "Kaldırım Rampası Etkisi" (Curb-Cut Effect), engelli bireyler için yapılan iyileştirmelerin aslında toplumun tamamının konforunu ve kullanım kolaylığını artırdığını kanıtlamaktadır.

SEO Performansı ve Web Erişilebilirliği Arasındaki Bağlantı

Arama motorları, özellikle Google, bir web sitesini tararken ve dizine eklerken yapay zeka tabanlı botlar kullanır. Google'ın tarama botları (crawlers), görselleri doğrudan insan gözüyle göremez veya karmaşık fare hareketlerini simüle edemez. Başka bir deyişle, bir arama motoru botu, web sitenizi tıpkı görme engelli bir kullanıcının ekran okuyucuyla taradığı gibi tarar.

Bu teknik benzerlik nedeniyle, WCAG standartlarına uyum sağlamak, web sitenizin teknik SEO performansını doğrudan yukarı taşır:

• Görsel Alt Metinleri (Alt Text): Görsellere eklenen doğru ve açıklayıcı alt metinler, ekran okuyuculara bilgi verirken aynı zamanda Google Görseller arama sonuçlarında üst sıralarda yer almanızı sağlar.

• Semantik Yapı ve Hiyerarşi: @@CODE0@@, @@CODE1@@, @@CODE2@@, @@CODE3@@, @@CODE4@@, @@CODE5@@ gibi HTML5 semantik etiketlerinin ve düzenli başlık (H2, H3, H4) hiyerarşisinin kullanılması, hem ekran okuyucuların sayfayı doğru seslendirmesini sağlar hem de arama motoru botlarının sayfa mimarisini ve içerik odağını doğru çözümlemesine yardımcı olur.

• Kullanılabilirlik Metrikleri (Core Web Vitals): Erişilebilirlik standartları, sayfa yüklenme hızını ve düzen kararlılığını (CLS - Cumulative Layout Shift) dolaylı olarak destekler. Karmaşık JavaScript kütüphaneleri yerine yerel tarayıcı özelliklerinin kullanılması, performansı artırır.

WCAG'nin Dört Temel Prensibi (POUR Standartları) Nelerdir?

Algılanabilir (Perceivable)

Algılanabilirlik prensibi, web sitesinde sunulan bilgi ve kullanıcı arayüzü bileşenlerinin, kullanıcıların duyularıyla algılayabileceği şekilde sunulmasını gerektirir. Kullanıcıların içeriği görebilmesi veya duyabilmesi için alternatif kanalların oluşturulması bu prensibin temelini oluşturur.

• Metin Olmayan İçerikler İçin Metin Alternatifleri: Grafikler, fotoğraflar, simgeler ve diğer metin dışı bileşenler için açıklayıcı yazılı alternatifler sağlanmalıdır. Böylece ekran okuyucu kullanan bir görme engelli, görselin ne anlama geldiğini sesli olarak duyabilir.

• Zamana Dayalı Medya Alternatifleri: Ses kayıtları için transkriptler (metin dökümleri), videolar için ise senkronize edilmiş altyazılar (captions) ve görsel olayları anlatan sesli betimlemeler (audio descriptions) sunulmalıdır.

• Ayırt Edilebilirlik: İçeriklerin ön planı (örneğin metinler) ile arka planı (örneğin renkler veya arka plan görselleri) birbirinden kolayca ayırt edilebilmelidir. Bu durum, metin boyutlarının işlev kaybı olmadan %200'e kadar büyütülebilmesini ve renklerin tek başına bir bilgi iletme aracı olarak kullanılmamasını (örn: "Hatalı alanlar kırmızıyla gösterilmiştir" ifadesinin yanında sembollerin de yer alması) gerektirir.

Çalıştırılabilir (Operable)

Çalıştırılabilirlik, kullanıcı arayüzü bileşenlerinin ve navigasyonun kullanıcılar tarafından kontrol edilebilir ve yönetilebilir olmasını şart koşar. Kullanıcıların sitenizi fare olmadan, alternatif giriş cihazlarıyla veya yalnızca klavye kullanarak tam fonksiyonel bir şekilde gezebilmesi gerekir.

• Klavye Erişilebilirliği: Sitedeki tüm dinamik öğeler (butonlar, linkler, form alanları, açılır menüler, modal pencereler) yalnızca klavye (özellikle Tab, Shift+Tab, Enter ve boşluk tuşları) kullanılarak tetiklenebilmelidir. Klavye odağı (focus), sayfadaki hiçbir alanda sıkışıp kalmamalıdır (keyboard trap).

• Yeterli Zaman: Kullanıcıların içeriği okuması, formları doldurması veya işlemleri tamamlaması için yeterli süre tanınmalıdır. Eğer oturum süresi gibi zamana dayalı sınırlar varsa, kullanıcıya bu süreyi uzatma veya devre dışı bırakma seçeneği sunulmalıdır.

• Nöbetleri Önleme (Seizures and Physical Reactions): Web sitesi, ışığa duyarlı epilepsi nöbetlerini tetikleyebilecek saniyede 3 kereden fazla yanıp sönen flaşörler, ani animasyonlar veya yoğun hareketli görsel ögeler içermemelidir.

• Kolay Navigasyon: Kullanıcıların sayfa içinde yollarını bulmalarına, nerede olduklarını anlamalarına ve istedikleri içeriğe hızla ulaşmalarına yardımcı olacak araçlar (sayfa başlıkları, site haritaları, kırıntı menüler - breadcrumbs, belirgin odak çizgileri) sağlanmalıdır.

Anlaşılabilir (Understandable)

Anlaşılabilirlik prensibi, hem web sitesindeki metin tabanlı bilgilerin hem de arayüzün çalışma mekanizmasının kullanıcılar tarafından kolayca kavranabilmesini hedefler.

• Okunabilirlik ve Dil Tanımlama: Web sayfasının ana dili, HTML kod yapısında (örn: <html lang="tr">) teknik olarak belirtilmelidir. Böylece ekran okuyucular, kelimeleri doğru aksan ve telaffuz kurallarına göre seslendirir. Teknik veya sektörel terimler, kısaltmalar ve karmaşık jargonlar için açıklayıcı glosaryumlar veya ipuçları yer almalıdır.

• Tahmin Edilebilirlik: Sayfalar ve etkileşim bileşenleri tutarlı ve öngörülebilir şekillerde çalışmalıdır. Örneğin, bir bağlantıya veya forma odaklanıldığında, sayfa düzeni kullanıcının izni olmaksızın aniden değişmemelidir. Ana navigasyon menüsü tüm alt sayfalarda aynı sırada ve aynı yapıda kalmalıdır.

• Girdi Yardımı (Hata Yönetimi): Kullanıcıların veri girişi yaparken hata yapmasını önleyecek mekanizmalar kurulmalıdır. Hatalı giriş yapıldığında, sistem hatanın hangi alanda olduğunu ve nasıl düzeltileceğini metinsel olarak açıkça belirtmelidir. Kritik finansal veya yasal işlemler içeren formlarda, kullanıcılara verileri kontrol etme, düzeltme veya işlemi geri alma şansı sunulmalıdır.

Sağlam (Robust)

Sağlamlık prensibi, web içeriğinin mevcut ve gelecekteki kullanıcı aracısı (browser) teknolojileri ve ekran okuyucular gibi yardımcı teknolojilerle (assistive technologies) uyumlu bir şekilde çalışabilmesini güvence altına alır.

• Geriye ve İleriye Dönük Uyumluluk: Web sayfalarında kullanılan kodlar, standart yazım kurallarına uygun olmalıdır. HTML etiketlerinin doğru açılıp kapatılması, benzersiz ID'lerin (kimlik etiketlerinin) çiftlenmemesi ve elemanların hiyerarşik olarak doğru iç içe geçmesi bu prensibin temel gerekliliğidir.

• Yardımcı Teknolojilerle Kusursuz İletişim: Standart dışı, özel olarak geliştirilmiş JavaScript arayüz bileşenleri (custom UI components), ekran okuyucuların anlayabileceği standart isim, rol ve değerlere (Name, Role, Value) sahip olmalıdır. Bu durum, ARIA (Accessible Rich Internet Applications) etiketlerinin doğru biçimde entegre edilmesiyle sağlanır.

WCAG Uyumluluk Seviyeleri: A, AA ve AAA Ne Anlama Gelir?

Seviye A: Temel Erişilebilirlik

Seviye A, bir web sitesinin engelli bireyler tarafından kullanılabilmesi için karşılanması gereken en temel, minimum erişilebilirlik derecesidir. Bu seviyedeki kriterler karşılanmadığında, sitenin belirli engelli grupları tarafından kullanılması teknik olarak neredeyse imkansız hale gelir.

• Öne Çıkan Gereksinimler:

• Tüm resimler için temel düzeyde görsel alt metinlerinin bulunması.

• Sayfaların yalnızca klavye kullanılarak gezilebilmesi (ancak odak çizgisinin stili veya belirginliği gibi detaylar bu aşamada esnek bırakılabilir).

• Sitede otomatik oynayan ses veya videoların kullanıcı tarafından durdurulabilmesi.

• Başlıkların mantıksal bir sırayla gitmesi.

Seviye A, bir başlangıç noktası olarak kabul edilmekle birlikte, yasal riskleri ortadan kaldırmak ve modern bir kullanıcı deneyimi sunmak için hiçbir zaman tek başına yeterli değildir.

Seviye AA: Geniş Kapsamlı Erişilebilirlik

Seviye AA, dünya genelindeki yasal otoriteler (EAA, ADA, Section 508) tarafından ticari ve kurumsal web siteleri için zorunlu kılınan, küresel olarak kabul görmüş standart seviyedir. Bu seviye, engelli kullanıcıların önündeki en yaygın ve en büyük engelleri ortadan kaldırmayı amaçlar.

• Öne Çıkan Gereksinimler:

• Renk Kontrast Oranı: Normal metinler için en az 4.5:1, büyük metinler (18pt bold veya 24pt normal) ve grafiksel arayüz elemanları için en az 3:1 oranının sağlanması.

• Görünür Odak (Focus Visible): Klavye ile gezinirken aktif olan elemanın etrafındaki odak çerçevesinin net, kalın ve yüksek kontrastlı bir şekilde görünür olması.

• Hata Önerileri: Kullanıcı formda hata yaptığında sistemin sadece "Hata var" dememesi, hatanın nasıl düzeltileceğine dair metinsel ipuçları vermesi.

• Metin Boyutlandırma: Sayfanın yapısı, yerleşimi veya işlevselliği bozulmadan metinlerin %200 oranında büyütülebilmesi.

• Multimedya Altyazıları: Önceden kaydedilmiş tüm video içerikleri için senkronize altyazıların bulunması.

Seviye AAA: En Yüksek Erişilebilirlik Standardı

Seviye AAA, WCAG kılavuzundaki en katı, en derinlemesine erişilebilirlik derecesidir. Genellikle kamu kurumlarının kritik bilgilendirme portalları, engelli dernekleri ve özel hedef kitleye sahip web siteleri tarafından uygulanır. Tüm ticari web sitelerinin genelinde AAA seviyesine ulaşması, teknik mimari kısıtlamaları ve tasarım esnekliği üzerindeki radikal etkileri nedeniyle oldukça zordur.

• Öne Çıkan Gereksinimler:

• Renk Kontrast Oranı: Metinler için kontrast oranının en az 7:1 seviyesine çıkarılması.

• İşaret Dili: Tüm önceden kaydedilmiş video içerikleri için işaret dili çevirisinin ekrana entegre edilmesi.

• Arka Plan Sesleri: Konuşma içeren ses dosyalarının arka planında hiçbir gürültü veya müzik bulunmaması ya da bu seslerin kullanıcı tarafından kapatılabilmesi.

• Bağlamsal Yardım: Form alanlarında kullanıcıların hata yapmasını önlemek için her adımda detaylı, bağlama duyarlı yardım (help) metinlerinin sunulması.

Kurumlar İçin Hangi Seviye Hedeflenmeli?

Ticari başarı, yasal güvenlik ve tasarım esnekliği arasında en optimum dengeyi sağlayan hedef WCAG 2.2 Seviye AA uyumluluğudur. Küresel mevzuatların tamamına yakını bu seviyeyi referans alır.

Aşağıdaki tablo, seviyeler arasındaki teknik farkları ve uygulama derinliklerini karşılaştırmalı olarak sunmaktadır:

Web Sitesini WCAG Standartlarına Nasıl Uygun Hale Getirilir? (Uygulama Adımları)

Kapsamlı Bir Erişilebilirlik Denetimi (Audit) Nasıl Yapılır?

Erişilebilirlik entegrasyonu, mevcut durumun net bir fotoğrafını çekmekle başlar. Kapsamlı bir erişilebilirlik denetimi (accessibility audit) üç ana aşamadan oluşur:

1. Otomatik Taramalar: Geliştirme ekipleri, tüm kod tabanını hızlıca analiz etmek için otomatik araçlar (axe-core, Lighthouse, WAVE) kullanır. Bu araçlar sayfalardaki eksik alt metinleri, yanlış başlık hiyerarşilerini ve kontrast hatalarını dakikalar içinde tespit eder. Ancak otomatik araçların erişilebilirlik hatalarının yalnızca %30 ila %40'ını yakalayabildiği teknik olarak bilinmelidir.

2. Manuel Testler: Bir mühendis veya QA (Kalite Güvence) uzmanı, fareyi tamamen devre dışı bırakarak web sitesini sadece Tab ve yön tuşlarıyla gezmeye çalışır. Bu aşamada klavye odağının mantıklı bir sırada hareket edip etmediği, modal pencerelerin klavyeyle kapatılıp kapatılamadığı ve odak kayıplarının olup olmadığı tespit edilir.

3. Ekran Okuyucu Simülasyonları: Sitenin görme engelli bir kullanıcı gibi deneyimlenebilmesi için Windows ortamında NVDA veya JAWS, macOS/iOS ortamında ise entegre VoiceOver yazılımları aktif edilerek tüm kritik akışlar (ürün satın alma, üyelik formu doldurma, filtreleme yapma) baştan sona test edilir.

Görsel ve İşitsel İçeriklerin Optimizasyonu (Alt Metinler ve Transkriptler)

Sitenizde yer alan tüm görsel ve işitsel unsurlar, alternatif formatlarla desteklenmelidir:

• Doğru Alt Metin Yazımı: Görseller için kullanılan alt etiketleri kısa, öz ve görselin sayfadaki amacına uygun olmalı; "resim.jpg" veya "kırmızı elbise resmi" gibi jenerik ifadelerden kaçınılmalıdır.

    <!-- Hatalı Kullanım -->
    <img src="blue-shoes.jpg" alt="ayakkabı">

    <!-- Doğru Kullanım (E-Ticaret Bağlamında) -->
    <img src="blue-shoes.jpg" alt="Mavi renkli, su geçirmez, bağcıklı erkek koşu ayakkabısı">

Eğer görsel sadece tasarım amaçlı kullanılan dekoratif bir öge ise (örneğin arka plan çizgileri veya dekoratif ikonlar), ekran okuyucunun bu görseli es geçmesi ve kullanıcıyı gereksiz yere meşgul etmemesi için alt etiketi boş bırakılmalıdır:

    <img src="decorative-wave.svg" alt="">

• Video ve Ses Dosyaları: Sitedeki tüm video içeriklerine WebVTT (.vtt) formatında hazırlanmış senkronize altyazılar eklenmelidir. Ses dosyaları ve podcast'ler için ise ses kaydında geçen tüm konuşmaların metin dökümü (transkript) hemen dosyanın altında veya bir bağlantı aracılığıyla sunulmalıdır.

Semantik Kod Yapısı ve Klavye Navigasyonu

Ekran okuyucular, web sayfalarını taranabilir kılmak için HTML kod yapısındaki etiketlerin semantik (anlamsal) anlamlarını kullanır. Web sitelerinde "div çorbası" (div soup) olarak adlandırılan, her şeyin @@CODE0@@ ve @@CODE1@@ etiketleriyle yazıldığı yapılardan kaçınılmalıdır.

• Semantik Yapı Tasarımı:

    <!-- Hatalı Yapı -->
    <div class="header">
        <div class="nav-bar">Menü Elemanları</div>
    </div>
    <div class="main-content">
        <div class="button" onclick="submitForm()">Gönder</div>
    </div>

    <!-- Doğru Semantik Yapı -->
    <header>
        <nav aria-label="Ana Menü">Menü Elemanları</nav>
    </header>
    <main>
        <button type="submit">Gönder</button>
    </main>

• Klavye Navigasyonu ve Odaklama (Focus):

Tarayıcıların varsayılan klavye odaklanma çizgileri (CSS outline özelliği) tasarım kaygılarıyla @@CODE0@@ veya @@CODE1@@ yapılarak kesinlikle gizlenmemelidir. Eğer varsayılan tarayıcı stili beğenilmiyorsa, CSS ile marka renklerine uygun, belirgin bir özel odak stili tanımlanmalıdır:

    /* Doğru Odak CSS Uygulaması */
    a:focus, button:focus, input:focus {
        outline: 3px solid #0056b3;
        outline-offset: 2px;
    }

Renk Kontrast Oranları ve Tipografi Ayarları

Tasarım sürecinin en başında, Figma veya Adobe XD gibi araçlarda renk paletleri oluşturulurken erişilebilirlik test edilmelidir:

• Renk Kontrast Hesaplamaları: Metin rengi ile arka plan rengi arasındaki kontrast, dünya standartlarında kabul gören formüllerle hesaplanır. Görme kaybı veya renk körlüğü olan bireyler için bu oranlar hayati öneme sahiptir.

• Tipografi Ayarları: Kullanıcıların tarayıcı ayarlarından varsayılan yazı boyutunu büyüttüklerinde sitenin yerleşiminin bozulmaması için font boyutları kesinlikle sabit @@CODE0@@ (piksel) cinsinden tanımlanmamalıdır. Bunun yerine, tarayıcı taban boyutunu (genellikle 16px) referans alan göreceli @@CODE1@@ veya em birimleri tercih edilmelidir:

    /* Hatalı Sabit Yazı Boyutu */
    body { font-size: 16px; }

    /* Doğru Göreceli Yazı Boyutu */
    body { font-size: 1rem; } /* 16px'e denk gelir ve yakınlaştırmada esner */
    h1 { font-size: 2.25rem; } /* 36px'e denk gelir */

ARIA (Accessible Rich Internet Applications) Etiketlerinin Doğru Kullanımı

ARIA (Erişilebilir Zengin İnternet Uygulamaları), HTML5'in semantik olarak yetersiz kaldığı karmaşık web arayüzlerinde (örneğin akordeon menüler, dinamik tab yapısı, açılır pencereler, canlı sohbet pencereleri) ekran okuyuculara ek bilgi ve yönlendirme sağlayan özel öznitelikler (attributes) setidir.

ARIA kullanımında en temel kural şudur: "Hiç ARIA kullanmamak, yanlış ARIA kullanmaktan daha iyidir." Eğer bir işlev yerel HTML etiketleriyle çözülebiliyorsa, asla ARIA kullanılmamalıdır. Ancak özel bir JS bileşeni yazılıyorsa ARIA durumları aktif edilmelidir:

<!-- Akordeon (Açılır-Kapanır SSS) Örneği -->
<button aria-expanded="false" aria-controls="faq-answer-1" id="faq-btn-1">
    Erişilebilirlik yasal olarak zorunlu mu?
</button>
<div id="faq-answer-1" role="region" aria-labelledby="faq-btn-1" hidden>
    <p>Evet, belirli küresel pazarlarda ve kamu kurumlarında yasal zorunluluktur.</p>
</div>

Burada @@CODE0@@ niteliği, akordeonun o an açık mı kapalı mı olduğunu ekran okuyucuya bildirir ve JavaScript aracılığıyla dinamik olarak @@CODE1@@ veya false olarak güncellenir.

WCAG Uyumluluğu İçin Kullanılabilecek Araçlar ve Test Yöntemleri

Otomatik Erişilebilirlik Test Araçları (WAVE, Lighthouse, Axe)

Otomatik test araçları, projenizin geliştirme aşamasında veya yayındaki sitelerde en hızlı şekilde geri bildirim almanızı sağlayan yazılımlardır.

• Google Lighthouse: Google Chrome tarayıcısında entegre olarak gelen bu araç, web sitelerinin performans, SEO ve en iyi uygulamalarının yanı sıra erişilebilirlik düzeyini de 100 üzerinden puanlar. Lighthouse, temel kontrast hatalarını ve eksik HTML etiketlerini yakalamak için ideal bir ilk kontrol aracıdır.

• Axe Accessibility (Deque Systems): Geliştiriciler arasında endüstri standardı olarak kabul edilen en güçlü erişilebilirlik test motorudur. Chrome ve Firefox tarayıcı eklentileri sayesinde sayfadaki erişilebilirlik ihlallerini tespit eder, hangi WCAG kriterine aykırı olduğunu gösterir ve çözüm önerileri sunar.

• WAVE (Web Accessibility Evaluation Tool): WebAIM tarafından geliştirilen bu tarayıcı eklentisi, sayfa üzerine görsel simgeler ekleyerek hataları doğrudan sayfa yerleşimi üzerinde gösterir. Özellikle teknik olmayan içerik yöneticileri ve tasarımcılar için hataları görselleştirmede oldukça etkilidir.

Manuel Test ve Kullanıcı Testleri

Otomatik araçlar, sitenizin teknik olarak kod uyumluluğunu denetlese de kullanıcı deneyimindeki mantık hatalarını çözemez. Örneğin; otomatik bir araç bir görselde alt="resim" yazılı olmasını yeterli bulabilir, ancak bu metnin görseli açıklamadığını anlayamaz. Bu nedenle manuel testler zorunludur:

• Klavye Testleri: Fareyi bilgisayardan çıkarın ve sitenizdeki tüm adımları sadece klavyeyle tamamlamayı deneyin. Sepete ürün ekleyebiliyor musunuz? Menüyü açıp kapatabiliyor musunuz? Odak nerede olduğunu takip edebiliyor musunuz?

• Ekran Okuyucu Testleri: Görme engelli kullanıcıların deneyimini taklit etmek için bilgisayarınızdaki ekran okuyucuyu açın ve ekranı kapatarak sadece sesli yönlendirmelerle sitenizde hedeflediğiniz bir işlemi (örneğin bir hizmet formu doldurmayı) tamamlamaya çalışın.

• Kullanıcı Deneyim Grupları (User Testing): Sitenizin gerçek dünyadaki başarısını ölçmek için farklı engelleri olan (görme engelli, disleksi hastası, motor becerileri kısıtlı vb.) gerçek kullanıcılardan oluşan test gruplarıyla kullanılabilirlik testleri düzenleyin. Onların yaşadığı takılmalar ve engeller, en değerli geliştirme raporlarını oluşturacaktır.

WCAG Denetimi İçin Kontrol Listeleri

Bir projenin yayına çıkmadan önce geçmesi gereken temel adımları içeren yapılandırılmış bir kontrol listesi, hata oranını en aza indirir. Bu kontrol listesi; tasarımcıların, yazılımcıların ve içerik editörlerinin rollerine göre bölünmeli ve her sprint sonrasında denetlenmelidir.

Sürekli izleme stratejisinin bir parçası olarak, bu kontrol listeleri her yeni özellik geliştirildiğinde veya tasarım güncellendiğinde tekrar gözden geçirilmelidir.

Sürekli İzleme ve Bakım Stratejileri

Web siteleri dinamik yapılardır. Bugün %100 WCAG AA uyumlu olan bir web sitesi, yarın bir içerik editörünün alt metinsiz eklediği yeni bir görsel veya bir yazılımcının eklediği yeni bir JavaScript kütüphanesi nedeniyle erişilemez hale gelebilir. Erişilebilirliği sürdürülebilir kılmak için şu adımları izleyin:

• CI/CD Süreçlerine Entegrasyon: Yazılım geliştirme süreçlerinize (CI/CD hatlarına) otomatik erişilebilirlik testlerini (örn: Cypress-axe veya Playwright-axe) entegre edin. Her yeni kod güncellemesinde erişilebilirlik puanı düşerse kodun canlıya çıkması otomatik olarak engellensin.

• İçerik Editörlerinin Eğitimi: Sitenize içerik giren editör ekibine, görsellere nasıl anlamlı alt metinler yazacaklarını, başlık hiyerarşisini (H2'den sonra doğrudan H4 gelmemesi gerektiği gibi) nasıl koruyacaklarını öğreten teknik eğitimler verin.

• Erişilebilirlik Beyanı (Accessibility Statement): Web sitenizde, sitenizin hangi WCAG seviyesini hedeflediğini, şu anki uyumluluk durumunu ve kullanıcıların bir erişim engeliyle karşılaşmaları durumunda size nasıl geri bildirim verebileceklerini belirten resmi bir "Erişilebilirlik Beyanı" sayfası yayınlayın. Bu beyan yasal süreçlerde iyi niyet göstergesi olarak kabul edilir.