Yazı tipi ölçeklendirme, yüksek kontrast ve disleksi modu, bir web sitesinin sunabileceği en etkili erişilebilirlik özelliklerinden üçüdür — ancak çoğu site hâlâ temel noktaları yanlış yapıyor. Bu rehber, her özelliğin nasıl çalıştığını, standartların neler gerektirdiğini ve Accsible gibi bir kaplama bileşeninin bunları zahmetsizce uygulamayı nasıl sağladığını açıklamaktadır.

Şunu düşünün: Lighthouse testleri, mobil sitelerin yalnızca %29’unun yeterli metin renk kontrastına sahip olduğunu gösteriyor — önceki yıllara göre orta düzeyde bir iyileşme, ancak temel okunabilirlik için gereken seviyenin hâlâ çok altında. Öte yandan, disleksi, nüfusun %20’sine kadarını bir dereceye kadar etkileyerek en yaygın öğrenme güçlüğü haline geliyor. Bunlar uç senaryo sorunları değil. Kitlenizin çok büyük bir bölümünün günlük gerçekliğini temsil ediyorlar — ve iyi haber şu ki, yazı tipi ölçekleme, yüksek kontrast modu ve disleksi modu, tam bir site yeniden tasarımına gerek kalmadan bunların hepsine çözüm getirebilir.

Neden Sunum Esnekliği Temel Bir Erişilebilirlik Gereksinimidir?

Web erişilebilirliği genellikle ekran okuyucular ve klavye ile gezinme bağlamında tartışılır, ancak görsel sunum da en az bunlar kadar kritiktir. ABD Nüfus Sayım Bürosu’na göre, Amerika Birleşik Devletleri’nde engelli olarak yaşayan yaklaşık 61 milyon yetişkin var — ülke genelinde her 4 kişiden yaklaşık 1’i — buna ciddi görme bozukluğu veya körlüğü olan 12 milyondan fazla Amerikalı ve disleksi veya diğer okuma ile ilgili zorluklar yaşayan tahmini %20’lik bir nüfus dahildir. İşletmeniz veya kuruluşunuz bu web kullanıcılarının ihtiyaçlarını göz ardı ediyorsa, potansiyel kitlenizin önemli bir bölümünü dışlıyorsunuz demektir.

Web İçeriği Erişilebilirlik Yönergeleri (WCAG), POUR adı verilen bir çerçeve ortaya koyar — Algılanabilir (Perceivable), İşletilebilir (Operable), Anlaşılabilir (Understandable), Sağlam (Robust) — ve ilk ilke olan Algılanabilirlik, yazı tipi boyutu, renk kontrastı ve metin sunumunun yer aldığı alandır. WCAG gibi mevcut en iyi uygulamalar ve rehberlik, kapsayıcı tasarım için sağlam bir temel sunar ve disleksili okuyucuları etkileyen birçok detayı zaten içerir; satır uzunluğu ve aralığına ilişkin WCAG rehberliği, araştırmalarda yer alan önerilerle örtüşmektedir. Başka bir deyişle, yönergeler ve bilim büyük ölçüde aynı yöne işaret ediyor.

Web sitesi sahipleri ve geliştiriciler için pratik zorluk, “WCAG’i karşılamak”ın bir tavan değil, taban belirlemesidir. Bir site, otomatik kontrolleri teknik olarak geçebilir, ancak yine de az gören veya disleksili biri için okumak açısından sinir bozucu olabilir. Tam da bu boşluk, iyi uygulanmış bir kaplama bileşeni (overlay widget) aracılığıyla sunulan, kullanıcı kontrollü erişilebilirlik özelliklerinin doldurmak üzere tasarlandığı alandır. Erişilebilirlik kaplamaları genellikle bir web sitesinde araç çubuğu veya bileşen olarak görünür ve kullanıcıların tek tıkla yazı tipi boyutu, renk kontrastı ve metinden sese işlevleri gibi çeşitli ayarlamalar sunarak gezinme deneyimlerini özelleştirmelerine olanak tanır.

