Erişilebilirlik için herkesin uygulayabileceği 6 temel kural

Erişilebilirlik deyince akla karmaşık standart belgeleri geliyor. Pratikte ise faydanın çoğu birkaç temel kuraldan geliyor ve bunları uygulamak için geliştirici olmanız gerekmiyor.

Bu kurallardan engelli ziyaretçilerin yanında başka insanlar da faydalanıyor. Güneş altında telefonuna bakan, kolu kırık olduğu için fare kullanamayan ya da metroda sesi kapalı video izleyen herkes aynı düzenlemelerden yararlanıyor.

1. Kontrast#

Açık gri zemin üzerine açık gri yazı tasarımcının gözüne zarif görünüyor ama okuyanı zorluyor.

Normal metinde yazıyla arka plan arasındaki kontrast oranı en az 4,5:1 olmalı. Büyük başlıklarda 3:1 yeterli.

Ölçmek için webaim.org/resources/contrastchecker adresine iki renk kodunu yazın, size oranı veriyor. Ücretsiz ve on saniye sürüyor.

2. Görsellere alt metin#

Ekran okuyucu kullanan biri görseli göremez, alt metni duyar. Alt metin yoksa ekran okuyucu dosya adını okur: "IMG alt çizgi 4471 nokta jpeg".

Görsel bir bilgi taşıyorsa alt metinde anlatın, süs içinse alt metni boş bırakın. Boş bırakmakla (alt="") hiç yazmamak farklı şeyler. Boş alt metin ekran okuyucuya o görseli atlamasını söyler.

3. Klavyeyle gezilebilirlik#

Fareyi bırakın ve siteyi yalnızca Tab tuşuyla gezin. Her bağlantıya ve düğmeye ulaşabiliyor musunuz? Hangi öğede olduğunuzu görebiliyor musunuz?

En sık yapılan hata, tasarım temiz görünsün diye odak halkasını (focus ring) kaldırmak. O halka olmadan klavye kullanan kişi nerede olduğunu göremiyor. Kaldırmayın, varsayılan hâlini beğenmiyorsanız markanıza uyan bir tane tasarlayın.

Bir de "içeriğe geç" bağlantısı ekleyin. Bu bağlantı Tab'a ilk basıldığında beliriyor ve menüyü atlayıp doğrudan içeriğe götürüyor. Böylece klavye kullananlar her sayfada otuz bağlantıyı tek tek geçmek zorunda kalmıyor.

4. Başlık düzeni#

Ekran okuyucu kullananların çoğu sayfayı baştan sona dinlemiyor, başlıklar arasında atlıyor. Bu yüzden başlık sırasının mantıklı olması gerekiyor.

Her sayfada tek bir h1 olsun. Altındaki bölümler h2, alt bölümler h3 olsun. Seviye atlamayın, h2'den sonra doğrudan h4 gelmesin.

Başlık etiketini yazı büyük görünsün diye de kullanmayın. Yazının boyutunu CSS belirler, başlık etiketi sayfanın yapısını gösterir.

5. Form etiketleri#

Her alanın gerçek bir etiketi (label) olmalı ve bu etiket alana bağlı olmalı. Sadece yer tutucu (placeholder) yazmak yetmiyor, çünkü yazmaya başlayınca yer tutucu kayboluyor ve alanın ne istediğini unutuyorsunuz.

Bağlı etiketin bir faydası daha var. Etikete tıklayınca imleç alana gidiyor, bu da dokunmatik ekranda dokunulacak alanı büyütüyor.

6. Hareket tercihine saygı#

İşletim sistemlerinde "hareketi azalt" diye bir ayar var. Vestibüler rahatsızlığı olan kişiler bunu açıyor, çünkü kayan, dönen ve zıplayan animasyonlar başlarını döndürüyor.

CSS'te prefers-reduced-motion sorgusuyla bu ayarı okuyabiliyorsunuz. Ayar açıksa animasyonları kapatın ya da sadece opaklık geçişine indirin.

Bu sitedeki her animasyon bu tercihe uyuyor. Açılış perdesi, kayan logo şeridi ve kaydırınca beliren bölümler de buna dahil.

Nasıl kontrol edersiniz?#

Tarayıcınızda F12'ye basın, Lighthouse sekmesini açın ve Accessibility raporunu çalıştırın. Otomatik testler sorunların yaklaşık üçte birini yakalıyor. Gerisini elle kontrol etmeniz gerekiyor ama rapor iyi bir başlangıç listesi veriyor.