Web tasarım ajansı olarak müşterilerimize hızlı, erişilebilir ve kullanılabilir siteler öneriyoruz. Kendi sitemizi ölçtüğümüzde ise şunu gördük: ölçtüğümüz dört sayfada performans 100’dü, ama erişilebilirlik 97 ve bir araç sayfamızda 92’ydi. Puanlar fena değildi; ama eksik 3 ve 8 puanın arkasında gerçek insanları ilgilendiren bir sorun vardı: bazı yazılar yeterince okunaklı değildi.
Bu yazıda ölçümümüzü, 71 hatanın aslında yalnızca beş renk çiftinden geldiğini, bunları nasıl düzelttiğimizi ve her düzeltmenin kontrast oranını nasıl değiştirdiğini anlatıyoruz. Erişilebilirliğin ne olduğunu ve neden önemli olduğunu ayrıca açıklamıyoruz; odak, kendi sitemizde yaptıklarımız. Siz de aynı yöntemi kendi sitenizde uygulayabilirsiniz.
Başlangıç Ölçümü: Performans 100, Erişilebilirlik 97
Ölçüm için Lighthouse’ı yerel bilgisayarımızda Chrome ile, mobil görünümde çalıştırdık. Canlı sitedeki dört sayfa türünü seçtik: ana sayfa, bir blog yazısı, bir hizmet sayfası ve bir ücretsiz araç sayfası (KDV hesaplama). PageSpeed Insights’ın kendi API’sinde günlük kota dolduğu için yerel Lighthouse’a geçtik; sonuçlar aynı aracın ölçümüdür.
| Sayfa | Performans | Erişilebilirlik | En iyi uygulamalar | SEO |
|---|---|---|---|---|
| Ana sayfa | 100 | 97 | 100 | 100 |
| Blog yazısı | 100 | 97 | 100 | 100 |
| Hizmet sayfası | 100 | 97 | 100 | 100 |
| Araç sayfası (KDV) | 100 | 92 | 100 | 100 |
Performans tarafında yapacak bir şey yoktu: yükleme süreleri laboratuvar ölçümünde 1,1 ile 1,5 saniye arasındaydı ve toplam engelleme süresi ile düzen kayması değerleri sıfırdı. Bu rakamlar bir laboratuvar simülasyonudur; gerçek kullanıcı verisi farklı çıkabilir. Asıl iş erişilebilirlikteydi.
Bir uyarı: Lighthouse erişilebilirlik puanı otomatik bir denetimdir ve yalnızca otomatik olarak tespit edilebilen sorunlara bakar. 100 puan, sitenin tamamen erişilebilir olduğu anlamına gelmez; aşağıda bunu ayrıca ele alıyoruz.
Asıl Sorun: Renk Kontrastı
Dört sayfada başarısız olan denetim “renk kontrastı” idi. Web İçeriği Erişilebilirlik Yönergeleri (WCAG) AA düzeyinde, normal boyuttaki metin için yazı rengi ile zemin rengi arasındaki kontrast oranının en az 4,5:1 olmasını ister; büyük metinde sınır 3:1’dir. Oran düştükçe özellikle düşük görme yetisi olan, aydınlık bir ortamda telefon kullanan ya da yorgun gözle okuyan kişiler için metin okunamaz hâle gelir.
Sayıların dökümü şöyleydi: ana sayfada 15, yazıda 15, hizmet sayfasında 24 ve araç sayfasında 17 öğe başarısız oldu; toplam 71 öğe. Ayrıca araç sayfasında iki giriş alanı etiketsizdi. Başarısız 71 öğeyi renk çiftine göre grupladığımızda bu işin göründüğünden çok küçük olduğunu fark ettik:
| Renk çifti | Başarısız öğe | Ölçülen oran |
|---|---|---|
| Koyu zemin (#171717) üzerinde gri (#737373) | 37 | 3,78 |
| Turuncu yazı (#c2410c) açık turuncu rozet zemininde | 24 | 4,31 ve 4,48 |
| Beyaz yazı WhatsApp yeşilinde (#25d366) | 4 | 1,98 |
| Açık yeşil küçük yazı WhatsApp yeşilinde | 4 | 1,70 |
| Açık zemin (#f8f2f0) üzerinde gri (#737373) | 2 | 4,27 |
Yani 71 hatayı beş renk kararına indirgedik. Bu önemli bir ders: kontrast hataları çoğu zaman tekil sayfa sorunu değil, bir tasarım seçiminin her yerde tekrarıdır. Doğru yerden düzeltirseniz tek değişiklik onlarca öğeyi kurtarır.
6 Düzeltme ve Her Birinin Sonucu
Düzeltmeleri tek tek, renk çiftinin tasarımdaki yeri üzerinden yaptık. Oranları WCAG’ın göreli parlaklık formülüyle ayrıca hesapladık, böylece değişiklikten önce sonucu biliyorduk:
- Koyu zemindeki gri yazılar (footer, yol izi, yazar etiketi). Gri tonunu bir kademe açtık (neutral-500’den neutral-400’e). Oran 3,78’den 7,11’e çıktı.
- Açık zemindeki küçük gri etiketler (fiyat dönemi, “Kuruluş” gibi etiketler). Tonu bir kademe koyulaştırdık (neutral-500’den neutral-600’e). Oran 4,27 ile 4,37 arasından 7,05’e çıktı.
- Rozet zemini. Turuncu rozet metninin zemini, vurgu renginin yaklaşık yüzde 10 yoğunluktaki tonuydu. Yoğunluğu yaklaşık yüzde 6’ya indirdik; zemin açıldı, metin ile arasındaki fark arttı ve 4,31 ile 4,48 olan oranlar 4,5 eşiğinin üzerine çıktı (Lighthouse bu öğeler için artık hata vermiyor).
- WhatsApp düğmelerindeki yeşil. Beyaz yazılı düğmenin zeminini #25d366’dan #0f8048’e koyulaştırdık. Oran 1,98’den 5,0’a çıktı.
- Yeşil düğmedeki küçük açıklama yazısı. Yüzde 80 saydam beyaz olan metni tam beyaza çevirdik. Oran 1,70’ten 5,0’a çıktı.
- Araç sayfasındaki etiketsiz giriş alanları. KDV hesaplama aracındaki iki alanın yanında görünür bir metin vardı ama alanla ilişkilendirilmemişti. Alanlara
aria-labelekledik (“KDV hariç tutar”, “KDV dahil tutar”); ekran okuyucu artık alanın ne olduğunu söylüyor.
Düzeltmeler toplamda 10 dosyada 19 satırlık bir değişiklik oldu. Hiçbiri sayfa düzenini değiştirmedi; yalnızca renkleri ve bir etiketi değiştirdik.
Dikkat: Marka Rengi mi, Okunabilirlik mi?
WhatsApp yeşili (#25d366) markanın tanınan rengidir; zeminini koyulaştırmak, düğmenin rengini resmî tonundan uzaklaştırır. Bu bir ödünleşimdi. Alternatif, yeşili koruyup yazıyı koyu yapmaktı: koyu yazının #25d366 üzerindeki oranı 9,38’dir ve daha yüksektir. Biz beyaz yazıyı ve koyu yeşili seçtik, çünkü sitedeki diğer düğmeler de beyaz yazılı ve tutarlılık bizim için önemliydi.
Bu tür kararlarda doğru cevap yoktur; önemli olan kararı bilerek vermek ve ödünleşimi not etmektir. Düğmedeki simgenin şeklini değiştirmedik; yalnızca zemin ve yazı arasındaki ilişkiyi düzelttik.
Sonuç: 10 Sayfa Türünde 100
Düzeltmelerden sonra kontrolü dört sayfa ile sınırlamadık; on sayfa türünde ölçtük: ana sayfa, blog yazısı, hizmet sayfası, KDV aracı, blog listesi, şehir sayfası, iletişim, ücretsiz araçlar listesi, SEO danışmanlığı ve yerel bir blog yazısı. İlk turda dördü 100 çıktı. İkinci turda blog listesi 97’de kaldı: üç küçük etiket aynı gri sorununu taşıyordu. Aynı gri tonu kuralını (2. düzeltme) bu etiketlere de uyguladık ve o sayfa da 100 oldu.
Bir not: düzeltme sonrası ölçümleri yayına almadan önce yerel sunucuda yaptık. Canlı sitede de aynı ölçümü tekrarlamak iyi bir alışkanlıktır; çünkü önbellek, üçüncü taraf betikler ve çerez bildirimi gibi unsurlar yerel ortamda görünmeyebilir. Ölçümlerin tamamı açık zeminde yapıldı; koyu tema için ayrı bir ölçüm yapmadık.
Lighthouse’ın Göstermediği Şeyler
100 puan bir bitiş çizgisi değil, bir taban çizgisidir. Lighthouse’ın otomatik olarak kontrol edemediği, ama erişilebilirlik için kritik olan konular şunlardır:
- Klavye ile kullanım: Tüm bağlantı ve düğmelere Tab tuşuyla ulaşabiliyor, odağın nerede olduğunu görebiliyor musunuz?
- Ekran okuyucu deneyimi: Sayfa, bir ekran okuyucuyla anlamlı bir sırayla okunuyor mu?
- Görsel açıklamalarının kalitesi: Alt metin varlığı otomatik kontrol edilir; ama metnin anlamlı olup olmadığı edilmez.
- Başlık yapısının mantığı: H1-H2-H3 sırası sayfanın konusunu doğru anlatıyor mu?
- Hareket ve animasyon: Kayan öğeler hareketten rahatsız olan kullanıcılar için durdurulabiliyor mu?
- Mobilde dokunma hedefleri: Düğmeler parmakla kolayca basılacak büyüklükte mi? Mobil deneyimin diğer unsurları için mobil SEO yazısına bakabilirsiniz.
Bunlar için gerçek bir kullanıcıyla ya da bir ekran okuyucuyla kısa bir deneme yapmak, otomatik aracın göremediklerini yakalar. Bunun sitenizin kullanıcı deneyimini genel olarak nasıl denetleyebileceği için sitenizi müşteri gibi test edin: 10 adımlık gizli müşteri turu yazısındaki yöntemi, hız ve etkileşim ölçütleri için Core Web Vitals nedir yazısını kullanabilirsiniz.
Kendi Sitenizde Nasıl Uygularsınız?
- Ölçün. Lighthouse’ı (Chrome’un geliştirici araçlarında ya da komut satırında) mobil görünümde çalıştırın; ana sayfa, bir içerik sayfası, bir hizmet ve bir form sayfası seçin.
- Başarısız öğeleri gruplayın. Her bir hatayı tek tek değil, yazı rengi ve zemin rengi çiftine göre sayın; birkaç çift çoğu hatayı açıklar.
- Düzeltmeyi tasarım dilinde yapın. Rengi sayfa sayfa değiştirmek yerine tasarım değişkeninde ya da yardımcı sınıfta değiştirin; tek değişiklik her yeri düzeltsin.
- Oranı önceden hesaplayın. İki rengin göreli parlaklığından kontrast oranını hesaplayan ücretsiz araçlar var; 4,5’in üzerinde olduğunu doğrulayıp uygulayın.
- Yeniden ölçün. Başka sayfa türlerini de ekleyin; ilk turda görünmeyen sorunlar ikinci turda çıkabilir.
- Elle kontrol edin. Klavye ve ekran okuyucuyla kısa bir deneme yapın.
- Ölçümü alışkanlığa çevirin. Yeni bir bileşen ya da renk eklediğinizde aynı kontrolü yineleyin.
Siteniz için kapsamlı bir tasarım ve teknik denetim isterseniz web tasarım hizmetimizi inceleyebilirsiniz.
Sık Yapılan Hatalar
- Puanı hedef sanmak: 100 puan faydalıdır, ama gerçek kullanıcının deneyimi ayrı bir sorudur.
- Sayfa sayfa düzeltmek: Aynı renk çifti onlarca yerde tekrarlanır; kökte düzeltin.
- Küçük metni unutmak: 11-12 piksellik etiketler ve dipnotlar kontrastın en sık bozulduğu yerlerdir.
- Saydam renkleri hesaba katmamak: Yüzde 80 saydam beyaz yazı, zemine göre beklenenden çok daha düşük bir oran verebilir.
- Yalnızca açık temayı ölçmek: Koyu temalı sitelerde iki temanın da ayrıca kontrol edilmesi gerekir.
- Etiketi görsel sanmak: Alanın yanındaki metin, alanla programatik olarak ilişkilendirilmedikçe ekran okuyucuya görünmez.
Sık Sorulan Sorular
Lighthouse erişilebilirlik puanı 100 olması siteyi tamamen erişilebilir yapar mı?
Hayır. Lighthouse yalnızca otomatik olarak tespit edilebilen sorunlara bakar. Klavye kullanımı, ekran okuyucu deneyimi ve içerik kalitesi gibi konular elle kontrol gerektirir.
Kontrast oranı kaç olmalı?
WCAG AA düzeyinde normal boyuttaki metin için en az 4,5:1, büyük metin için en az 3:1 gerekir. Daha yüksek düzey olan AAA için normal metinde 7:1 istenir. Bizim düzeltmelerimizden bazıları 7’nin üzerine çıktı, ama hedefimiz en az AA düzeyiydi.
Renk kontrastını nasıl hesaplarım?
İki rengin göreli parlaklığı WCAG’ın tanımladığı formülle bulunur; oran, parlak rengin parlaklığına 0,05 eklenmiş değerin, koyu rengin parlaklığına 0,05 eklenmiş değere bölünmesiyle elde edilir. Bunu elle yapmak yerine kontrast hesaplayıcılar ya da tarayıcının geliştirici araçları kullanılabilir.
Marka rengim kontrast kuralını geçmiyorsa ne yapmalıyım?
Üç seçenek var: rengin tonunu biraz koyulaştırmak ya da açmak, metin rengini değiştirmek ya da rengi yalnızca büyük metinde ve dekoratif öğelerde kullanmak. Hangi ödünleşimi seçeceğiniz markanıza bağlıdır; önemli olan bilerek seçmektir.
Erişilebilirlik SEO’ya katkı sağlar mı?
Doğrudan bir sıralama sinyali olarak kabul etmiyoruz; ancak okunaklı, düzgün yapılandırılmış ve kullanımı kolay bir site, kullanıcı deneyimini iyileştirir ve bu dolaylı olarak dönüşüme yansıyabilir. Etkisini ölçmeden kesin bir şey söylemiyoruz.
Bu düzeltmeler ne kadar sürdü?
Ölçüm, gruplama ve düzeltmeyle birlikte kısa bir çalışma oturumu yetti. Sürenin kısalığı, hataların birkaç tasarım kararından geldiğini gösteriyor; sorun sayfa sayfa dağınık olsaydı çok daha uzun sürerdi.