Tarayıcılar kişiselleştirme için harika yerleşik araçlara sahiptir, ancak birçok kullanıcı bunlardan haberdar değildir. Bazı siteler, özelleştirmeyi kolaylaştırmak için genellikle yazı tipi boyutu, aralık ve kontrast dahil olmak üzere bir dizi erişilebilirlik özelliği sunan kişiselleştirme bileşenleri ekler. Bir erişilebilirlik bileşeni, tarayıcının teorik olarak yapabildikleri ile tipik bir kullanıcının gerçekte nasıl etkinleştireceğini bildikleri arasındaki boşluğu kapatır.

Yazı Tipi Ölçekleme: “Metni Büyüt”ün Arkasındaki Teknik Gerçek

Yazı tipi ölçekleme kulağa basit gelir — metni büyütmek yeterlidir. Ancak yazı tipi boyutlarının kodda tanımlanma şekli, ölçeklemenin gerçekten çalışıp çalışmayacağını belirler. Bir web tarayıcısının varsayılan yazı tipi boyutu 16px olarak ayarlanmıştır; bilişsel veya görme engeli olan kişiler, metni okunabilir kılmak için genellikle tarayıcı yakınlaştırma özelliğini kullanarak veya tarayıcı ayarlarında varsayılan yazı tipi boyutunu doğrudan değiştirerek bu varsayılan yazı tipi boyutunu artırırlar. Sorun şu ki, geliştiriciler yazı tipi boyutlarını mutlak piksel birimleriyle tanımladığında, tarayıcı yazı tipi boyutu tercihleri hiçbir etki göstermez.

rem birimlerini kullanmak, bir web sitesinin erişilebilirliğini önemli ölçüde artırabilir. Bazı kullanıcılar okunabilirlik için tarayıcılarının varsayılan yazı tipi boyutunu ayarlayabilir. rem birimleri temel yazı tipi boyutuna göre göreli olduğundan, bu, bir web sitesinin yerleşimi ve aralamasının kullanıcının tercihine göre ayarlanmasına olanak tanır ve genel kullanıcı deneyimini iyileştirir. Bu, birçok geliştiricinin fark ettiğinden daha fazla önem taşır. Internet Archive tarafından yapılan araştırma, kullanıcıların %3,08’inin varsayılan olmayan bir yazı tipi boyutuna sahip olduğunu ortaya koymuştur — bu oldukça büyük bir sayı, Internet Explorer, Edge veya Opera Mini gibi tarayıcıların pazar payına ilişkin çoğu sayımdan daha yüksektir.

Bu konudaki WCAG gereksinimi açıktır. Başarı Kriteri 1.4.4 (Metni Yeniden Boyutlandırma), metnin içerik veya işlevsellik kaybı olmadan en az %200’e kadar yeniden boyutlandırılabilmesini gerektirir. Web tarayıcıları ve kelime işlemciler bu özelliği varsayılan olarak içerir, ancak belge yazarları bu işlevselliğe müdahale edebilir. Bu müdahale neredeyse her zaman, kullanıcının işletim sistemi veya tarayıcı tercihlerini yok sayan, sabit kodlanmış piksel değerlerine dayanır.

Doğrudan bir kod tabanı üzerinde çalışan geliştiriciler için çözüm, göreli birimlere geçmektir. Kullanıcının, metnin sayfanın herhangi bir yerinde kesilmeden veya başka metinle üst üste binmeden boyutunun %200’üne kadar yeniden boyutlandırabilmesi gerekir. Yazı tipi boyutu, yüzde, em veya rem gibi göreli birimlerle tanımlanmalıdır. Bazı tarayıcılarda, piksel cinsinden ayarlanmış metni sayfanın geri kalanından bağımsız olarak yakınlaştırmak mümkün değildir. Ayrıca, WCAG 2.1 Başarı Kriteri 1.4.10 (Yeniden Akış), içeriğin küçük, yeniden boyutlandırılmış bir pencerede okunduğunda yeniden akması ve yatay kaydırma gerektirmemesi gerektiğini belirtir. 1.4.12 (Metin Aralığı) kriteri ise, bir okuyucu paragraf, satır, kelime veya harf aralığına küçük ayarlamalar yapmak için yardımcı teknoloji kullandığında içeriğin kaybolmaması gerektiğini ifade eder.

