Web sitesi erişilebilirliği, ziyaretçilerin içerik ve işlemlere farklı araçlarla ulaşmasını destekler. Bu rehber, WCAG temelinde klavye, kontrast, alternatif metin, form ve okunabilirlik kontrollerini işletme sitenize uyarlamanıza yardımcı olur.
Bir ziyaretçi menüye klavyeyle ulaşamayabilir. Form alanının adını duyamayabilir. Düşük kontrast yüzünden fiyatı seçemeyebilir. Bu engeller, potansiyel müşterilerin teklif, randevu veya satın alma akışından kopmasına neden olur.
Web sitesi erişilebilirliği, farklı yeteneklere ve kullanım koşullarına sahip kişilerin sitenizde işlem yapmasını destekler. Konu sadece ekran okuyucu kullanan ziyaretçileri kapsamaz. Geçici sakatlık, parlak güneş ışığı, küçük ekran veya yavaş bağlantı da erişim deneyimini etkiler.
Web sitesi erişilebilirliği işletmeniz için ne sağlar?
WCAG, Web İçeriği Erişilebilirlik Yönergeleri adını taşıyan uluslararası bir çerçevedir. WCAG 2.2, tasarımcılar, içerik ekipleri ve geliştiriciler için ortak kontrol noktaları sunar. Çoğu işletme sitesi ilk hedef olarak AA düzeyini referans alır.
- Algılama: Ziyaretçi metni, görseli ve medyayı farklı duyularla anlayabilmelidir.
- Kullanım: Ziyaretçi fare, klavye veya yardımcı teknolojiyle her görevi tamamlayabilmelidir.
- Anlama: Başlıklar, talimatlar ve hata mesajları açık bir yol göstermelidir.
- Teknoloji uyumu: Kod, tarayıcılar ve yardımcı teknolojilerle tutarlı çalışmalıdır.
Bu ilkeler, tek tek sayfalardan çok bileşenleri ilgilendirir. Menü, açılır pencere, arama, filtre ve form gibi tekrar eden parçaları önce inceleyin. Hukuki koşulları sözleşme ve sektörünüze göre ayrıca değerlendirin.
AA düzeyi tek başına erişim bildirimi için yeterli kanıt sunmaz. Test kayıtlarını sayfa ve bileşen bazında saklayın. Her yeni özelliği bu kayıtların kapsamına ekleyin.
Denetim kapsamını ziyaretçi yolculuğuyla belirleyin
Kontrole tüm sayfalarla başlamayın. Ziyaretçinin iş hedefiyle başlayan temsilci akışları seçin. Bir hizmet işletmesi için teklif formu, telefon bağlantısı ve randevu adımı önem taşır. Bir satış sitesi için ürün arama, filtreleme, sepet ve ödeme adımları öne çıkar.
Örneğin teklif akışında ziyaretçi hizmet sayfasını açar, paketi inceler ve formu gönderir. Bu akışta başlıklar, bağlantılar, seçim alanları ve hata mesajları birlikte çalışmalıdır. Sadece formu kontrol etmek yeterli olmaz.
Her akışta başlangıç, karar ve tamamlanma noktalarını not edin. Aynı şablonu kullanan sayfaları gruplandırın. Böylece tek bir bileşendeki hatanın tüm siteye etkisini görürsünüz.
İncelemeyi ana sayfayla sınırlamayın. Arama sonucu, boş sepet ve hata sayfası da işlem yolunu kesebilir. Çerez tercihlerini ayrı bir senaryoda deneyin.
- Sayfa adresi ve bileşen adı.
- Ziyaretçinin tamamlamak istediği işlem.
- Engelin ortaya çıktığı cihaz veya yardımcı teknoloji.
- İlgili WCAG ölçütü ve çözüm önceliği.
- Sorumlu kişi, kabul koşulu ve hedef tarih.
Yeni projelerde bu maddeleri web tasarım briefine ekleyin. Tasarım ve geliştirme ekipleri aynı kabul ölçütleriyle ilerler.
Klavye ile tüm işlemleri tamamlayın
Fare kullanmayan kişiler, sayfanın tamamını klavye üzerinden dolaşır. Klavye testi, erişilebilirlik denetiminin en hızlı elle inceleme adımıdır. Sayfayı yenileyin ve yalnız Tab, Shift+Tab, Enter, Boşluk ve Esc tuşlarıyla hedef işlemi tamamlayın.
Özel bileşenler en çok hatayı burada üretir. Görsel olarak düğme gibi duran her alan, klavyede de aynı eylemi sunmalıdır. Klavye odağı görünmeyen veya kapalı bir öğeye sıçramamalı.
Odak sırasını görünür tutun
Her odaklanabilir öğe, belirgin bir odak göstergesi taşımalı. Odak sırası ekrandaki okuma sırasıyla uyumlu olmalı. Çerez bildirimi veya sabit sohbet penceresi odak halkasını kapatmamalı.
- Odak rengini arka plandan ayırın.
- Odak sırasını görsel sıralamayla karşılaştırın.
- Sayfa yüklenirken odağın görünmeyen öğelere atlamadığını doğrulayın.
Açılır bileşenlerde geri dönüşü koruyun
Açılır menü, sekme ve modal pencere, yani ekranda beliren ileti kutusu, ayrı test ister. Enter ve Boşluk tuşları düğmeleri çalıştırmalı. Esc açılır katmanı kapatmalı. Modal açıkken odak pencere içinde kalmalı. Pencere kapandığında odak, açan düğmeye dönmeli.
Sayfanın ilk klavye durağına ana içeriğe geç bağlantısı ekleyin. Bağlantı odak aldığında görünür hale gelsin. Tıklama işlevi taşıyan alanlarda button, yani düğme, öğesini kullanın. Sadece div, yani genel kapsayıcı, öğesine tıklama olayı eklemeyin.
Renk kontrastı ve okunabilirlik kontrolü
Renk anlamı taşıyan tek işaret olmamalı. Hatalı alanı yalnız kırmızı çerçeveyle belirtmeyin. Hata metni, ikon veya alan başlığı da ekleyin. Aynı yaklaşımı stok, indirim ve zorunlu alan bilgileri için kullanın.
Kontrast oranlarını bileşen bazında ölçün
AA düzeyi için normal metinde en az 4,5:1 kontrast oranını hedefleyin. Büyük metinde en az 3:1 oranını hedefleyin. Düğme kenarları, form alanı sınırları ve grafik simgeleri için de 3:1 oranını kontrol edin.
Kontrastı tasarım programında ve çalışan sayfada ayrı kontrol edin. Şeffaf katmanlar, görsel arka planlar ve koyu mod seçenekleri son görünümü değiştirir. Sadece tasarım dosyasındaki renk koduna güvenmeyin.
Tarayıcı yakınlaştırmasını %200'e çıkarın. Metnin üst üste binmediğini ve yatay kaydırmanın zorunlu kalmadığını kontrol edin. Metin içi bağlantılarda yalnız renk farkına dayanmayın. Alt çizgi veya başka görsel ipucu ekleyin.
Başlıklarla metni bölün. Kısa paragraflar yazın. Satır yüksekliğinde en az 1,5 kat boşluğu destekleyin. Metni sabit yükseklikte kutulara sıkıştırmayın.
Alternatif metinlerle görselin amacını aktarın
Ekran okuyucu, alternatif metin üzerinden görselin işlevini veya bilgisini aktarır. Alternatif metin, görseldeki her pikseli anlatmaz. Ziyaretçinin o görsel sayesinde anlaması gereken bilgiyi aktarır.
Görselin türüne göre karar verin
- Bilgi veren görsel: Konuyu ve bağlamı kısa biçimde açıklayın.
- İşlevsel simge: Simgede başlayan eylemi adlandırın.
- Dekoratif görsel: Boş alternatif metin kullanın. Ekran okuyucu gereksiz bilgi okumaz.
- Grafik veya şema: Ana bulguyu metinde açıklayın. Gerekirse veriyi liste olarak sunun.
Görsel metin içeriyorsa aynı metni sayfa içinde de sunun. Dosya adını veya anahtar kelime dizisini alternatif metin yerine koymayın. Bilgi veren görseller için yükleme ekranında alternatif metin alanını boş bırakmayın.
İçerik editörü görselin amacını seçebilsin. Sistem, dekoratif görsel seçeneğinde boş alternatifi korusun. Ürün görselinde renk, model veya paket içeriği gibi ayırt edici bilgileri yazın. Aynı bilgiyi her görselde tekrar etmeyin.
Form etiketlerini ve hata akışını test edin
İletişim, teklif ve ödeme formları doğrudan iş sonucunu etkiler. Her giriş alanı açık bir etikete sahip olmalı. Yer tutucu metin, etiketi tek başına karşılamaz. Kullanıcı yazmaya başladığında yer tutucu metin kaybolur.
Alanları açık biçimde adlandırın
- Ad, e-posta ve telefon gibi alanları label, yani alan etiketi, ile eşleştirin.
- Radyo düğmeleri ve onay kutularını fieldset, yani alan grubu, içinde toplayın.
- Legend, yani grup başlığı, ile seçenek grubunu açıklayın.
- Zorunlu alan bilgisini yıldız işareti yanında metinle belirtin.
- Ad, adres ve telefon alanlarında otomatik doldurma niteliğini tanımlayın.
Hata mesajını çözümle birlikte verin
Kullanıcı formu gönderdiğinde, hangi alanda sorun olduğunu açıkça yazın. Sadece kırmızı renk veya ünlem simgesi kullanmayın. Hata özetini formun üstünde gösterin ve odağı bu özete taşıyın. Şifre dışındaki bilgileri koruyun.
KVKK metni, ön bilgilendirme ve sözleşme bağlantıları da klavyeyle açılmalı. Bağlantı adı, açacağı belgeyi belirtmeli.
Adres, teslimat ve kart adımları olan e-ticaret sitelerinde süre sınırlarını da gözden geçirin. Ziyaretçi ek süre isteyebilsin veya işlem öncesinde zaman uyarısı görebilsin.
Web sitesi erişilebilirliği için yayın öncesi kontrol listesi
Otomatik tarama araçları bazı kod sorunlarını gösterir. Ancak araçlar, odak sırasını veya metnin bağlamını tek başına değerlendiremez. Her sürümde otomatik taramayı elle inceleme ve gerçek görev senaryolarıyla birleştirin.
- Sayfa dilini, başlık sırasını ve ana içerik geçişini kontrol edin.
- Her bağlantının amacını, çevresindeki metinden bağımsız da anlaşılır yazın.
- Tab sırasını, odak görünürlüğünü ve Esc davranışını deneyin.
- Metin, bileşen ve durum renklerinde kontrast oranlarını ölçün.
- Görsellerin alternatif metinlerini inceleyin.
- Videoların altyazılarını ve ses içeriklerinin metin dökümlerini inceleyin.
- Formu hatalı ve doğru bilgilerle gönderin. Hata ve başarı mesajlarını ekran okuyucuyla dinleyin.
- Mobil ekranda, yüksek yakınlaştırmada ve en az bir ekran okuyucuyla temel akışı test edin.
Bulduğunuz her sorun için sorumlu kişi, öncelik ve çözüm tarihi atayın. Ana menü veya ödeme gibi engelleyici sorunları ilk sıraya alın. İçerik ekleyen ekipler için alternatif metin ve başlık kurallarını yayın rehberine koyun.
Kontrolü iş akışına bağlayın
Erişilebilirliği yayın gününe bırakmayın. Tasarım dosyasında renk ve durum örneklerini onaylayın. Geliştirme aşamasında semantik HTML, yani anlamlı işaretleme, ve klavye davranışını inceleyin. Yayın sonrasında kullanıcı geri bildirimlerini düzenli kayda alın.
Bu yaklaşım, kurumsal web tasarım projelerinde içerik, tasarım ve yazılım kararlarını aynı hedefte toplar.
Sıkça Sorulan Sorular
WCAG nedir?
WCAG, web içeriğine erişim için ölçütler sunar. Yeni projelerde WCAG 2.2 ölçütlerini ve AA hedefini proje başında yazın. Ekip, bu hedefi tasarım, geliştirme ve yayın testlerine dahil etsin.
WCAG AA düzeyi işletme sitesi için yeterli mi?
AA düzeyi çoğu işletme sitesi için pratik bir başlangıç sunar. Ancak kamu kurumları, finansal hizmetler ve sözleşmeli projeler ek koşullar getirebilir. İlgili mevzuatı ve sözleşme koşullarını hukuk ekibinizle karşılaştırın.
Otomatik erişilebilirlik taraması yeterli olur mu?
Hayır. Araçlar eksik etiketleri ve bazı kontrast sorunlarını gösterebilir. Klavye sırası, açıklama kalitesi ve hata akışı için insan testi yapın. Gerçek bir görev senaryosu, araçların göremediği sorunları ortaya çıkarır.
Mevcut siteyi baştan tasarlamadan erişilebilir hale getirebilir miyim?
Önce en çok kullanılan şablonları ve dönüşüm akışlarını belirleyin. Ekibiniz, ortak bileşenleri düzelterek birçok sayfayı aynı anda iyileştirir. Ardından içerik ve medya kayıtlarını aşamalı olarak ele alın.
Yeni bir site veya yenileme projesinde erişilebilirlik kararlarını tasarım ve geliştirme planına baştan ekleyin. Teklif formu üzerinden sayfa akışınızı paylaşın; hedeflerinizi, önceliklerinizi ve teknik kapsamı birlikte netleştirelim.
