Web sitenizi daha okunabilir hale getirin

Sofia Emelianova

Düşük kontrastlı metinler, görme bozukluğu olan kullanıcılar için daha da zor olmak üzere tüm kullanıcıların web sitenizi okumasını zorlaştırır. 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şfedin. Tüm sorunların listesini almak için CSS'ye Genel Bakış panelini, (önizleme) Sorunlar sekmesini veya Lighthouse raporunu kullanın.
• Kontrast sorunlarını düzeltme. İnceleme modunda sorunları bir ipucuyla görüntüleyin ve kontrast oranını düzeltmek için renk seçicinin önerdiği renkleri seçin.
• Görme bozuklukları emülasyonu. Sitenize kullanıcılarınızın gözünden bakın.

Düşük kontrastlı metinleri keşfetme

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

1. Sayfanızda Geliştirici Araçları'nı açın.

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

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

CodePen'imizi açarak deneme yapabilirsiniz.

CSS'ye genel bakış panelindeki kontrast sorunları

Genel bakış için:

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

4. Kontrast sorunları tablosunda, imleçle 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ı

Sorunların listesini almak için:

1. Sorunlar sekmesinde kontrast sorunları raporlamayı etkinleştirin:
   1. Ayarlar > Deneysel'i açın.
   2. Filtre çubuğunda contrast issue simgesini arayın.
   3. Sorunlar paneli üzerinden otomatik kontrast sorunu raporlamayı etkinleştir'i seçin.
   4. En ü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ı, 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 gidin. Öğ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 kontrast sorununu düzeltmek için:

1. Kontrast sorunu bulun ve CSS'ye Genel Bakış panelinde, Sorunlar sekmesinde veya Lighthouse raporunda etkilenen bir öğenin bağlantısını tıklayın. DevTools sizi Öğeler paneline götürür ve ilgili öğeyi seçer.

   

   Örneğin, erişilemeyen demo CodePen'imizde etkilenen ilk öğe h1.line1.

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

   

   Fareyle üzerine gelindiğinde gösterilen ipucundaki kontrast oranı değerinin yanındaki uyarı işaretine dikkat edin. Kontrast oranı, ön plan (metin rengi) ve arka plan renkleri arasındaki parlaklık farkını ölçer.

3. Öğenin metin rengi bildiriminin yanındaki renk seçiciyi açın ve renk seçicide 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ı bildirir.

4. AAA düzeyinin 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 ton önizlemesindeki daireyi sürükleyebilirsiniz. AA veya AAA seviyesinde kalmak için sırasıyla üst ya da alt çizginin altındaki bir rengi seçin.

   

6. Benzer şekilde, CSS'ye Genel Bakış paneli, Sorunlar sekmesi veya Lighthouse raporu ile 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ıp kodunuza yapıştırın.
• Geliştirici Araçları'nın dosyaları doğrudan kaynaklarınıza kaydetmesine izin vermek için bir çalışma alanı oluşturun.

Sırada ne var?

Daha fazla bilgi:

• Genel olarak erişilebilirlik hakkında bilgi edinin.
• Özellikle renk ve kontrast erişilebilirliği