Özet - Erişilebilirlik ve i18n
- React kursu
- İleri seviye
- Ders 44/56
- 5 dk
Tam erişilebilir ve iki dilli bir açılır menü yazarsın.
Özet - Erişilebilirlik ve i18n
Bu grupta erişilebilir bileşen yazmayı, ARIA ve klavye desteğini ve react-i18next ile çok dilli uygulamayı öğrendin.
Semantik HTML her zaman ilk seçenektir; ARIA yalnızca gerektiğinde eklenir. Modal ve açılır menülerde odak yönetimi şarttır. Çok dillikte useTranslation ve Intl API'sini birlikte kullanırsın.
Şimdi hepsini bir araya getiren bir bileşen yazacaksın.
Uygulama AccessibleGreeting bileşenini yaz
AccessibleGreeting yaz. useTranslation ile t al. <button aria-label={t('kapat')} onClick={() => {}}>{t('merhaba')}</button> döndür. Dışa aktar.
Başlangıç kodu
import { useTranslation } from 'react-i18next';
// AccessibleGreeting bileşenini buraya yazÖrnek çözüm
import { useTranslation } from 'react-i18next';
function AccessibleGreeting() {
const { t } = useTranslation();
return (
<button aria-label={t('kapat')} onClick={() => {}}>
{t('merhaba')}
</button>
);
}
export default AccessibleGreeting;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi yanlış?
- aria-expanded açık/kapalı durumu bildirir
- tabIndex -1 programatik odak verir
- useTranslation bir t fonksiyonu döndürür
- Renk tek başına anlam taşıyabilir Doğru cevap
Açıklama: Renk tek başına anlam taşımamalı; metin veya ikon eklenir.
2 Boşluğu doldur: dil değiştir
const { t, i18n } = useTranslation();
i18n.____('en');const { t, i18n } = useTranslation();
i18n.changeLanguage('en');Açıklama: changeLanguage ile dil değiştirilir.
3 Kavramları eşleştir
| Kavram | Anlamı |
|---|---|
aria-label |
Görünür metin yokken etiket |
focus trap |
Modal içinde tutar |
t fonksiyonu |
Çeviri döndürür |
Intl |
Sayı ve tarih biçimler |