Accsible gibi bir erişilebilirlik bileşeni yazı tipi ölçeklemeyi ele aldığında, genellikle sitenin temel çizgisi ne olursa olsun onun üzerine artımlı boyut artışları uygular — tipik olarak kök yazı tipi boyutunu artıran veya metin öğeleri arasında bir ölçekleme çarpanı uygulayan adım kontrolleri sunar. İyi oluşturulmuş bir bileşenin temel teknik avantajı, düzen bütünlüğünü daha büyük boyutlarda koruyarak, belgeyi mevcut kaskadına saygı göstererek yönetmesi ve bunu, satır içi stillerle kaba kuvvetle geçersiz kılmak yerine yapmasıdır. Bu yaklaşım, az gören kullanıcıların arayüz genelinde metni ölçeklemesine, düzenleri bozmadan netlik sağlamasına olanak tanır. Çalışmalar, uygun aralığa sahip daha büyük metnin, görme bozukluğu olan kişiler için okuma hızını artırdığını göstermektedir.

/* Erişilebilir temel: her zaman göreli birimler kullanın */
html {
  font-size: 100%; /* tarayıcı/OS tercihine saygı duyar */
}

body {
  font-size: 1rem;   /* varsayılanda 16px, kullanıcı ayarlarıyla ölçeklenir */
  line-height: 1.5;
}

h1 { font-size: 2rem; }    /* varsayılanda 32px */
h2 { font-size: 1.5rem; }  /* varsayılanda 24px */
p  { font-size: 1rem; }    /* varsayılanda 16px */

/* Bileşen tarafından uygulanan ölçekleme katmanı (örnek) */
.accsible-font-lg {
  font-size: 1.25rem;
}
.accsible-font-xl {
  font-size: 1.5rem;
}

Geliştirici ipucu: html veya body öğesinde font-size’ı piksel cinsinden ayarlamaktan kaçının. Bunu yapmak, en yaygın ve önlenebilir erişilebilirlik hatalarından biri olan, kullanıcının tarayıcı yazı tipi boyutu tercihlerini sessizce devre dışı bırakır.

Yüksek Kontrast Modu: Sadece Beyaz Üzerine Koyu Metinden Fazlası

Renk kontrastı, web’de en sık işaretlenen erişilebilirlik sorunudur ve bunu anlamak, hem standartları hem de bunların arkasındaki insan deneyimini kavramayı gerektirir. Renk kontrastı — iki rengin algılanan parlaklığı arasındaki fark — tasarım ve erişilebilirliğin çok önemli bir parçasıdır. Metin ile arka plan arasındaki kontrast çok düşükse, ciddi okunabilirlik sorunlarına yol açabilir. WCAG 2.0, tasarımcıların ve geliştiricilerin bir kontrastın yeterli olup olmadığını belirlemesine ve renk seçerken iyi seçimler yapmasına yardımcı olmak için bir kontrast rehberi sunmuştur.

Burada sayılar önemlidir. WCAG 2.0 Seviye AA, normal metin için en az 4.5:1, büyük metin için ise 3:1 kontrast oranı gerektirir. WCAG 2.1, grafikler ve form girdi kenarlıkları gibi kullanıcı arayüzü bileşenleri için en az 3:1 kontrast oranı gerektirir. Gelişmiş uyum için Seviye AAA’da, gereksinimler daha katıdır: normal metin için 7:1, büyük metin için 4.5:1 kontrast. Bu oranlar, tipik gören bir kullanıcıya bir rengin ne kadar “koyu” veya “açık” göründüğünden değil, göreli parlaklık değerlerinden hesaplanır.

Renk kontrastı yaşlandıkça daha önemli hale gelir. Aynı zamanda, insanların okuma gözlüklerinin yanlarında olmaması veya içeriği dışarıda okumak zorunda kalmaları gibi geçici engellilikler ve durumsal kısıtlamalar için de düzenli olarak sorun teşkil eder. Uygun kontrasta ulaşmak, tarayıcılar ve işletim sistemleri açık, koyu ve yüksek kontrast modları için destek sundukça daha da zorlaşmaktadır — ve bunlar tarayıcılar ve işletim sistemleri tarafından iyi desteklenirken, çoğu web sitesi tarafından henüz iyi desteklenmemektedir.

