Metni yüzde 200 büyütme ve ADA

Yüzde 200'e kadar yakınlaştırma

Altyazılar ve metin görselleri dışında, metin yardımcı teknoloji olmadan yüzde 200'e kadar yeniden boyutlandırılabilmeli ve içerik ya da işlevsellik kaybı olmamalıdır. Sade bir dille: tarayıcıyı yakınlaştıran ya da ayarlardan metin boyutunu artıran bir ziyaretçi, her şeyi okuyabilmeli ve her denetimi kullanabilmelidir.

"Yardımcı teknoloji olmadan" ifadesi, ekran büyüteci değil, standart tarayıcı yakınlaştırması ya da metin boyutu ayarı anlamına gelir. "Kayıp" ise bir kapsayıcı tarafından kesilen metin, üst üste binen düğmeler, erişilemez hâle gelen menüler ya da sabit bir çubuğun arkasında kalan içeriktir.

Yerel dosya seçici ya da tarayıcı ipucu gibi tarayıcının ya da platformun çizdiği içerik ve denetimler, bu ölçüt kapsamında yazarın sorumluluğunda değildir.

Kamu sayfalarının yüzde 200'de bozulduğu yerler

Az gören vatandaşlar hizmet sayfalarını sık sık yakınlaştırır: bir okul bölgesi kayıt formu, bir mahkeme e-dosyalama ekranı, bir kütüphane hesap sayfası. Ortaya çıkan hatalar mekaniktir. Etiketler büyürken form alanları küçük kalır. Sabit bir üst çubuk pencerenin yarısını kaplar ve düzenlenen alanı örter. Piksel boyutlu bir kapsayıcı bir son tarihi keser.

Bu işlerin çoğunun bir son tarihi olduğundan, yakınlaştırınca kullanılamayan bir sayfa kozmetik bir sorun değil, gerçek bir engeldir. Sorun çoğu zaman tek bir şablonda yaşanır ve o şablonu kullanan tüm sayfaları etkiler; bu yüzden bir kez düzeltmek yaygın biçimde fayda sağlar.

Metinle birlikte büyümeyen form alanları

Metin girişleri metin boyutuyla birlikte büyümelidir. Onları göreli birimlerle boyutlandırın ve yer tanıyın.

.kayit-formu input {
  width: 120px;
  height: 24px;
  font-size: 11px;
}

.kayit-formu input {
  width: 100%;
  max-width: 14rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}

Ekranı yutan sabit üst çubuklar

Piksel olarak ölçülen sabit bir üst çubuk yüzde 100'de iyi görünür. Yüzde 200'de, etkin görüntü alanı daralınca, çubuk satır atlar ve altındaki içeriği örter.

.dosya-ust { position: fixed; top: 0; height: 80px; }
main { margin-top: 80px; }

.dosya-ust { position: sticky; top: 0; }
/* yükseklik içerikten gelir; satır atlar ve sayfa akışı uyum sağlar */

Yalnızca görünüm alanına bağlı yazı boyutları

Metni yalnızca görünüm alanı birimleriyle boyutlandırmak, tarayıcı yakınlaştırmasının onu hiç değiştirmemesine yol açabilir; bu ölçütü karşılamaz. Göreli bir birimi akışkan kısımla birleştirin.

.sayfa-basligi { font-size: 2.2vw; }

.sayfa-basligi { font-size: calc(1.25rem + 1vw); }

Yerel uygulamalarda sistem metin boyutu

Yerel uygulamalar bunu genellikle platformun metin stillerini kullanarak sağlar. Sabit punto boyutlarından ve sabit yükseklikli kapsayıcılardan kaçının.

// SwiftUI
Text("1 Mayıs'a kadar ödeyin").font(.system(size: 14))

// SwiftUI
Text("1 Mayıs'a kadar ödeyin").font(.callout)   // Dynamic Type'ı izler

// Jetpack Compose
Text("1 Mayıs'a kadar ödeyin",
     fontSize = with(LocalDensity.current) { 14.dp.toSp() })  // yazı ölçeğini iptal eder

// Jetpack Compose
Text("1 Mayıs'a kadar ödeyin", fontSize = 14.sp)  // sp kullanıcının yazı boyutunu izler

Nasıl test edilir

1. Tarayıcıyı masaüstü boyutlu bir pencerede yüzde 200'e ayarlayın (Ctrl ve + ya da Cmd ve +). Sayfadaki her görevi baştan sona deneyin.
2. Firefox'ta ayrıca Görünüm, Yakınlaştır, Yalnızca Metni Yakınlaştır'ı deneyin; bazı hatalar yalnızca metin büyüyüp yerleşim büyümediğinde ortaya çıkar.
3. Kesilme, üst üste binme, gizlenen denetimler ve alanları örten sabit üst çubuk arayın.
4. Telefonda sistem yazı boyutunu en yükseğe çıkarın ve web sayfaları ile uygulamalar için tekrarlayın.
5. Viewport meta etiketinin yakınlaştırmayı engellemediğini doğrulayın.

Sık yapılan hatalar ve yayın öncesi liste

• Viewport etiketinde user-scalable=no ya da düşük bir maximum-scale.
• Metni çevreleyen, sabit yükseklikli ve overflow: hidden olan kapsayıcılar.
• Yüzde 150'de duran özel bir metin boyutu aracı.
• Yalnızca yüzde 200'de mobil düzene geçen bir yerleşimle test edip bunun yeterli olduğunu varsaymak; orada da her şeyin yerinde olduğunu kontrol edin.

Yayına almadan önce:

• Tüm metin, denetim ve mesajlar yüzde 200'de kullanılabilir.
• Hiçbir kesilme, üst üste binme ya da sabit çubuk görevi engellemiyor.
• Mobil webde çimdikle yakınlaştırmaya izin veriliyor.
• Yerel ekranlar sistem yazı boyutunu izliyor.

Bu ölçüt yeniden akış ölçütüyle iyi eşleşir. Hukuki arka plan için WCAG 2.1 AA ve ADA sayfasına bakın.

Kaynaklar

• Understanding SC 1.4.4: Resize Text (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.