WCAG Uyumlu Web Mimari: Saf Kodun Gücü

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), sitenizin ekran okuyuculardan arama motoru botlarına kadar her platformda düzgün çalışmasını ister. Yasaya uygunluk bunun içinde zaten yer alır. Bunu birbirine yamanmış eklentilerle dolu sistemlerle sağlamak mümkün olmaz.

Saf Kod (Pure Code) ile Kontrol Sizde

Bir web mimarisini HTML, CSS ve JavaScript kullanarak temelden, saf kodile inşa ettiğinizde, her bir etiketin ve ARIA rolünün nereye gideceğine tam olarak siz karar verirsiniz. Bu hem hızı hem de arama motorlarıyla aranızdaki iletişimin kalitesini belirler.

• Temiz DOM Ağacı:İç içe geçmiş gereksiz <div>sarmalları yerine, sadece <main>, <article>, <nav>gibi anlamsal etiketler kullanılır. Botlar ve yardımcı teknolojiler sayfayı saniyeler içinde çözümler.
• Sıfır Eklenti Çatışması:"Erişilebilirlik Eklentisi" kurarak sitenizi WCAG uyumlu yapamazsınız. Saf kodda, kontrast oranları, odaklanma (focus) durumları ve klavye etkileşimleri css seviyesinde kalıcı olarak tasarlanır.
• Yıldırım Hızında Yükleme:Gereksiz hiçbir kütüphane yüklenmediği için Core Web Vitals metriklerinde (LCP, CLS, INP) tavan yaparsınız.

Multidisipliner Tasarım Yaklaşımı

Kreatif bir çözüm ortağı olarak sadece görseli tasarlayıp bırakmıyorum. O görselin koda dönüşürken görme engelli bir kullanıcıya nasıl betimleneceğini (Alt Text), renk kontrastının AA standartlarını karşılayıp karşılamadığını ve butonların yeterli tıklama alanına (hitbox) sahip olup olmadığını teknik bir disiplinle örüyorum. Multimedya ve UX SEO açısından görseli, kodu ve erişilebilirliği birlikte düşünmek dönüşüm oranını da etkileyebilir.

Günün sonunda; süslü görünen ama arkaplanda çöplüğe dönmüş siteler yerine, yalın, hedefe odaklı, hızlı ve herkes için erişilebilir bir mimari kurmak, gerçek dijital vizyondur. İleri SEO ve erişilebilirlik bu vizyonun teknik temelidir.

WCAG Temel İlkeleri

WCAG dört ilke üzerine kuruludur: içerik algılanabilir, arayüz kullanılabilir, bilgi anlaşılabilir ve kod farklı teknolojilerle uyumlu olmalıdır. Bu ilkeler başlık yapısından form etiketlerine kadar her ayrıntıya yansır.

Hızlı Erişilebilirlik Testi

• Sayfayı yalnızca klavyeyle gezin
• Görselleri kapatıp içeriğin anlaşılıp anlaşılmadığına bakın
• Sayfayı yakınlaştırıp düzenin bozulup bozulmadığını kontrol edin
• Renk kontrastını bir araçla ölçün

Başlık Hiyerarşisi Neden Önemli?

Ekran okuyucu kullanan biri sayfayı başlıklar arasında gezerek tarar. Bir başlık seviyesi atlanmışsa, örneğin H2'den sonra doğrudan H4 geliyorsa, sayfanın yapısı kafa karıştırıyor. Başlıkları görünüşe göre değil anlama göre seçin: yazı boyutunu stil verir, başlık seviyesini yapı belirler.

Sayfa Bölgeleri

Üst bölüm, gezinme, ana içerik ve alt bilgi için kendi etiketlerini kullanmak, ekran okuyucunun doğrudan istenen bölgeye atlamasına izin veriyor. Tek bir ana içerik bölgesi olmalı. Her şeyi aynı genel kutu etiketiyle sarmak, bu atlamayı imkânsız kılıyor.

Tablo ve Liste İşaretleme

Gerçek bir liste, liste etiketiyle yazılmalı, yan yana dizilmiş satırlarla değil. Tablo yalnızca tablo verisi için kullanılmalı ve sütun başlıkları belirtilmeli. Tabloyu yalnızca yerleşim için kullanmak, ekran okuyucuda anlamsız bir sıra oluşturuyor.

Açılır Menü ve Pencerelerde Odak

Bir menü ya da pencere açıldığında klavye odağı o bölgeye taşınmalı, kapandığında da onu açan düğmeye dönmeli. Odak yönetilmezse klavye kullanıcısı ekrandaki görünmeyen bir yerde kalıyor. Escape tuşuyla kapanmaları da beklenir. Bunu sitelerimde ayrıca tanımlıyorum.

Otomatik Dönen İçerik

Kendiliğinden kayan bir kaydırıcı okumayı zorlaştırıyor ve bazı kullanıcılar için engel oluşturuyor. Böyle içeriği durdurmak ya da duraklatmak için bir düğme koymak gerekiyor. En sade çözüm, otomatik dönen kaydırıcıyı hiç kullanmamak.

Video ve Ses İçin Alternatif

Videoya altyazı eklemek, işitme engelli kullanıcının yanı sıra sesi açamayan herkese yardım ediyor. Yalnızca ses içeren içerikler için metin karşılığı hazırlayın. Altyazıyı otomatik üretmek başlangıç için olur ama çıktıyı mutlaka gözden geçirin, çünkü otomatik altyazı Türkçede sık hata yapıyor.

Yazı Boyutu ve Yakınlaştırma

Sayfayı yüzde yüz yirmi, hatta yüzde iki yüz yakınlaştırdığınızda düzenin bozulmaması ve yatay kaydırma gerektirmemesi gerekiyor. Yazı boyutunu sabit piksel yerine göreli birimlerle tanımlamak, kullanıcının tarayıcı ayarlarıyla büyütme tercihine saygı gösteriyor. Siteyi bu şekilde yakınlaştırıp denemek tek dakika sürer.

Mimari Karar Baştan Verilir

Erişilebilirlik sonradan eklenen bir yama olarak kötü çalışıyor. Başlık yapısı, bölgeler ve form etiketleri sayfa tasarlanırken doğru kurulursa ek maliyet çok az. Yayından sonra düzeltmek ise her sayfayı tek tek elden geçirmek anlamına geliyor. Bu yüzden yeni bir site kurarken bu kuralları baştan koymak gerekiyor.

Test Ekibi Gerekir mi?

Küçük bir site için özel bir test ekibine gerek yok. Klavyeyle gezmek, yakınlaştırmak ve kontrast aracıyla bakmak çoğu sorunu gösteriyor. Daha geniş bir kitleye hizmet veren kurumsal sitelerde ise engelli kullanıcılarla gerçek bir deneme yapmak çok değerli geri bildirim getirir.

Kimlere Önermiyorum?

Çok küçük, tek sayfalık bir sitede tüm WCAG ölçütlerini ayrıntılı uygulamak yerine temel kontroller yeterli: kontrast, klavye, alt metin ve başlık sırası. Ayrıntıya girmeniz gereken durumlar yasal yükümlülükle ilgiliyse bu yazı hukuki görüş değil, ilgili destek gerekir. Kontrol listesi için ileri SEO ve erişilebilirlik ve erişilebilirlik ve SEO sayfalarına bakın.

Yasal Yükümlülükler

Erişilebilirlikle ilgili yasal yükümlülükler kuruma ve sektöre göre değişir. Teknik düzeltmeleri yapmak ile hukuki uygunluğu değerlendirmek ayrı işlerdir, ikincisi için hukuk alanında destek alın.

Sık Sorulan Sorular