Disleksiye Uygun Web Sayfası Nasıl Yapılır?

Okunabilirlik, erişilebilirlik ve “yormayan tasarım” rehberi

Bazı web siteleri vardır…
Bilgi çok iyidir, içerik çok değerlidir ama okuyunca insanın gözü yorulur.
Satırlar sıkışık gelir, paragraflar duvar gibi üstüne çöker, renkler bağırır, menüler birbirine girer.

İşte disleksi yaşayan kullanıcılar için bu durum çok daha yoğun hissedilir.

Çünkü disleksi; zekâ ile ilgili bir eksiklik değil, beynin dili işleme biçiminin farklılığıdır.
Bu farklılık web üzerinde en çok “okuma deneyiminde” kendini gösterir.

Bu yazıda sana şunu anlatacağım:
Disleksiye uygun web sayfası nasıl tasarlanır?
Bunu hem tasarım gözüyle hem de erişilebilirlik standartlarıyla birlikte ele alacağız.

1) Disleksi Dostu Web Tasarımı Neden Önemli?

Disleksi dostu tasarım yapmanın iki büyük nedeni var:

1.1) Eşit erişim meselesi

Web, herkesin ulaşabilmesi gereken bir bilgi alanı.
Ama tasarım kötü olursa web “herkes için” olmaktan çıkar.

1.2) Sadece disleksililer için değil: herkes için iyi

Şunu unutma:
Disleksiye uygun tasarım aslında daha az yorucu ve daha anlaşılır bir tasarım demektir.

Bu yüzden şu gruplar da faydalanır:

Dikkat dağınıklığı yaşayanlar
Yoğun stres altında okuyanlar
Yaşlı kullanıcılar
Mobil cihazdan okuyanlar
Yorgun gözle (gece) okuyanlar
İkinci dilde okuma yapanlar

Yani disleksi için iyileştirme = genel kullanıcı deneyiminde kalite artışı.

2) Disleksi Dostu Tasarımın Temel İlkesi: “Okuma Yükünü Azalt”

İyi bir sayfa şunu yapar:
Kullanıcının beynine yük bindirmez.

Kötü bir sayfa ise şöyle hissettirir:
“Okumak istiyorum ama sanki sürekli takılıyorum…”

Bu yüzden hedef net:
✅ metni daha kolay takip etmek
✅ daha az göz yormak
✅ daha az hata yaptırmak
✅ daha hızlı anlamak
✅ kullanıcıya kontrol vermek

3) Tipografi: Disleksi için Yazı Tipi Nasıl Seçilmeli?

Disleksi dostu web sayfasının kalbi: tipografi.

3.1) Font seçimi: sade ve net karakterler

Önerilen fontların ortak özelliği şudur:
harfler birbirinden kolay ayrılır.

Sans-serif seçenekler:

Arial
Verdana
Tahoma
Trebuchet MS
Open Sans
Roboto

Küçük bir öneri: “süslü” fontlar her zaman estetik durur ama okuma için risklidir.

3.2) Disleksi fontları gerçekten işe yarar mı?

Özel fontlar (örneğin disleksi için tasarlananlar) bazı kullanıcılar için rahatlatıcı olabilir.
Ama herkes için mucize değildir.

En iyi çözüm:
✅ kullanıcıya seçenek sunmak.

3.3) Yazı boyutu: küçük metin yorar

Gövde metni minimum 16px olmalı
İdeali çoğu site için 18px civarıdır

Çünkü disleksi yaşayan biri metne yaklaşmak zorunda kalırsa odak kırılır.

3.4) Satır aralığı (line-height): nefes alan metin

Disleksi için öneri:

line-height: 1.5 veya 1.6

Satırlar birbirine yapışık olursa satır atlama artar.

3.5) Harf aralığı ve kelime aralığı

Bazı kullanıcılar için az miktarda boşluk arttırmak metni rahatlatır:

letter-spacing çok abartılmadan
word-spacing minimal artırılarak

Ama burada kritik nokta:
aşırı boşluk da okuma ritmini bozabilir.
Yani “az ama etkili”.

4) Paragraf Stratejisi: Metin Duvarı Yapma

Uzun paragraflar disleksi yaşayan biri için şu hissi yaratır:
“Bu bitmeyecek…”

4.1) Kısa paragraflar = daha az stres

Blog yazarken şunu uygula:

3–5 satırdan sonra paragraf kır
Her paragrafta tek bir fikir anlat

4.2) Madde işaretleri ile metni sadeleştir

Bu yöntem okur için “tutacak yer” oluşturur:

✅ yapılacaklar
⚠️ dikkat edilmesi gerekenler
⭐ önerilen ayarlar

5) Satır Uzunluğu: Geniş Ekranda Metin Kaybolmasın

Büyük ekranlarda metin çok geniş olursa göz satırı kaybeder.

5.1) İdeal satır uzunluğu nedir?

Genel öneri:

45–75 karakter aralığı

Çok basit bir çözüm:
metni bir “okuma alanı” içine almak.

5.2) Metni ortada sınırlamak

geniş ekranlarda max-width ver
sayfayı “dergi okuma” gibi hissettir

Bu aynı zamanda daha estetik bir blog görünümü de sağlar.

6) Hizalama: Tam Yaslama (Justify) Okumayı Bozar

Birçok tasarımcı justify kullanmayı sever çünkü “düzenli” görünür.
Ama disleksi için sorun çıkarır:

kelimeler arası boşluklar büyür
okuma ritmi parçalanır
göz satırı takip edemez

✅ Çözüm:
sol hizalama (left align)

7) Renk Seçimi: Kontrast Şart Ama Göz Yakmasın

Disleksi dostu tasarım renkleri “bağırmaz”.

7.1) Saf beyaz zemin + saf siyah yazı bazen serttir

