Gezinme bağlantıları ve etkin durumlar
className ve aria-current kullanarak açık etkin durumlara sahip gezinme oluşturun; bağlantıları erişilebilir ve küçük ekranlara uygun tutun.
Gezinme bağlantıları ve etkin durumlar, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 3 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 3 dersten oluşur.
Etkin durumlar neden önemlidir
Amaç: Küçük bir gezinme çubuğu oluşturmak ve etkin rotayı kullanıcılar ile ekran okuyucular için açıkça belirtmek.
- Etkin biçimlendirme
- aria-current
- Küçük ekranlara uygun düzen
Etkin mantık ve erişilebilirlik
Bir bağlantının etkin durumunu geçerli yolu karşılaştırarak hesaplayın. Belirgin bir görsel stil ekleyin ve etkin bağlantıda aria-current="page" ayarlayın.
Gösterim: etkin gezinme
Küçük bir karma yönlendiricisi ve etkin bağlantıyı biçimlendiren, aria-current ayarlayan bir Nav bileşeni uyguluyoruz.
<div id="root"></div>
Erişilebilirlik ipuçları
Erişilebilirlik ipuçları:
- Gezinme için gerçek <a> bağlantılarını kullanın.
- Etkin bağlantıda aria-current="page" ayarlayın.
- Gezinmeden sonra odağı görünür tutun.
Görsel netlik
Etkin durumları renk ve kontrastla belirgin hâle getirin; dokunma hedeflerini büyük tutun (en az 40px) ve küçük ekranlar için aralıkları geniş bırakın.
Kaçınılması gerekenler
Şunlardan kaçının:
- Yalnızca üzerine gelme stillerini kullanmak; dokunmatik cihaz kullananlar bunları göremez.
- Etkin bağlantılarda aria-current ayarlamayı unutmak.
- Arayüzü güncellemeden yalnızca URL'ye güvenmek.
Etkin durum için en iyi uygulama
Özet
Özet: Etkin bağlantıları geçerli yoldan hesaplayın, onları açıkça biçimlendirin ve ekran okuyuculara yardımcı olmak için aria-current="page" ayarlayın.
Sıkça Sorulan Sorular
“Gezinme bağlantıları ve etkin durumlar” dersi ücretsiz mi?
Evet — “Gezinme bağlantıları ve etkin durumlar” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 3 dersten oluşur.
“Gezinme bağlantıları ve etkin durumlar” dersinde ne öğreneceğim?
className ve aria-current kullanarak açık etkin durumlara sahip gezinme oluşturun; bağlantıları erişilebilir ve küçük ekranlara uygun tutun. React 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.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React 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, 3 dersinin 3. dersidir.
“Gezinme bağlantıları ve etkin durumlar” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React 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
- İstemci tarafı yönlendirme kavramları
- İç içe yollar ve yol parametreleri
- Gezinme bağlantıları ve etkin durumlar