การปรับให้เป็นสากลและการแปล

หากคุณอ่านข้อความนี้อยู่ แสดงว่าคุณกำลังใช้เวิลด์ไวด์เว็บ ผู้ที่พูดภาษาแตกต่างกัน คนจากประเทศต่างๆ และผู้ที่มีภูมิหลังทางวัฒนธรรมต่างกันอาจใช้แบบฟอร์มของคุณ เรียนรู้วิธีเตรียมแบบฟอร์มสำหรับการปรับให้เป็นสากลและการแปล

ตรวจสอบว่าแบบฟอร์มใช้งานได้ในภาษาต่างๆ

มาดูวิธีที่จะช่วยให้มั่นใจว่าแบบฟอร์มของคุณจะใช้งานได้ในภาษาอื่นๆ

ขั้นตอนแรกในการทำให้เว็บไซต์พร้อมสำหรับการแปลเว็บไซต์คือการกำหนดแอตทริบิวต์ภาษา lang ในองค์ประกอบ <html> แอตทริบิวต์นี้ช่วยให้โปรแกรมอ่านหน้าจอเรียกใช้การออกเสียงที่ถูกต้องได้ และช่วยให้เบราว์เซอร์เสนอคำแปลของหน้าเว็บได้ หากภาษาที่กำหนดไม่ใช่ภาษาเริ่มต้นของเบราว์เซอร์

<html lang="en-us">

ดูข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์ lang

สมมติว่าคุณแปลแบบฟอร์มเป็นภาษาเยอรมัน คุณจะแน่ใจได้อย่างไรว่าเครื่องมือค้นหาและเบราว์เซอร์รู้เกี่ยวกับเวอร์ชันที่แปล คุณสามารถเพิ่มองค์ประกอบ <link> ใน <head> ของเว็บไซต์เพื่ออธิบายเวอร์ชันทางเลือก

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

ช่วยให้ผู้ใช้ที่พูดภาษาอื่นใช้แบบฟอร์มของคุณได้

คุณไม่สามารถแปลแบบฟอร์มเป็นทุกภาษา แต่มั่นใจได้ว่าเครื่องมือแปลสามารถแปลแบบฟอร์มให้คุณได้

เพื่อให้มั่นใจว่าเครื่องมือแปลจะแปลข้อความทั้งหมดในแบบฟอร์มได้ อย่าลืมตรวจสอบว่าข้อความทั้งหมดถูกกำหนดไว้ใน HTML และมองเห็นได้ เครื่องมือบางอย่างยังใช้งานกับเนื้อหาที่กำหนดไว้ใน JavaScript ได้ด้วย แต่เพื่อปรับปรุงความเข้ากันได้ ให้พยายามใส่ข้อความไว้ใน HTML ให้มากที่สุด

ตรวจสอบว่าแบบฟอร์มทำงานร่วมกับระบบการเขียนอื่นๆ ได้

ภาษาต่างๆ ใช้ระบบการเขียนและชุดอักขระที่ต่างกัน บางสคริปต์เขียนจากซ้ายไปขวา และบางส่วนเขียนจากขวาไปซ้าย

ไม่จำเป็นต้องเว้นระยะห่างไปกับระบบการเขียน

คุณใช้คุณสมบัติเชิงตรรกะ CSS เพื่อให้มั่นใจว่าแบบฟอร์มจะใช้งานได้กับระบบการเขียนแบบต่างๆ

อินพุตมีความหนาของเส้นขอบเป็น 1px ทุกด้าน ยกเว้นด้านซ้ายที่เส้นขอบหนา 4px ตอนนี้ ให้แก้ไข CodePen และเปลี่ยนระบบการเขียนจากขวาไปซ้ายโดยการเพิ่ม dir="rtl" ลงในองค์ประกอบ <main>

ตอนนี้เส้นขอบหนาจะอยู่ทางด้านขวา นั่นเป็นเพราะเรากำหนดเส้นขอบโดยใช้คุณสมบัติเชิงตรรกะ

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้เชิงตรรกะ

ตรวจสอบว่าแบบฟอร์มสามารถจัดการชื่อรูปแบบต่างๆ

สมมติว่าคุณมีแบบฟอร์มที่ผู้ใช้ต้องกรอกชื่อ คุณจะเพิ่มช่องในแบบฟอร์มอย่างไร

คุณเพิ่มช่องสำหรับชื่อและนามสกุลได้ 1 ช่อง อย่างไรก็ตาม ชื่อเรียกทั่วโลกแตกต่างกันไป เช่น บางคนไม่มีนามสกุล แล้วควรกรอกช่องนามสกุลอย่างไร

หากต้องการให้ป้อนชื่อได้สะดวกรวดเร็ว และเพื่อให้ทุกคนสามารถป้อนชื่อได้ไม่ว่าจะใช้รูปแบบใด ให้ใช้ช่องแบบฟอร์มเดียวสำหรับชื่อหากเป็นไปได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับชื่อบุคคล

หากคุณมีชื่อที่มีอักขระที่ไม่ใช่ภาษาละติน คุณอาจพบปัญหาว่ามีการรายงานชื่อของคุณเป็น invalid ในแบบฟอร์มบางรูปแบบ เมื่อคุณสร้างแบบฟอร์ม อย่าลืมอนุญาตอักขระที่เป็นไปได้ทั้งหมด และอย่าคิดว่าชื่อมีแต่อักขระละติน

อนุญาตให้ใช้ที่อยู่ได้หลายรูปแบบ

สำนักงานใหญ่ของ Google อยู่ที่ 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

ที่อยู่นี้ประกอบด้วยหมายเลขถนน ถนน เมือง รัฐ รหัสไปรษณีย์ และประเทศ รูปแบบที่อยู่ในประเทศของคุณอาจแตกต่างออกไปโดยสิ้นเชิง คุณจะแน่ใจได้อย่างไรว่าทุกคนสามารถป้อนที่อยู่ลงในแบบฟอร์มของคุณ

วิธีหนึ่งคือการใช้ข้อมูลทั่วไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีอื่นๆ ในการทํางานกับช่องที่อยู่ระหว่างประเทศ

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับการปรับให้เป็นสากลและการแปล

คุณจะเรียกใช้การออกเสียงที่ถูกต้องสำหรับโปรแกรมอ่านหน้าจอได้อย่างไร

ที่มีแอตทริบิวต์ lang
🎉
ที่มีแอตทริบิวต์ hreflang
ลองอีกครั้งนะ
เพิ่มคำอธิบายด้วยภาษาที่ใช้
ลองอีกครั้งนะ
ที่มีแอตทริบิวต์ language
ลองอีกครั้งนะ

คุณจะเปลี่ยนระบบการเขียนในเว็บไซต์ได้อย่างไร

ที่มีแอตทริบิวต์ direction
ลองอีกครั้งนะ
ที่มีแอตทริบิวต์ dir
🎉
ใช้คุณสมบัติทางตรรกะ CSS
ลองอีกครั้งนะ
ใช้องค์ประกอบ <link>
ลองอีกครั้งนะ

แหล่งข้อมูล