Bir erişilebilirlik bileşenindeki yüksek kontrast modu, ortak bir hedefi paylaşsalar da Windows Yüksek Kontrast Modu veya macOS Kontrastı Artır’dan farklı çalışır. Windows’ta yüksek kontrast, metin okunabilirliğini artırmak ve okunabilirliği iyileştirmek için tasarlanmış bir erişilebilirlik özelliğidir. Bu özellik, kullanıcının belirli sayıda semantik öğe için tema renkleri seçmesini sağlayarak çalışır. Bir kişinin yüksek kontrastı etkinleştirmesinin birçok nedeni olabilir: ekrandaki öğeleri daha iyi görebilmek, daha iyi odaklanabilmek için görsel gürültüyü azaltmak, göz yorgunluğunu, migreni veya ışığa duyarlılığı hafifletmek ya da sadece çok belirli bir renk şemasını tercih etmek.

CSS düzeyinde, modern tarayıcılar kontrast tercihlerini medya sorguları aracılığıyla ortaya çıkarır. prefers-contrast medya sorgusu, görme bozukluğu olan kullanıcıları veya sadece daha iyi okunabilirlik arayanları daha iyi desteklemek için tasarlanmıştır. Birisi işletim sisteminde yüksek kontrast modunu etkinleştirdiğinde, bu medya sorgusu geliştiricilerin o ortama daha uygun alternatif stiller uygulamasına olanak tanır. Tüm arayüzü yeniden tasarlamak yerine, prefers-contrast okunabilirliği artırırken sitenizin genel görsel kimliğini koruyan hedefli ayarlamalar yapmanızı sağlar.

Bileşen tabanlı bir yüksek kontrast geçişi, kullanıcıya işletim sistemi ayarlarını nasıl değiştireceğini bilip bilmediğinden bağımsız olarak sayfa içi açık bir kontrol sunarak bir adım daha ileri gider. Sağlam bir uygulama, birkaç kontrast teması sunabilir — koyu mod (koyu arka plan üzerinde açık metin), yüksek kontrast (neredeyse siyah üzerine neredeyse beyaz) ve siyah üzerine sarı — çünkü farklı kullanıcı grupları gerçekten farklı kombinasyonları tercih eder. Burada önemli bir nüansı vurgulamak gerekir: özellikle disleksili bazı kişiler için, çok yüksek kontrastlı bir renk şeması okumayı zorlaştırabilir. Ekrandan okuma için saf beyaz yerine kırık beyaz bir arka plan rengi seçmek iyi bir fikirdir. Bu nedenle, tek bir “yüksek kontrast açık/kapalı” geçişi yerine birden fazla tema sunmak daha iyi sonuçlar verir.

/* Yerel CSS: OS düzeyindeki kontrast tercihine saygı gösterin */
@media (prefers-contrast: more) {
  body {
    background-color: #000;
    color: #fff;
  }
  a {
    color: #ffff00;
    text-decoration: underline;
  }
  /* İnce öğeleri güçlendirin */
  em, i, small {
    font-weight: bold;
  }
}

/* Bileşen tarafından uygulanan sınıf: kullanıcı başlatımlı yüksek kontrast */
.accsible-contrast-high {
  --bg: #000000;
  --fg: #ffffff;
  --link: #ffff00;
  background-color: var(--bg);
  color: var(--fg);
}

.accsible-contrast-high a {
  color: var(--link);
}

Disleksi Modu: Araştırmalar Gerçekte Ne Diyor?

Disleksi, dünyadaki en yaygın öğrenme bozukluklarından biridir ve dünya nüfusunun %10 ila %20’si arasında bir kesimi etkiler. Okuma, yazma ve imla ile ilgili zorluklara neden olabilir, ancak bozulma derecesi büyük ölçüde değişir — bazı insanlar neredeyse hiç etkilenmezken, diğerleri çok daha fazla desteğe ihtiyaç duyar. Web sitesi sahipleri ve geliştiriciler için bu, ziyaretçilerin anlamlı bir bölümünün, çoğunluk için mükemmel derecede okunabilir görünen metinle sessizce mücadele ettiği anlamına gelir.