Bunun yerine:

arka plan: hafif kırık beyaz / açık gri
yazı: koyu gri

Bu, göz konforunu artırır.

7.2) Kontrast standartlarını unutma (WCAG)

Kontrast yetersizse okuma zorlaşır.
Kontrast aşırı sertse göz yorulur.

Burada hedef:
✅ netlik + konfor.

8) Başlık Hiyerarşisi: Okura Harita Ver

Disleksi dostu web sayfası “tek parça metin” değildir.

8.1) H1-H2-H3 düzeni

Blog yazında şu mantık olsun:

H1: konu başlığı
H2: ana bölümler
H3: detay başlıklar

Bu, kullanıcının beyninde bir “harita” oluşturur.

8.2) Başlıklar kısa ve açıklayıcı olmalı

Kötü başlık:
“Detaylar”

İyi başlık:
“Satır uzunluğu neden önemli?”
“Okuma modu nasıl tasarlanır?”

9) İçerik Dili: Basit Anlat, Güçlü Anlam Kur

Disleksiye uygun web sayfası sadece tasarım değildir.
Metnin dili de belirleyicidir.

9.1) Uzun cümle tuzağı

Bazı cümleler şuna döner:
“Bir türlü bitmeyen bir yol…”

✅ Çözüm: kısa ve net cümleler
✅ “tek cümle = tek fikir”

9.2) Gereksiz süslü anlatımı azalt

Blog yazarken edebi olmak güzel ama:

anlaşılır olmak daha önemlidir
bilgi net olmalıdır

9.3) Özet cümleleri ekle

Bölüm sonlarına mini özet eklemek çok işe yarar:

Kısaca: Bu bölümde amaç satır uzunluğunu kontrol etmekti.

10) Navigasyon: Kullanıcı Kaybolmamalı

Disleksi yaşayan biri için karmaşık menüler daha yorucudur.

10.1) Menüleri sadeleştir

az seçenek
net isimler
tahmin edilebilir yerleşim

10.2) “Ekstra” şeyleri gizle

Özellikle bloglarda:

aşırı yan panel
sürekli kayan reklamlar
pop-up’lar
odak kırar.

11) Animasyon ve Hareket: Dikkati Bölme

Modern web tasarımında hareket çok yaygın.
Ama disleksi için hareket bir “gürültü” gibi hissedilebilir.

11.1) Otomatik kayan sliderlar

Okur metne odaklanırken bir anda ekran kayarsa:

okuma kesilir
yeniden başlamak gerekir

✅ Çözüm: otomatik hareketleri azaltmak.

11.2) Video otomatik oynatmasın

Otomatik oynayan video:
hem dikkat çalar hem stres yaratır.

12) Okuma Modu (Reading Mode): Harika Bir Özellik

Disleksi dostu bir web sayfasında “okuma modu” kullanıcıyı güçlendirir.

Okuma modunda şunlar olabilir:

yazı boyutu büyür
satır aralığı artar
arka plan yumuşar
gereksiz öğeler gizlenir

Bu, özellikle blog sitelerinde “kalite” göstergesidir.

13) Metni Dinleme (Text-to-Speech): Destekleyici Teknoloji

Bazı disleksili kullanıcılar okumak yerine dinlemeyi tercih eder.
Bu yüzden:

✅ metni sesli okuma
✅ dinlerken metni takip edebilme
çok büyük erişilebilirlik katkısı sağlar.

14) Formlar ve Hata Mesajları: İnsan Gibi Konuş

Bir web sitesi sadece okunmaz, aynı zamanda kullanılır.

14.1) Karmaşık form alanlarından kaçın

kısa alanlar
net açıklamalar
örnek girişler

14.2) Hata mesajı cezalandırıcı olmasın

Kötü örnek:
“HATA!”

İyi örnek:
“Şifren en az 8 karakter olmalı. Bir harf ve bir sayı eklemeyi dene.”

15) WCAG ile Uyum: Disleksi Dostu Tasarımın Omurgası

Disleksi için tasarım yaparken en sağlam çerçevelerden biri WCAG’dir.

WCAG bize şunu öğretir:

algılanabilir içerik
kullanılabilir arayüz
anlaşılabilir metin
sağlam yapı

Yani tasarım sadece “güzel” değil, sürdürülebilir ve ölçülebilir olur.

Sonuç: Disleksi Dostu Tasarım = Daha İnsani Web

Disleksiye uygun bir web sayfası yapmak, bir kitleyi “ayrıcalıklı” yapmak değil…
Aslında şunu demektir:

“Bu dünyada herkesin okuma hakkı var.”

Ve şunu da unutma:
Disleksi için yaptığın her iyileştirme, aslında sitenin genel kalitesini yükseltir.

✅ Daha az yorar
✅ Daha hızlı anlaşılır
✅ Daha sade görünür
✅ Daha profesyonel hissedilir

Mini Checklist (Hızlı Kontrol Listesi) ✅

Web sayfanı kontrol et:

APA 7 Kaynakça

British Dyslexia Association. (n.d.). Dyslexia style guide. https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide

International Dyslexia Association. (n.d.). Dyslexia basics. https://dyslexiaida.org/dyslexia-basics/

National Institute of Neurological Disorders and Stroke. (n.d.). Dyslexia information page. https://www.ninds.nih.gov/health-information/disorders/dyslexia

Rello, L., & Baeza-Yates, R. (2013). Good fonts for dyslexia. In Proceedings of the 15th International ACM SIGACCESS Conference on Computers and Accessibility (ASSETS '13) (pp. 1–8). Association for Computing Machinery. https://doi.org/10.1145/2513383.2513447

W3C Web Accessibility Initiative. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. World Wide Web Consortium. https://www.w3.org/TR/WCAG22/