Renk, Desen ve Doğrudan Etiketler
Serileri, renk körü kullanıcıların okuyabileceği şekilde kodlayın.
Renk, Desen ve Doğrudan Etiketler, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Tek Başına Renk Bazı Gözleri Yanıltır
Yaklaşık her 12 erkekten 1'i bazı renkleri güvenilir biçimde ayırt edemez. Grafiğiniz kırmızının kaybı gösterdiğini söylüyorsa bu kullanıcılar hiçbir fark göremez. 🎨
İki Kanal Kuralı
Her veri serisini rengin yanında bir ikinci kanalla da kodlayın: desen, şekil veya doğrudan etiket kullanın. Böylece renk bir ipucu olur, tek ipucu değil.
Desenler Eksikliği Giderir
Çubuklara ve alanlara çizgiler veya noktalar gibi farklı desenler verin. Dolgu, tamamen gri tonlamada bile serileri birbirinden ayırır.
<rect fill="url(#stripes)" />Çizgi Grafikleri İçin Farklı Şekiller
Çizgi grafiklerinde noktaları daire, kare ve üçgen gibi farklı şekillerle işaretleyin. Her çizgi, renk tonuna güvenmeden ayırt edilebilir kalır.
Doğrudan Etiketler Açıklamalardan Daha İyidir
Ayrı bir açıklama, kullanıcıyı renkleri eşleştirmeye zorlar. Etiketi doğrudan çizginin veya dilimin üzerine yerleştirin; böylece ad verinin yanında bulunur.
Renk Körlüğüne Uygun Bir Palet Seçin
Kırmızı ve yeşil gibi bazı renk çiftlerini birbirinden ayırt etmek çok zordur. Okabe-Ito gibi renk körlüğüne uygun bir palet bu çakışmaları önler.
Burada Kontrast Hâlâ Önemlidir
Yan yana bulunan seriler ve metin etiketleri gerçek bir kontrasta ihtiyaç duyar. WCAG, anlam taşıyan grafik bölümleri arasında en az 3'e 1 oranında kontrast ister.
Gri Tonlamada Test Edin
Hızlı bir kontrol yapın: grafiğinizi gri tonlamada görüntüleyin. Serileri birbirinden ayıramıyorsanız renk körü bir kullanıcı da ayıramaz. Yayına almadan önce düzeltin.
filter: grayscale(100%);Amaç, Yinelenen Kodlamadır
İpuçlarının bu şekilde üst üste kullanılması yinelenen kodlama olarak adlandırılır: renk, desen ve etiket. Bir ipucu kaybolsa bile grafik anlaşılır kalır.
İpuğuna Boğmayın
Denge önemlidir. Aynı anda her deseni kullanmak gürültü oluşturur. Her serinin ayırt edilebilir olması ve grafiğin sakin kalması için yalnızca yeterli ipucu ekleyin.
Kötü Aydınlatmada da Yardımcı Olur
Doğrudan etiketler ve desenler, güneş ışığında, ucuz ekranlarda veya siyah beyaz basılmış grafiklerde de işe yarar. Herkes kazanır. ☀️
Hızlı Kontrol
Grafik serilerini ayırt etmek için yalnızca renk kullanmak neden iyi bir yöntem değildir?
Özet: Birden Fazla İpucu
Yalnızca renge güvenmemeyi öğrendiniz: desenler, şekiller veya doğrudan etiketler ekleyin, güvenli paletler seçin ve gri tonlamada test edin. 🖤
Sıkça Sorulan Sorular
“Renk, Desen ve Doğrudan Etiketler” dersi ücretsiz mi?
Evet — “Renk, Desen ve Doğrudan Etiketler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Renk, Desen ve Doğrudan Etiketler” dersinde ne öğreneceğim?
Serileri, renk körü kullanıcıların okuyabileceği şekilde kodlayın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Renk, Desen ve Doğrudan Etiketler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Her Grafiğin Bir Metin Alternatifine İhtiyacı Vardır
- Veri Tablosu Geri Dönüşü
- Renk, Desen ve Doğrudan Etiketler
- Klavyeyle Gezinilebilen Etkileşimli Grafikler