Disleksi zeka ile ilgili değildir; disleksili birçok kişi son derece yaratıcı ve zekidir, ancak okuryazarlık becerileriyle mücadele ederler. Disleksi, doğru ve/veya akıcı kelime tanıma ve zayıf imla becerileriyle karakterizedir. Bu zorluklar genellikle, diğer bilişsel yeteneklerle karşılaştırıldığında beklenmedik olan dilin fonolojik bileşenindeki bir eksiklikten kaynaklanır. Web’de bu, metin satırlarını takip etmede, benzer şekilli harfleri ayırt etmede ve daha uzun paragrafları okurken satırda kalmada zorluk olarak kendini gösterir.

İyi tasarlanmış bir bileşendeki disleksi modu genellikle birkaç değişikliği bir araya getirir, çünkü tek bir müdahale tek başına yeterli değildir. Araştırmalar ve en iyi uygulama rehberliği, tutarlı bir ayar kümesinde birleşir:

Yazı tipi seçimi: Sans serif yazı tipleri, kancaların olmaması harfler arasındaki aralığı artırarak ve onları daha ayırt edilebilir hale getirerek disleksili kullanıcıların harf şekillerini daha net görmelerini sağlar. OpenDyslexic gibi özel olarak tasarlanmış yazı tipleri, harf döndürme karışıklığını azaltmak için harflere alttan ağırlık ekler, ancak bazı kullanıcılar için diğerlerinden daha iyi çalışırlar.
Yazı tipi boyutu: Birçok disleksili okuyucu daha büyük yazı tipi boyutlarını daha okunabilir bulur. Araştırmalar, 18pt’lik bir temel boyut önermektedir; bu, WCAG’in büyük ölçekli metin tanımını karşılar ve dolayısıyla 4.5:1 kontrast oranı hâlâ geliştirilmiş kontrast yönergelerini karşılar.
Satır ve harf aralığı: Bu ayar, kullanıcıların düzeni bozmadan satır, harf ve paragraf aralığını artırabilmesini sağlar. Yeterli aralık, görsel kalabalığı azaltır ve harfleri ayırt etmeyi kolaylaştırır — bu, birçok disleksili okuyucu için temel bir ihtiyaçtır.
Arka plan rengi: Birçok disleksili kullanıcı, W3C raporlarında da belirtildiği gibi, yüksek kontrastlı renklerin neden olduğu parlaklığa karşı hassas olabilir. Krem veya açık sarı arka planlar, saf beyaza göre sıklıkla tercih edilir.
Metin hizalaması: Ortalanmış veya iki yana yaslanmış uzun metin parçaları okumak zor olabilir. İki yana yaslanmış metin, satırlar boyunca beyaz boşluk nehirleri oluşturabilen kelimeler arasında boşluklar ekler ve bu da bazı disleksili kullanıcılar için okumayı zorlaştırır. Sol hizalı metin daha güvenli varsayılandır.
Satır uzunluğu: Bir metin satırı 80 karakterden uzun olmamalıdır. Bu, uzun metin satırlarını okurken yerini korumakta zorlanan belirli okuma veya görme engelleri olan kullanıcılara yardımcı olur.

Bileşen geliştiricilerinin ve uyum yöneticilerinin anlaması gereken kritik bir nüans: araştırmalar, disleksili kullanıcıların kişisel tercihleri ile okuma performansları arasında bir korelasyon gözlemlenmediğinden, metin özelleştirme tercihlerinin gerçek okuma performansından elde edilen ölçülü verilerle tamamlanması gerektiğini öne sürmektedir. Bu, disleksi modunun seçenekler sunması gerektiği anlamına gelir — yalnızca tek bir dönüşüm seti uygulayıp işin bittiğini varsaymamalıdır. Disleksili farklı kullanıcılar, farklı yapılandırmalardan fayda sağlar; bu da kullanıcı kontrolünün neden bu kadar değerli olduğunun tam karşılığıdır.

Disleksi modu tek bir anahtar değildir — birlikte çalışan bir dizi tipografik ve yerleşim müdahalesidir. En iyi uygulamalar, tek bir “ya hep ya hiç” geçişi sunmak yerine, kullanıcılara bireysel ayarları ince ayar yapma olanağı verir.

WCAG Uyumu: Her Özellik Neyi Kapsar (ve Neyi Kapsamaz)

Uyum yöneticilerinin, bu erişilebilirlik özelliklerinin WCAG çerçevesinde tam olarak nereye oturduğunu anlaması önemlidir. Yazı tipi ölçekleme, yüksek kontrast ve disleksi modu birden fazla başarı kriterine dokunur — ancak bu özellikleri sağlayan bir kaplama bileşeni, uyumlu temel kodun yerine değil, tamamlayıcısıdır.

