Gezinme · Language selector

Dil seçici

Kullanıcının içerik dilini değiştirmesini sağlar. Her dil kendi adıyla ve kendi yazısıyla yazılır.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

HTML kodunu göster

<nav class="trds-dil" aria-label="Dil seçimi">
  <ul class="trds-dil__liste">
    <li><span aria-current="true" lang="tr">Türkçe</span></li>
    <li><a href="?dil=en" lang="en" hreflang="en">English</a></li>
    <li><a href="?dil=ar" lang="ar" hreflang="ar" dir="rtl">العربية</a></li>
    <li><a href="?dil=ku" lang="ku" hreflang="ku">Kurdî</a></li>
    <li><a href="?dil=ru" lang="ru" hreflang="ru">Русский</a></li>
  </ul>
</nav>

Ne zaman kullanılır

Hizmetin birden çok dilde sürümü varsa kullanın. Türkçe bilmeyen yerleşikler ve turistler için önemlidir.
Bayrak kullanmayın. Bayrak bir ülkedir, dil değildir.

Erişilebilirlik

Her bağlantı lang ve hreflang taşır. Ekran okuyucu doğru telaffuzla okur.
Geçerli dil aria-current="true" taşır ve bağlantı değildir.
Sağdan sola diller dir="rtl" taşır.

Karşılanan WCAG 2.2 ölçütleri 3.1.1 3.1.2 2.4.4

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, US, KR, JP, DK.