Erişilebilir bir psikolog sitesi: herkesin kullanabildiği sayfa için yedi kontrol

Kimin için tasarlıyoruz?

Sitenizi okuyan kişi büyük harf ayarıyla telefon kullanan bir yakın, ekran okuyucuyla gezinen biri ya da kalabalık bir otobüste tek eliyle sayfayı kaydıran biri olabilir. Erişilebilirlik bu kişilerin de adresinizi, çalışma biçiminizi ve iletişim yolunuzu bulabilmesidir.

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), W3C'nin yayımladığı uluslararası başvuru metnidir. Güncel sürüm WCAG 2.2, 5 Ekim 2023'te W3C önerisi olarak yayımlandı. Ölçütler A, AA ve AAA düzeylerine ayrılır; web siteleri için yaygın hedef AA düzeyidir.

1–2. Kontrast ve yakınlaştırma

Normal boyuttaki metin ile arka planı arasındaki kontrast oranı en az 4,5:1, büyük metinde en az 3:1 olmalıdır (1.4.3, AA). Sakin bir palet için seçilen açık gri metin krem bir zeminde huzurlu görünür, ama çoğu zaman bu eşiğin altında kalır. Renkleri tasarım aşamasında bir kontrast aracıyla ölçün.

Metin, yardımcı teknoloji kullanmadan yüzde 200'e kadar büyütüldüğünde içerik veya işlev kaybolmamalıdır (1.4.4, AA). Telefonda yazı boyutunu büyütüp sitenizi açın: menü, başlıklar ve iletişim bilgisi hâlâ okunuyor mu?

3–4. Klavye ve görünür odak

Sitedeki bütün işlevler klavyeyle kullanılabilmelidir (2.1.1, A). Sekme tuşuyla sayfada ilerleyin; menüyü açabiliyor, bağlantılara ulaşabiliyor ve formu gönderebiliyor musunuz?

Klavye odağı görünür olmalıdır (2.4.7, AA). WCAG 2.2 ile gelen bir ölçüt, odaklanan öğenin sabit bir üst menü veya çerez bildirimi gibi site içeriğinin altında tamamen kaybolmamasını da ister (2.4.11, AA). Tasarımda tarayıcının varsayılan çerçevesini kaldırıyorsanız yerine markanıza uygun ama belirgin bir odak stili koyun.

5–6. Görseller ve formlar

Metin dışı içeriğin aynı amaca hizmet eden bir metin karşılığı olmalıdır (1.1.1, A). Portrenizin alternatif metni “Klinik psikolog [ad soyad], çalışma odasında” gibi kısa ve anlamlı olabilir; yalnızca süs amaçlı görseller ekran okuyuculara boş bırakılmalıdır.

Kullanıcıdan bilgi istenen her alanın bir etiketi veya açıklaması bulunmalıdır (3.3.2, A). Yalnızca kutunun içindeki silik örnek metne güvenmeyin; yazmaya başlayınca kaybolur. Bir hata oluştuğunda hangi alanın hatalı olduğu metinle belirtilmelidir (3.3.1, A).

7. Dokunma alanı ve hareket

WCAG 2.2, tıklanabilir hedeflerin en az 24×24 CSS piksel olmasını ya da yeterli boşlukla ayrılmasını ister (2.5.8, AA). Alt alta dizilmiş küçük sosyal medya simgeleri ve sıkışık menü bağlantıları en sık bu ölçüte takılır.

Kendiliğinden hareket eden ve beş saniyeden uzun süren içerik, örneğin otomatik dönen bir slayt, durdurulabilmelidir (2.2.2, A). Kaydırmaya bağlı animasyonları, işletim sistemindeki “hareketi azalt” tercihine uyacak biçimde kurmak da iyi bir uygulamadır (2.3.3, AAA).

• Kontrast: normal metinde en az 4,5:1.
• Yakınlaştırma: yüzde 200'de içerik kaybı yok.
• Klavye: bütün işlevler sekme tuşuyla kullanılabiliyor.
• Odak: her zaman görünür, menü altında kaybolmuyor.
• Görseller: anlamlı alternatif metin, süs görsellerinde boş metin.
• Formlar: her alanın görünür bir etiketi var.
• Dokunma ve hareket: 24 piksel hedefler, durdurulabilen hareket.