İlgili WCAG başarı kriterlerinin dökümü şöyledir:

SC 1.4.3 Kontrast (Minimum) — Seviye AA: Normal metin (metin görüntüleri dahil) en az 4.5:1 kontrast oranını karşılamalıdır. Büyük metin (18 punto veya daha büyük, ya da 14 punto veya daha büyük ve kalın) en az 3:1 kontrast oranını karşılamalıdır.
SC 1.4.4 Metni Yeniden Boyutlandırma — Seviye AA: WCAG, kişilerin işlevsellik kaybı olmadan metin boyutunu kontrol edebilmesini gerektirir. Metin, yardımcı teknoloji olmadan, içerik veya işlevsellik kaybı olmaksızın %200’e kadar yeniden boyutlandırılabilmelidir.
SC 1.4.10 Yeniden Akış — Seviye AA: Büyütme için yardımcı teknoloji kullanan okuyucular, esasen tipik boyutun yarısı kadar bir pencere kullanmaktadır. İçerik, küçük, yeniden boyutlandırılmış bir pencerede okunduğunda yeniden akmalı ve yatay kaydırma gerektirmemelidir.
SC 1.4.12 Metin Aralığı — Seviye AA: Bir okuyucu paragraf, satır, kelime veya harf aralığına küçük ayarlamalar yapmak için yardımcı teknoloji kullandığında içerik kaybolmamalıdır.
SC 1.4.6 Kontrast (Geliştirilmiş) — Seviye AAA: En yüksek uyum seviyesini hedefleyen kuruluşlar için bu, normal metin için 7:1 kontrast gerektirir.

WCAG, doğrudan disleksiye özgü tasarımı zorunlu kılmaz, ancak aralık, kontrast, yapı ve okunabilirlik gibi birkaç yönerge, disleksili kişilerin içeriği işlemesini ve anlamasını iyileştirir. Bu, WCAG uyumlu temeller üzerine inşa edilen bir disleksi modunun, faydasının önemli bir kısmını otomatik olarak devraldığı anlamına gelir. Özel bir disleksi modunun bunun üzerine eklediği şey, disleksili kullanıcıların okuma profiline özel olarak tasarlanmış, bu ayarlamaların seçilmiş ve kullanıcı kontrollü bir kombinasyonudur.

Yazı tipiyle ilgili uyum açısından, ne WCAG ne de Section 508, yazı tipi türlerini veya hatta minimum yazı tipi boyutunu belirtir. Ancak, devlet web sitelerinin net ve tutarlı başlıklara ve son derece okunaklı metne sahip olması gerekir. Sonuç olarak, tipografi seçimleri erişilebilirlik üzerinde büyük bir etkiye sahiptir. Section 508’in gereklilik getirdiği yerlerde, ADA ve ABA erişilebilirlik standartları, tabela ve belirli ekranlar gibi belirli yerlerde sans serif yazı tiplerini zorunlu kılar.

Bu Özellikleri Accsible ile Uygulamak

Yazı tipi ölçekleme, yüksek kontrast ve disleksi modunu sıfırdan oluşturmak tamamen mümkündür, ancak gerçek bir mühendislik maliyeti taşır. Her özellik, uç durumları ele almalıdır: Kullanıcının tercih ettiği yazı tipi mevcut olmadığında ne olur? Site CSS Özel Özelliklerini (Custom Properties) tutarsız kullanıyorsa ne olur? Kontrast temalarının, gömülü üçüncü taraf bileşenlerle çakışmadığından nasıl emin olursunuz? Accsible gibi bir SDK, ekibinizin temel ürününüze odaklanabilmesi için bu karmaşıklığı üstlenmek üzere tasarlanmıştır.

