Web Erişilebilirlik Rehberi: WCAG Temelleri
Kontrast, klavye ile gezinme, alternatif metin ve form etiketleri gibi WCAG temellerini örnek kodlarla açıklar; sitenizi kendiniz nasıl test edeceğinizi gösterir.
Aurora YazılımEditör ekibi
6 dk okuma
Web erişilebilirlik, görme, işitme, hareket ya da bilişsel farklılığı olan kişiler dahil herkesin bir siteyi algılayabilmesi, gezebilmesi ve kullanabilmesidir. Uluslararası ölçüt W3C’nin WCAG yönergeleridir; yeterli renk kontrastı, klavyeyle tam kullanım, görsellere alternatif metin ve etiketli formlar temel gereksinimlerdir. Bu ilkeler hem kullanıcı deneyimini hem de arama görünürlüğünü güçlendirir.
Erişilebilirlik Kimin İçin?
Erişilebilirlik çoğu zaman yalnızca görme engelli kullanıcılarla ilişkilendirilir. Oysa kapsam çok daha geniştir: renk körlüğü olanlar, eli kırık olduğu için fare kullanamayanlar, yaşlı kullanıcılar, gürültülü ortamda videoyu sessiz izleyenler ve güneş altında telefon ekranına bakan herkes.
Bu nedenle erişilebilir web tasarım, küçük bir kitle için yapılan ek bir iş değil, herkes için daha iyi bir deneyimdir. Net başlıklar, okunaklı metin ve tahmin edilebilir gezinme, engeli olmayan kullanıcıların da işini kolaylaştırır.
Erişilebilirlik ayrıca arama motoru görünürlüğünü destekler. Doğru başlık hiyerarşisi, açıklayıcı bağlantı metinleri ve görsel açıklamaları, arama motorlarının sayfayı anlamasına yardım eden unsurlarla büyük ölçüde örtüşür.
WCAG Nedir?
WCAG (Web Content Accessibility Guidelines), W3C bünyesinde hazırlanan web içeriği erişilebilirlik yönergeleridir. Yönergeler, test edilebilir başarı ölçütlerinden oluşur ve üç uygunluk seviyesine ayrılır: A, AA ve AAA. Çoğu kurum ve düzenleme için hedef, AA seviyesidir.
WCAG dört temel ilke üzerine kuruludur. Her ölçüt bu ilkelerden birine bağlıdır; ilkeleri anlamak, tek tek ölçütleri ezberlemekten daha kullanışlıdır. Resmî metne W3C WAI sayfasından ulaşabilirsiniz.
| İlke | Anlamı | Örnek |
|---|---|---|
| Algılanabilir | Bilgi en az bir duyuyla alınabilmeli | Görsellerde alternatif metin, videoda altyazı |
| Kullanılabilir | Arayüz farklı yollarla kullanılabilmeli | Klavyeyle tam gezinme, yeterli süre |
| Anlaşılabilir | İçerik ve davranış öngörülebilir olmalı | Açık hata mesajları, tutarlı menü |
| Sağlam | Yardımcı teknolojilerle uyumlu olmalı | Doğru HTML, geçerli işaretleme |
Renk Kontrastı ve Okunabilirlik
AA seviyesinde normal metin ile arka plan arasında en az 4,5:1 kontrast gerekir. Büyük metinlerde, yani yaklaşık 24 piksel ve üzeri ya da kalın 18,5 piksel ve üzeri yazılarda bu oran 3:1’e iner. Form kenarlıkları ve ikonlar gibi arayüz bileşenleri için de 3:1 oran beklenir.
Kontrastın yanında bir kural daha vardır: Bilgiyi yalnızca renkle vermeyin. Zorunlu alanları sadece kırmızı yıldızla, bağlantıları sadece renkle ayırt etmek renk körlüğü olan kullanıcıları dışarıda bırakır. Bağlantılarda alt çizgi, hatalarda açıklayıcı metin kullanın.
Metin boyutu da okunabilirliğin parçasıdır. Kullanıcı tarayıcıda yazıyı yüzde 200’e kadar büyüttüğünde içerik kaybolmamalı ve sayfa bozulmamalıdır.
Klavye ile Gezinme
Fare kullanamayan ya da ekran okuyucuyla gezinen kullanıcılar sitede Tab, Shift+Tab, Enter ve ok tuşlarıyla ilerler. Bu nedenle menüler, düğmeler, formlar ve açılır pencereler yalnızca klavyeyle eksiksiz kullanılabilmelidir.
- Görünür odak: Odaklanan öğe belirgin bir çerçeveyle gösterilmeli; odak çizgisini CSS ile tamamen kaldırmayın.
- Mantıklı sıra: Tab sırası görsel sırayı izlemeli.
- İçeriğe atla bağlantısı: Sayfanın başında, menüyü atlayıp ana içeriğe geçiren gizli bir bağlantı.
- Tuzak yok: Açılan bir pencereden Esc ile ya da klavyeyle çıkılabilmeli.
- Gerçek düğmeler: Tıklanabilir öğeler için div yerine button ve a etiketleri.
<a class="atla" href="#icerik">İçeriğe geç</a>
<header>...</header>
<main id="icerik">...</main>Alternatif Metin ve Görseller
Ekran okuyucular görselleri göremez; onun yerine alt özniteliğindeki metni okur. Alternatif metin, görselin sayfadaki işlevini kısaca anlatmalıdır. Bir ürün fotoğrafı için ürünün adı ve ayırt edici özelliği yeterlidir; görselin içinde metin varsa o metin alternatif metne de yazılmalıdır.
Yalnızca süs amaçlı görseller için boş alt değeri kullanılır; böylece ekran okuyucu onu atlar. Bir bağlantı ya da düğme yalnızca ikondan oluşuyorsa, ikonun ne yaptığı metinle belirtilmelidir.
<img src="zeytinyagi.webp" alt="500 ml cam şişede soğuk sıkım zeytinyağı">
<img src="dalga-deseni.svg" alt="">
<button aria-label="Menüyü aç">
<svg aria-hidden="true">...</svg>
</button>Formlar ve Ekran Okuyucu Uyumu
Formlar, erişilebilirlik sorunlarının en sık görüldüğü yerdir. Her alanın görünür ve koda bağlı bir form etiketi olmalıdır. Yalnızca kutunun içine yazılan yer tutucu metin, yazmaya başlayınca kaybolduğu için etiketin yerini tutmaz. Bir kurumsal web sitesi için teklif formu, bir mağaza için ödeme adımı klavyeyle ve ekran okuyucuyla tamamlanamıyorsa, o kullanıcı müşteriye dönüşemez.
Ekran okuyucu uyumu için hata mesajları ilgili alanla ilişkilendirilmeli ve ne yapılması gerektiğini açıkça söylemelidir: “Geçersiz giriş” yerine “Telefon numarası 10 haneli olmalıdır” gibi. Sayfanın dili html etiketindeki lang özniteliğiyle (Türkçe için tr) belirtilmelidir; aksi halde ekran okuyucu metni yanlış dilin kurallarıyla okur.
<html lang="tr">
...
<label for="tel">Telefon</label>
<input id="tel" type="tel" autocomplete="tel"
aria-describedby="tel-hata" aria-invalid="true">
<p id="tel-hata">Telefon numarası 10 haneli olmalıdır.</p>ARIA’yı Ne Zaman Kullanmalı?
ARIA öznitelikleri, HTML’in karşılayamadığı durumlar içindir. İlk kural şudur: Yerleşik bir HTML öğesi işi görüyorsa onu kullanın. Yanlış kullanılan ARIA, hiç kullanılmamasından daha fazla sorun çıkarabilir.
Mobil ve Dokunmatik Erişilebilirlik
Telefonda erişilebilirlik ek konular getirir. WCAG 2.2, dokunma hedefleri için AA seviyesinde en az 24×24 CSS pikseli öngörür; rahat kullanım için daha büyük hedefler tercih edilir. Yan yana sıkışmış küçük bağlantılar yanlış dokunmalara neden olur.
Ekran yönü kilitlenmemeli, içerik hem dikey hem yatay görünümde çalışmalıdır. Yakınlaştırmayı engelleyen ayarlar kullanılmamalıdır. Mobilde dikkat edilecek diğer noktaları mobil uyumlu web sitesi yazımızda ve mobil uyumlu tasarım sayfamızda bulabilirsiniz.
En Sık Görülen Hatalar
Sahada incelediğimiz sitelerde erişilebilirlik sorunları çoğu zaman aynı birkaç noktada toplanır. İyi haber şu ki bunların büyük bölümü küçük kod düzeltmeleriyle giderilebilir ve kullanıcıların hemen fark edeceği bir iyileşme sağlar.
- Açık gri zemin üzerine açık gri metin, yani yetersiz kontrast.
- Alternatif metni boş bırakılmış ya da dosya adıyla doldurulmuş ürün görselleri.
- “Tıklayın” ya da “devamı” gibi bağlamı anlatmayan bağlantı metinleri.
- Başlık seviyelerinin görünüşe göre seçilmesi; H1’den doğrudan H4’e atlamak.
- Klavyeyle açılmayan açılır menüler ve kapatılamayan açılır pencereler.
- Kendiliğinden başlayan, durdurulamayan slaytlar ve sesli videolar.
- Odak çizgisinin tasarım gereği tamamen gizlenmesi.
Sitenizi Nasıl Test Edersiniz?
Otomatik araçlar sorunların bir kısmını yakalar ama tamamını değil. En iyi sonuç, araçları elle yapılan kısa testlerle birleştirmekten gelir. Bu kontrol, iyi bir UI/UX tasarım sürecinin doğal parçasıdır; iki kavramın farkını UI ve UX farkı yazımızda anlattık.
- Fareyi bırakıp sayfayı yalnızca Tab ve Enter ile kullanın.
- Chrome geliştirici araçlarındaki Lighthouse ile erişilebilirlik raporu alın.
- Ücretsiz NVDA (Windows) ya da yerleşik VoiceOver (macOS, iOS) ile birkaç sayfayı dinleyin.
- Tarayıcıda yazıyı yüzde 200 büyütüp sayfanın bozulup bozulmadığına bakın.
- Görselleri kapatıp sayfanın hâlâ anlaşılır olup olmadığını kontrol edin.
Sık Sorulan Sorular
01Erişilebilirlik SEO’ya katkı sağlar mı?
Doğrudan bir sıralama sinyali olarak görülmese de doğru başlık yapısı, alternatif metin ve anlamlı bağlantı metinleri arama motorlarının sayfayı anlamasına yardım eder. Bu yüzden erişilebilirlik ile SEO uyumlu web tasarımı büyük ölçüde aynı temele dayanır.
02Erişilebilirlik eklentisi ya da araç çubuğu yeterli mi?
Sayfanın üstüne eklenen araç çubukları, koddaki temel sorunları çözmez. Etiketsiz bir form ya da klavyeyle açılmayan bir menü, kaynağında düzeltilmelidir.
03Mevcut bir siteyi erişilebilir yapmak mümkün mü?
Evet. Kontrast, alternatif metin ve form etiketleri gibi düzeltmeler genellikle mevcut yapı üzerinde yapılabilir. Klavye gezinmesi ve menü yapısı gibi temel sorunlar ise bazen tasarımın yeniden ele alınmasını gerektirir.
04Yasal bir zorunluluk var mı?
Bazı ülkelerde ve belirli sektörlerde erişilebilirlik yasal gerekliliktir; özellikle Avrupa pazarına hizmet veren işletmeler için konu giderek önem kazanıyor. Kendi durumunuz için güncel mevzuatı ve hukuk danışmanınızı kontrol edin.
Erişilebilirlik bir kez yapılıp unutulan bir iş değil, tasarımın ve içeriğin her aşamasında gözetilen bir kalite ölçütüdür. Sitenizi WCAG temellerine göre değerlendirmek için UI/UX tasarım hizmetimizi inceleyin; kurumsal sitenin diğer bileşenleri için kurumsal web sitesi nedir yazımızı okuyun. Edremit merkezli Aurora Yazılım, 2006’dan beri herkesin kullanabildiği web tasarımı projeleri geliştiriyor.
