Metin aralığı ayarları ve ADA

Dört ayar, kayıp yok

Bazı okuyucular, özellikle disleksisi olan ya da az gören kişiler, metnin aralıklarını gevşeten kendi stil sayfalarını ya da eklentilerini yükler. Ölçüt, kullanıcı başka hiçbir şeyi değiştirmeden şu dördünü birlikte ayarladığında hiçbir içerik ya da işlevin kaybolmaması gerektiğini söyler:

• Satır yüksekliği (satır aralığı) yazı boyutunun en az 1,5 katı.
• Paragraflardan sonraki boşluk yazı boyutunun en az 2 katı.
• Harf aralığı yazı boyutunun en az 0,12 katı.
• Sözcük aralığı yazı boyutunun en az 0,16 katı.

Sayfanızın varsayılan olarak böyle görünmesi gerekmez. Buna dayanması gerekir: kesilen sözcük yok, başka metnin üzerine taşan metin yok, erişilemez hâle gelen denetim yok. İstisna, bu özelliklerden birini ya da birkaçını kullanmayan dil ve yazı sistemlerini kapsar; yalnızca o yazı sisteminde var olan özellikler geçerlidir.

Kamu sayfalarının içerik kaybettiği yerler

Kırılgan örüntüler tutarlıdır: sabit yükseklikli akordeon başlıkları, mutlak konumlandırmayla alanların üzerine yerleştirilmiş etiketler, iki satıra kesilmiş duyuru özetleri ve sabit piksel yüksekliğinde girişler. Hepsi tasarım dosyasında düzenli görünür ve aralıklar büyüyünce dağılır.

Bunlar bileşen kitlerinden yapılan izin portallarında, okul takvimlerinde ve yardım uygunluk sorgulama ekranlarında yaygındır. Kesilen bir son tarih ya da uygunluk cümlesi kozmetikten fazlasıdır; vatandaş formun cuma günü kapandığını söyleyen cümleyi hiç görmeyebilir.

Sabit yükseklikli akordeon başlıkları

Sabit yükseklik ve piksel satır yüksekliği, harfler açılıp sözcükler satır atladığında yer bırakmaz.

.sss-baslik {
  height: 44px;
  line-height: 44px;
  overflow: hidden;
}

.sss-baslik {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  line-height: 1.4;
}

Alanların üzerine konan etiketler

Bir alanın içine mutlak konumlandırılmış etiket, aralıklar büyüyünce yazılan metinle çakışır. Etiketi akışın içinde tutun.

.alan { position: relative; height: 48px; }
.alan label { position: absolute; top: 14px; left: 12px; }
.alan input { height: 48px; padding-top: 18px; }

.alan { display: grid; gap: 0.25rem; }
.alan label { font-size: 0.875rem; }
.alan input { min-height: 2.75rem; padding: 0.5rem 0.75rem; }

Kısaltılmış özetler ve kısa girişler

Bir özeti iki satıra kesmek, aralık arttığında cümlenin sonunu gizler. Metnin tamamını gösterin ya da okuyucuya açma yolu verin.

.duyuru-ozeti {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 3em;
  overflow: hidden;
}

.duyuru-ozeti { max-width: 65ch; }
/* metnin tamamı görünür; uzunsa details öğesi kullanın */

input[type="text"] { height: 30px; padding: 0; }

input[type="text"] { min-height: 2.25rem; padding: 0.25rem 0.5rem; }

Yerel uygulamalar ne olacak?

Ölçüt, işaretleme dilleriyle uygulanan içerik için yazılmıştır ve büyük mobil platformlar kullanıcılara bu dört özellik için, bir tarayıcı stil sayfasının yaptığı gibi uygulama başına geçersiz kılma imkânı vermez. Bu yüzden doğrudan bir yerel test yoktur. Pratik karşılığı, metnin çevresinde sabit yüksekliklerden kaçınmak ve kapsayıcıların büyümesine izin vermektir; bu da metin boyutunu değiştirme ölçütünde ele alınır.

Nasıl test edilir

1. Dört değeri sayfaya bir metin aralığı bookmarklet'iyle, kullanıcı stili eklentisiyle ya da geliştirici araçlarında tüm öğeleri hedefleyen bir kuralla uygulayın: satır yüksekliği 1,5, paragraf aralığı 2, harf aralığı 0,12 ve sözcük aralığı 0,16; hepsi yazı boyutuna göre.
2. Başka hiçbir şeyi değiştirmeyin. Sayfanın ayakta kalması için başka değişiklikler gerekiyorsa test başarısız olmuştur.
3. Her şablonda gezin: ana sayfa, formlar, tablolar, diyaloglar, menüler, hata mesajları.
4. Kesilen sözcükleri, üst üste binen metni, kısaltılmış etiketleri ve artık erişemediğiniz denetimleri arayın.
5. Sitenin sunduğu dillerde tekrarlayın; uzun sözcükler daha erken satır atlar.

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

• Dört değeri, sayfanın hoş görmesi gereken bir şey değil, tasarım gereksinimi saymak.
• Aralık özelliklerinde !important ile kullanıcı stil sayfalarını engellemek; kullanıcının kuralı kazanmalıdır.
• Aralığın hiç değiştirilemediği, görsel ya da canvas içindeki metin.
• Düğmelerde, sekmelerde, tablo satırlarında ve kartlarda sabit yükseklikler.

Yayına almadan önce:

• Dört değer uygulandığında hiçbir metin kesilmiyor ya da üst üste binmiyor.
• Denetimler görünür, erişilebilir ve etiketli kalıyor.
• Metnin çevresindeki kapsayıcılar sabit yükseklik değil, min-height ya da içerik yüksekliği kullanıyor.
• Hiçbir önemli aralık özelliği !important ile kilitlenmemiş.

Komşu ölçütleri aklınızda tutun: metin boyutunu değiştirme ve yeniden akış benzer mekanikleri kapsar. Bulguları sıraya koymak için ilk adımlar sayfasına bakın.

Kaynaklar

• Understanding SC 1.4.12: Text Spacing (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.