İyi uygulanmış bir kaplama bileşeninin mimarisi son derece önemlidir. Bu bileşenler, yardımcı teknolojiyi aktif olarak kullanmayan veya tarayıcının yerleşik erişilebilirlik özelliklerini zaten maksimuma çıkarmayan kullanıcılar için faydalı olabilir. Kullanıldıklarında, bu araçların, yardımcı teknoloji kullanıcılarının deneyimi de dahil olmak üzere kullanıcı deneyimine (UX) müdahale etmemesi önemlidir. Bu, bileşenin ARIA uyumlu, klavye ile erişilebilir olması ve odağı kilitlememesi veya bir ekran okuyucunun normal işleyişini geçersiz kılmaması gerektiği anlamına gelir — Accsible bu hususları SDK düzeyinde ele alır.

Kaplamaların en büyük avantajlarından biri, kullanıcıların web sitelerini kendi ihtiyaçlarına göre değiştirebilmesidir. Disleksili bir kişi sitede okuma dostu bir seçenek isteyebilirken, az gören bir kişi yakınlaştırmayı açmak veya kontrastı değiştirmek isteyebilir. Kullanıcılara esneklik sunarak, erişilebilir web tasarımı ilkesinin bir kısmını karşılayan kullanıcı öncelikli bir yaklaşım benimsiyorsunuz. Kontrolü kullanıcıların eline vererek, kaplamalar daha erişilebilir bir gezinme deneyimi sunmaya yardımcı olur.

Accsible’ı entegre ederken, bu makalede ele alınan üç özelliğin en iyi şekilde kullanılabilmesi için aşağıdaki uygulama ilkelerini göz önünde bulundurun:

Sağlam bir CSS temeliyle başlayın. Tüm yazı tipi boyutları için rem birimlerini kullanın. Accsible’ın yazı tipi ölçekleme özelliği, temel stil sayfası zaten göreli birimler kullanıyorsa en etkili şekilde ölçeklenir, çünkü bileşen, her bir öğeyi tek tek geçersiz kılmak yerine kök boyutu ayarlayabilir.
Kontrast temalarını CSS Özel Özellikleriyle tanımlayın. Stil sayfanızı renk değerleri için CSS değişkenleri etrafında yapılandırın. Bu, Accsible’ın, yüzlerce satır içi stil enjekte etmek yerine body veya html üzerinde bir sınıf değiştirerek tüm renk paletlerini değiştirmesini son derece kolaylaştırır.
Yazı tipi ailesi değişikliklerini engellemeyin. Disleksi modu yazı tipini değiştirmelidir. CSS’iniz font-family’yi yüksek özgüllüklü seçiciler veya !important ile uyguluyorsa, bileşen alternatif yazı tiplerini doğru şekilde uygulayamayabilir. Bazı durumlarda, sınırlı bir yazı tipi seti arasında geçişe izin verebilirsiniz. Yazı tiplerini tanımlarken, bir kullanıcının veya cihazın stilleri değiştirme yeteneğini engellemekten kaçının — içeriğin görüntülenmesinde kullanılacak tam boyut, dil veya yazı tipinden emin olamazsınız.
Yayınlamadan önce %200 yazı tipi boyutunda test edin. Yazı tipi ölçekleme için en açıklayıcı erişilebilirlik testi, tarayıcı yazı tipi boyutunu 32px’e (varsayılanın %200’ü) çıkarmak ve her sayfa şablonunda gezinmektir. Herhangi bir metin üst üste binmesi, kesilmesi veya yatay kaydırma gereksinimi, düzenin ölçekli durumda gerçekten erişilebilir olmadığını gösterir.
Kullanıcı tercihlerini kalıcı hale getirin. Her sayfa yüklemesinde sıfırlanan bir disleksi modu veya yüksek kontrast ayarı, kullanıcılarını yüzüstü bırakır. Accsible, tercih kalıcılığını localStorage aracılığıyla ele alır ve böylece ana sayfada tercihlerini ayarlayan bir kullanıcının, ödeme sayfasında da aynı ayarlara sahip olmasını sağlar.

İş Gerekçesi: Erişilebilirlik Sadece Uyum Değildir

Erişilebilirliğe öncelikle uyum merceğinden bakan web sitesi sahipleri için çerçeveyi genişletmekte fayda var. ABD Nüfus Sayım Bürosu’na göre, Amerika Birleşik Devletleri’nde engelli olarak yaşayan yaklaşık 61 milyon yetişkin var — ülke genelinde her 4 kişiden yaklaşık 1’i — buna disleksi veya diğer okuma ile ilgili zorluklar yaşayan tahmini %20’lik bir nüfus dahildir. İşletmeniz veya kuruluşunuz bu web kullanıcılarının ihtiyaçlarını göz ardı ediyorsa, potansiyel kitlenizin önemli bir bölümünü dışlıyorsunuz demektir.

