Özet - Erişilebilirlik ve i18n

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.

Örnek çözümü göster

import { useTranslation } from 'react-i18next';

function AccessibleGreeting() {
  const { t } = useTranslation();
  return (
    <button aria-label={t('kapat')} onClick={() => {}}>
      {t('merhaba')}
    </button>
  );
}
export default AccessibleGreeting;

Kendini test et

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
Cevabı göster

Renk tek başına anlam taşıyabilir — Renk tek başına anlam taşımamalı; metin veya ikon eklenir.

Boşluğu doldur: dil değiştir

const { t, i18n } = useTranslation();
i18n.____('en');

Cevabı göster

const { t, i18n } = useTranslation();
i18n.changeLanguage('en');

Kavramları eşleştir

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

Sıradaki ders: Entegrasyon testi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler