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.language
özelliğiyle.Web sitenizdeki yazma sistemini nasıl değiştirebilirsiniz?
direction
özelliğiyle.dir
özelliğiyle.<link>
öğesi kullanılıyor.Kaynaklar
- W3C Uluslararasılaştırma makaleleri ve eğiticileri
- Frank'in Posta Adresleri Kompulsif Kılavuzu, 200'den fazla ülkedeki adres biçimleri için yararlı bağlantılar ve kapsamlı yönergeler sağlar.
- DataHub.io, ülke kodlarını ve adlarını indirmek için kullanabileceğiniz bir araçtır.