Araştırmalar, erişilebilir tasarımın yalnızca engelli kullanıcılar için değil, herkes için kullanılabilirliği sürekli olarak iyileştirdiğini gösteriyor. Daha büyük ve iyi aralıklı metin, parlak güneş ışığında telefondan okumayı kolaylaştırır. Yüksek kontrast modları, loş bir odada çalışan veya ekran parlamasıyla uğraşan herkes tarafından takdir edilir. Disleksi dostu aralıklar, yorgun olan veya ikinci bir dilde okuyan okuyuculara fayda sağlar. Erişilebilir kontrast, yalnızca engelli kişiler için değil, herkes için faydalıdır. Engeli olmayan kullanıcılar bile, özellikle koyu mod, minimalizm ve kalın tipografi gibi modern arayüz trendlerinde, yüksek kontrastlı içeriği okumayı daha kolay ve görsel olarak daha çekici bulur.

Araştırmalar, engelli kişilerin %75’inin erişilebilir olmayan bir web sitesini terk edeceğini gösteriyor. Anında erişilebilirlik özelliklerine sahip olarak, işletmeler ziyaretçileri sitede tutabilir ve kayıpları en aza indirebilir. Yazı tipi ölçekleme, yüksek kontrast ve disleksi modu, bir kez düzgün şekilde uygulandıktan sonra sürdürülmesi pahalı özellikler değildir. Ancak, kullanıcılarınıza gerçek bir özen gösterdiğinizi gösteren özelliklerdir — ve bu sinyal, kapsayıcılığın giderek daha fazla ayırt edici bir unsur haline geldiği bir çağda gerçek bir iş değeri taşır.

Temel Çıkarımlar

Yazı tipi boyutları için her yerde göreli CSS birimleri (rem/em) kullanın. Sabit kodlanmış piksel değerleri, özel bir tarayıcı yazı tipi boyutu ayarlamış %3’ten fazla kullanıcı için yazı tipi ölçeklemeyi sessizce bozar ve WCAG SC 1.4.4 uyumunu engeller. Bu, bugün benimseyebileceğiniz en etkili kodlama uygulamasıdır.
Yüksek kontrast tek tip bir çözüm değildir. WCAG AA, normal metin için 4.5:1 kontrast oranı gerektirir, ancak kullanıcılar seçimden fayda sağlar — koyu mod, yüksek kontrast ve siyah üzerine sarı, farklı gruplara hizmet eder. Özellikle, saf siyah üzerine beyaz, bazı disleksili kullanıcılar için okunabilirliği gerçekten kötüleştirebilir, bu nedenle daha yumuşak alternatifler sunmak önemlidir.
Disleksi modu bir paket, bir geçiş değil. Etkili disleksi desteği, yazı tipi seçimi, yazı tipi boyutu, satır aralığı, harf aralığı, arka plan rengi ve metin hizalamasını birleştirir. Tek bir değişiklik tek başına yeterli değildir ve farklı kullanıcıların farklı kombinasyonlara ihtiyacı vardır — bu nedenle kullanıcı kontrolü esastır.
WCAG uyumu tabandır, tavan değil. Yönergeler, disleksili ve az gören kullanıcıların birçok ihtiyacını ele alır, ancak Accsible’ın sağladığı gibi özel erişilebilirlik özellikleri, her kullanıcının deneyimi kendi özel ihtiyaçlarına göre şekillendirmesine olanak tanıyan gerçek kişiselleştirme sunarak uyumun ötesine geçer.
Erişilebilirlik özellikleri yalnızca engelli kullanıcılar için değil, tüm kullanıcılar için faydalıdır. Yazı tipi ölçekleme, yüksek kontrast ve disleksi modu, zorlu koşullarda herkes için okuma deneyimini iyileştirir ve bunları hem uyum hem de kullanıcı deneyimi açısından sağlam bir yatırım haline getirir.

Yazı Tipi Ölçekleme, Yüksek Kontrast ve Disleksi Modu: Erişilebilirlik Özellikleri Açıklanıyor