Internasionalisasi dan pelokalan

Jika Anda membaca ini, Anda sedang menggunakan {i>World Wide Web<i}. Formulir Anda mungkin digunakan oleh orang yang berbicara dalam bahasa yang berbeda, orang dari negara yang berbeda, dan orang-orang dengan latar belakang budaya yang berbeda. Pelajari cara menyiapkan formulir Anda untuk internasionalisasi dan pelokalan.

Pastikan formulir Anda berfungsi dalam berbagai bahasa

Mari kita lihat cara memastikan formulir Anda dapat digunakan dalam berbagai bahasa.

Langkah pertama agar situs Anda siap dilokalkan adalah menentukan atribut bahasa lang pada elemen <html>. Atribut ini memungkinkan pembaca layar memanggil pengucapan yang benar, dan membantu browser menawarkan terjemahan laman jika bahasa yang ditentukan bukan bahasa browser default.

<html lang="en-us">

Pelajari atribut lang lebih lanjut.

Misalnya Anda menerjemahkan formulir ke dalam bahasa Jerman. Bagaimana cara memastikan bahwa mesin telusur dan browser mengetahui versi yang diterjemahkan? Anda dapat menambahkan elemen <link> di <head> situs Anda yang mendeskripsikan versi alternatif.

<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">

Bantu pengguna yang berbicara dalam bahasa lain untuk menggunakan formulir Anda

Anda tidak dapat menerjemahkan formulir ke semua bahasa, tetapi Anda dapat memastikan bahwa alat penerjemahan dapat menerjemahkannya untuk Anda.

Untuk memastikan alat terjemahan menerjemahkan semua teks di formulir, pastikan semua teks ditetapkan dalam HTML dan terlihat. Beberapa alat juga bekerja dengan konten yang ditentukan dalam JavaScript, tetapi untuk meningkatkan kompatibilitas, cobalah untuk menyertakan teks sebanyak mungkin dalam HTML.

Memastikan formulir Anda berfungsi dengan sistem penulisan yang berbeda

Bahasa yang berbeda menggunakan sistem penulisan dan himpunan karakter yang berbeda. Beberapa skrip ditulis dari kiri ke kanan, dan beberapa dari kanan ke kiri.

Membuat spasi terpisah dari sistem penulisan

Untuk memastikan formulir Anda berfungsi untuk sistem penulisan yang berbeda, Anda dapat menggunakan properti logis CSS.

Input memiliki ketebalan batas 1px di semua sisi, kecuali di sisi kiri, dengan batas tebal 4px. Sekarang, edit CodePen dan ubah sistem penulisan dari kanan ke kiri dengan menambahkan dir="rtl" ke elemen <main>

Batas tebal sekarang berada di sisi kanan. Hal itu karena kita menentukan batas menggunakan properti logis.

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

Pelajari properti logis lebih lanjut.

Pastikan formulir Anda dapat menangani format nama yang berbeda

Misalnya, Anda memiliki formulir yang harus diisi oleh pengguna. Bagaimana cara Anda menambahkan kolom ini ke formulir?

Anda dapat menambahkan satu kolom untuk nama depan dan satu kolom untuk nama belakang. Namun, namanya berbeda di seluruh dunia: misalnya, beberapa orang tidak memiliki nama belakang—jadi bagaimana mereka harus mengisi kolom nama belakang?

Untuk mempercepat dan mempermudah proses memasukkan nama—serta untuk memastikan semua orang dapat memasukkan namanya, apa pun format—gunakan satu kolom formulir untuk nama jika memungkinkan.

Pelajari lebih lanjut nama pribadi.

Jika Anda memiliki nama dengan karakter non-Latin, Anda mungkin pernah mengalami masalah yaitu nama Anda dilaporkan sebagai invalid dalam beberapa bentuk. Jika Anda buat formulir, pastikan untuk mengizinkan semua karakter yang memungkinkan—dan jangan berasumsi bahwa nama hanya terdiri yang menggunakan karakter Latin.

Izinkan berbagai format alamat

Kantor pusat Google berada di 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States.

Alamat ini mencakup nomor jalan, jalan, kota, negara bagian/provinsi, kode pos, dan negara. Di negara Anda, format alamat mungkin sangat berbeda. Bagaimana cara memastikan semua orang dapat memasukkan alamat mereka di formulir Anda?

Salah satu caranya adalah dengan menggunakan input generik.

Pelajari lebih lanjut cara lain untuk bekerja sama kolom alamat internasional.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang internasionalisasi dan pelokalan

Bagaimana cara memanggil pengucapan yang benar untuk pembaca layar?

Dengan atribut lang.
🎉
Dengan atribut hreflang.
Coba lagi.
Menambahkan deskripsi dengan bahasa yang digunakan.
Coba lagi.
Dengan atribut language.
Coba lagi.

Bagaimana cara mengubah sistem penulisan di situs Anda?

Dengan atribut direction.
Coba lagi.
Dengan atribut dir.
🎉
Menggunakan properti logis CSS.
Coba lagi.
Menggunakan elemen <link>.
Coba lagi.

Resource