Uluslararasılaştırma ve yerelleştirme

Bu yazıyı okuyorsanız, World Wide Web'i kullanıyorsunuz demektir. Formlarınız farklı dilleri konuşan kişiler, farklı ülkelerden insanlar ve farklı kültürel geçmişe sahip kişiler tarafından kullanılabilir. Uluslararasılaştırma ve yerelleştirme için formunuzu nasıl hazırlayacağınızı öğrenin.

Formunuzun farklı dillerde çalıştığından emin olma

Formunuzun farklı dillerde çalıştığından nasıl emin olabileceğinizi görelim.

Sitenizi yerelleştirmeye hazır hale getirmenin ilk adımı, <html> öğesinde lang dil özelliğini tanımlamaktır. Bu özellik, ekran okuyucuların doğru telaffuzu çağırmasını sağlar ve tanımlanan dil varsayılan tarayıcı dili değilse tarayıcıların sayfanın çevirisini sunmasına yardımcı olur.

<html lang="en-us">

lang özelliği hakkında daha fazla bilgi edinin.

Bir formu Almancaya çevirdiğinizi varsayalım. Arama motorlarının ve tarayıcıların çevrilmiş sürümden haberdar olmasını nasıl sağlayabilirsiniz? Sitenizin <head> bölümüne, alternatif sürümleri açıklayan <link> öğeler ekleyebilirsiniz.

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

Başka dil konuşan kullanıcıların formunuzu kullanmasına yardımcı olun

Formunuzu her dile çeviremezsiniz, ancak çeviri araçlarının sizin için çevirebilmesini sağlayabilirsiniz.

Çeviri araçlarının formunuzdaki tüm metni çevirdiğinden emin olmak için tüm metnin HTML olarak tanımlandığından ve görünür olduğundan emin olun. Bazı araçlar, JavaScript'te tanımlanan içerikle de çalışır. Ancak, uyumluluğu artırmak için HTML'ye mümkün olduğunca çok metin eklemeye çalışın.

Formunuzun farklı yazma sistemleriyle çalıştığından emin olun

Farklı diller, farklı yazma sistemleri ve karakter kümeleri kullanır. Bazı komut dosyaları soldan sağa, bazıları sağdan sola doğru yazılır.

Boşlukları yazı sistemlerinden bağımsız yapın

Formunuzun farklı yazma sistemlerinde çalıştığından emin olmak için CSS mantıksal özelliklerini kullanabilirsiniz.

Girişin, kenarlığın 4px kalınlığında olduğu sol taraf hariç tüm kenarlarda 1px kenarlık kalınlığı var. Şimdi CodePen'i düzenleyin ve <main> öğesine dir="rtl" ekleyerek yazma sistemini sağdan sola olacak şekilde değiştirin.

Kalın kenarlık artık sağ tarafta. Bunun nedeni, kenarlığı mantıksal bir özellik kullanarak tanımlamamızdır.

input {
  border-inline-start-width: 4px;
}

Mantıksal özellikler hakkında daha fazla bilgi edinin.

Formunuzun farklı ad biçimlerini işleyebildiğinden emin olun

Kullanıcının adını girmesi gereken bir formunuz olduğunu varsayalım. Alanı formunuza nasıl eklersiniz?

Ad için bir alan ve soyadı için bir alan ekleyebilirsiniz. Ancak dünyanın her yerinde isimler farklıdır: Örneğin, bazı kişilerin soyadı yoktur. Peki, soyadı alanını nasıl doldurmaları gerekir?

Ad girmeyi hızlı ve kolay hale getirmek (ve biçimi ne olursa olsun herkesin adını girebilmesini sağlamak amacıyla) adlar için mümkün olduğunda tek bir form alanı kullanın.

Kişisel adlar hakkında daha fazla bilgi edinin.

Latin alfabesinde olmayan karakterler içeren bir adınız varsa bazı biçimlerde adınızın invalid olarak bildirilmesi sorunuyla karşılaşmış olabilirsiniz. Formlar oluştururken mümkün olan tüm karakterlere izin verdiğinizden emin olun ve bir adın yalnızca Latin karakterlerden oluştuğunu varsaymayın.

Çeşitli adres biçimlerine izin verin

Google'ın genel merkezi 1600 Amphitheatre Parkway, Mountain View, CA 94043, ABD adresindedir.

Bu adres sokak numarası, sokak, şehir, eyalet, posta kodu ve ülke bilgilerini içerir. Ülkenizde, adres biçimi tamamen farklı olabilir. Herkesin adresini formunuza girebildiğinden nasıl emin olabilirsiniz?

Bunun bir yolu genel girişler kullanmaktır.

Uluslararası adres alanlarıyla çalışmanın diğer yolları hakkında daha fazla bilgi edinin.

Öğrendiklerinizi sınayın

Uluslararasılaştırma ve yerelleştirme bilginizi test edin

Ekran okuyucular için doğru telaffuz nasıl kullanılır?

lang özelliğiyle.
🎉
hreflang özelliğiyle.
Tekrar deneyin.
Hangi dilin kullanıldığını belirten bir açıklama eklemek.
Tekrar deneyin.
language özelliğiyle.
Tekrar deneyin.

Web sitenizdeki yazma sistemini nasıl değiştirebilirsiniz?

direction özelliğiyle.
Tekrar deneyin.
dir özelliğiyle.
🎉
CSS mantıksal özelliklerini kullanma.
Tekrar deneyin.
<link> öğesi kullanılıyor.
Tekrar deneyin.

Kaynaklar