Web sitenizi daha okunabilir hale getirin

Sofia Emelianova

Önemli nokta: Düşük kontrastlı metin, web'deki en önemli erişilebilirlik sorunudur. Şubat 2022'de, en çok ziyaret edilen bir milyon ana sayfanın% 83,9'unda bu sorun vardı. Daha fazla bilgi için WebAIM Million 2022 raporuna göz atın.

Düşük kontrastlı metinler, web sitenizi tüm kullanıcılar için daha az okunabilir hale getirir. Bu durum, görme sorunları olan kullanıcılar için daha da geçerlidir. Geliştirici Araçları, düşük kontrast sorunlarını otomatik olarak bulabilir ve bunları düzeltmenize yardımcı olmak için daha iyi renkler önerebilir.

Geliştirici Araçları'nı kullanarak:

• Kontrast sorunlarını keşfetme. Tüm sorunların listesini almak için CSS'ye Genel Bakış panelini, (önizleme) Sorunlar sekmesini veya bir Lighthouse raporunu kullanın.
• Kontrast sorunlarını düzeltin. İnceleme modunda sorunları bir ipucu ile görüntüleyin ve kontrast oranını düzeltmek için Renk Seçici'nin önerdiği renkleri seçin.
• Görme bozukluklarını taklit edin. Sitenize kullanıcılarınızın gözünden bakın.

Düşük kontrastlı metni bulma

Düşük kontrastlı metni bulmak için:

1. Sayfanızda Geliştirici Araçları'nı açın. Bu eğitimde bu demo sayfasını kullanabilirsiniz.

2. Üç panelden birini kullanarak tüm kontrast sorunlarının listesini alın:

   • CSS'ye Genel Bakış
   • (Önizleme) Sorular
   • Lighthouse

CSS'ye Genel Bakış panelindeki kontrast sorunları

Genel bakış için:

1. CSS'ye Genel Bakış'ı açın.
2. Genel bakış alın.
3. Renkler bölümünü açın, Kontrast sorunları'na gidin ve varsa bir sorunu tıklayın.

4. Kontrast sorunları tablosunda, fareyle bir öğenin üzerine gelip yanındaki bağlantıyı tıklayın.

   

5. Sorunu Düşük kontrastlı metni düzeltme bölümünde açıklandığı şekilde düzeltin.

(Önizleme) Sorunlar sekmesindeki kontrast sorunları

Not: Bu, varsayılan olarak devre dışı olan bir önizleme özelliğidir.

Sorunların listesini almak için:

1. Sorunlar sekmesinde kontrast sorunları raporlamasını etkinleştirin:
   1. Ayarlar > Deneysel'i açın.
   2. Filtre çubuğunda contrast issue simgesini arayın.
   3. Sorunlar paneli aracılığıyla otomatik kontrast sorunu raporlamasını etkinleştir'i işaretleyin.
   4. Üstteki istemde Geliştirici Araçları'nı yeniden yükle'yi tıklayın.
2. Sorunlar sekmesini açın.

3. DevTools'un bulduğu kontrast sorunlarını genişletin, ardından öğeler tablosunu genişletin ve öğenin yanındaki bağlantıyı tıklayın.

   

4. Sorunu Düşük kontrastlı metni düzeltme bölümünde açıklandığı şekilde düzeltin.

Lighthouse raporundaki kontrast sorunları

Bir rapor çalıştırmak için:

1. Geliştirici Araçları'nda Diğer sekmeler > Lighthouse'u açın.
2. Aşağıdaki ayarlarla bir Lighthouse raporu oluşturun:
   • Mod: Gezinme (varsayılan)
   • Kategoriler: Erişilebilirlik
   • Cihaz: Masaüstü
3. Sayfa yüklemesini analiz et'i tıklayın ve Lighthouse'ın raporu oluşturmasını bekleyin.
4. Kontrast bölümüne gidin ve öğeler listesinde etkilenen bir öğenin bağlantısını tıklayın.
5. Sorunu Düşük kontrastlı metni düzeltme bölümünde açıklandığı şekilde düzeltin.

Düşük kontrastlı metin sorununu düzeltme

Düşük kontrast sorununu düzeltmek için:

1. Bir kontrast sorunu bulun ve CSS'ye Genel Bakış panelinde, Sorunlar sekmesinde veya Lighthouse raporunda etkilenen öğenin bağlantısını tıklayın. DevTools sizi Öğeler paneline götürür ve ilgili öğeyi seçer. Örneğin, bu demo sayfasında etkilenen ilk öğe h1.line1'dır.

2. DevTools'un sağ üst köşesindeki İncele'yi tıklayın ve fareyle görüntü alanındaki öğenin üzerine gelin. DevTools, bu öğe için bir ipucu gösterir.

   

   İpucu metninde kontrast oranı değerinin yanındaki uyarı işaretine dikkat edin. Kontrast oranı, ön plan (metin rengi) ile arka plan renkleri arasındaki parlaklık farkını ölçer.

3. Öğenin metninin renk beyanının yanındaki Renk Seçici'yi açın ve Renk Seçici'de Kontrast oranı bölümünü genişletin.

   

   Renk Seçici, kontrast oranının WebAIM yönergelerinin AA veya AAA düzeylerini karşılamadığını gösterir.

4. AAA seviyesinin yanındaki Önerilen rengi kullan düğmesini tıklayın. Renk Seçici, kontrast oranı kurallarına uygun metin rengini uygular.

   

5. Alternatif olarak, rengi manuel olarak seçmek için gölge önizlemesindeki daireyi sürükleyebilirsiniz. AA veya AAA seviyesinde kalmak için sırasıyla üst veya alt çizginin altında bir renk seçin.

   

6. Benzer şekilde, CSS'ye Genel Bakış panelini, Sorunlar sekmesini veya Lighthouse raporunu kullanarak bulduğunuz tüm kontrast sorunlarını düzeltin.

Değişiklikleri kaydetme

Geliştirici Araçları'nda yaptığınız değişiklikleri kaydetmek için:

• Tüm CSS değişikliklerini tek seferde kopyalayın ve kodunuza yapıştırın
• DevTools'un dosyaları doğrudan kaynaklarınıza kaydetmesine olanak tanıyan bir çalışma alanı oluşturabilirsiniz.

Sırada ne var?

Daha fazla bilgi:

• Erişilebilirlik hakkında genel bilgi edinme
• Özellikle renk ve kontrast erişilebilirliği