Web sitenizi daha okunabilir hale getirin

Sofia Emelianova

Önemli nokta: Düşük kontrastlı metin, web'deki en yaygın erişilebilirlik sorunudur. Şubat 2022'de, en popüler milyon ana sayfanın% 83,9'unda bu sorun yaşandı. 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. Görme bozukluğu olan kullanıcılar içinse daha fazla okunabilir. Geliştirici Araçları, düşük kontrast sorunlarını otomatik olarak bulup düzeltmenize yardımcı olmak için daha iyi renkler önerir.

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

• 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üzeltme. İpucuyla ilgili sorunları denetleyici modunda 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ı simüle edin. Sitenizi kullanıcılarınıza nasıl göründüğüne bakın.

Düşük kontrastlı metni keşfedin

Düşük kontrastlı metni keşfetmek 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) Sorunlar
   • 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ı bölümüne gidin ve varsa bir sorunu tıklayın.

4. Kontrast sorunları tablosunda fareyle bir öğenin üzerine gelin ve 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ışı bırakılmış bir önizleme özelliğidir.

Sorunların listesini almak için:

1. Sorunlar sekmesinde kontrast sorunlarının bildirilmesini etkinleştirin:
   1. Ayarlar > Deneysel'i açın.
   2. Filtre çubuğunda contrast issue araması yapı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. Geliştirici Araçları'nın bulduğu kontrast sorunlarını, 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üklemeyi analiz et'i tıklayın ve Lighthouse'un raporu oluşturmasını bekleyin.
4. Kontrast bölümüne ilerleyin ve öğe 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ı metni düzeltme

Düşük kontrastla ilgili bir sorunu düzeltmek için:

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

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

   

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

3. Öğe 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 seviyelerine uymadığını belirtir.

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

   

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

   

6. Benzer şekilde, CSS'ye Genel Bakış paneli, Sorunlar sekmesi veya Lighthouse raporunda bulduğunuz tüm kontrast sorunlarını düzeltin.

Değişiklikleri kaydedin

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
• Geliştirici Araçları'nın dosyaları doğrudan kaynaklarınıza kaydetmesine olanak tanıyan bir Çalışma Alanı oluşturmayı düşünün.

Sonraki adım

Daha fazla bilgi:

• Genel olarak erişilebilirliği öğrenin
• Özellikle renk ve kontrast erişilebilirliği