แอตทริบิวต์ lang และโปรแกรมอ่านหน้าจอ
ประกาศภาษาของหน้าและองค์ประกอบเพื่อการออกเสียงที่ถูกต้อง
แอตทริบิวต์ lang และโปรแกรมอ่านหน้าจอ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
แอตทริบิวต์ lang ทำหน้าที่อะไร
แอตทริบิวต์ lang ระบุภาษาของเนื้อหาในองค์ประกอบโดยใช้แท็กภาษา BCP-47 โปรแกรมอ่านหน้าจอใช้ข้อมูลนี้เพื่อเลือกเครื่องมือและเสียงสำหรับออกเสียงที่ถูกต้อง ส่วนเครื่องมือค้นหาใช้เพื่อจัดทำดัชนีตามภาษา
การกำหนดค่าบนองค์ประกอบ html
ทุกหน้าต้องระบุภาษาหลักไว้ที่รากของเอกสาร: <html lang="en"> สำหรับภาษาอังกฤษ <html lang="tr"> สำหรับภาษาตุรกี และ <html lang="ja"> สำหรับภาษาญี่ปุ่น หากไม่ระบุ โปรแกรมอ่านหน้าจอจะกลับไปใช้ค่าเริ่มต้นของระบบผู้ใช้ ซึ่งมักออกเสียงทุกคำผิด
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>แท็ก BCP-47
แท็กจะเป็นไปตาม BCP-47 ได้แก่ รหัสภาษา (en, tr, ja) อาจมีภูมิภาคต่อท้าย (en-US, en-GB, zh-Hant, zh-Hans) และแทบไม่ต้องมีสคริปต์ ใช้แท็กที่เจาะจงที่สุดเท่าที่ถูกต้อง ส่วน "en" เพียงอย่างเดียวก็เพียงพอเมื่อการสะกดตามภูมิภาคไม่สำคัญ
การเปลี่ยนภาษาระหว่างหน้า
สำหรับส่วนที่ใช้ภาษาอื่น ให้กำหนดแอตทริบิวต์ lang ของส่วนนั้นเอง: <blockquote lang="fr">Bonjour</blockquote> โปรแกรมอ่านหน้าจอจะเปลี่ยนเสียงสำหรับส่วนนั้น ทำให้ออกเสียงได้ถูกต้องแม้ในหน้าที่มีหลายภาษา
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>ตัวเลือกภาษาของ CSS
CSS สามารถเลือกภาษาผ่าน :lang(en) ได้: blockquote:lang(fr)::before { content: "« "; } ตัวเลือกนี้จะจับคู่กับแอตทริบิวต์ lang ของบรรพบุรุษที่ใกล้ที่สุด ใช้สำหรับรูปแบบตัวพิมพ์ที่แตกต่างกันตามภาษา เช่น เครื่องหมายอัญประกาศและระยะห่าง
เหตุใดจึงสำคัญต่อการออกเสียง
คำว่า "Live" ในภาษาอังกฤษกับภาษาฝรั่งเศสออกเสียงต่างกัน ส่วน "Wir" ในภาษาเยอรมันออกเสียงว่า "veer" ไม่ใช่ "wear" โปรแกรมอ่านหน้าจอที่กำหนดค่าเป็นภาษาอังกฤษจะออกเสียงทั้งสองคำผิด เว้นแต่จะระบุว่าส่วนโดยรอบเป็นภาษาเยอรมันหรือฝรั่งเศส
hreflang สำหรับภาษาที่เชื่อมโยง
แอตทริบิวต์ hreflang บนลิงก์ (<a href="/fr/" hreflang="fr">Français</a>) แจ้งเครื่องมือค้นหาและเทคโนโลยีสิ่งอำนวยความสะดวกว่าหน้าที่ลิงก์ไปใช้ภาษาใด ใช้ร่วมกับแท็กลิงก์ hreflang ทั่วทั้งเว็บไซต์เพื่อให้ครอบคลุมการปรับให้เหมาะกับเครื่องมือค้นหาระดับนานาชาติอย่างครบถ้วน
การตรวจจับภาษาของผู้ใช้
JavaScript สามารถอ่านภาษาที่ผู้ใช้ต้องการได้จาก navigator.languages ซึ่งเป็นอาร์เรย์ของแท็ก BCP-47 ที่เรียงตามลำดับความสำคัญ ใช้ข้อมูลนี้เพื่อเลือกภาษาท้องถิ่นเริ่มต้นหรือแนะนำให้เปลี่ยนภาษา แต่ต้องให้ความสำคัญกับตัวเลือกที่ผู้ใช้ระบุเองเหนือค่าเริ่มต้นของเบราว์เซอร์เสมอ
การตรวจจับฝั่งเซิร์ฟเวอร์
ส่วนหัวคำขอ HTTP Accept-Language แสดงรายการภาษาที่ผู้ใช้ต้องการจากการกำหนดค่าเบราว์เซอร์ ใช้ข้อมูลนี้บนเซิร์ฟเวอร์เพื่อส่ง HTML ที่แปลเป็นภาษาที่เหมาะสมตั้งแต่คำขอแรก ทำให้ผู้ใช้เห็นภาษาของตนก่อนที่ JavaScript จะทำงาน
หลายภาษาในหน้าเดียว
บทความวิกิพีเดีย แอปเรียนภาษา และพจนานุกรมมักผสมหลายภาษาเป็นประจำ ควรกำหนดแอตทริบิวต์ lang ของแต่ละช่วงข้อความ แม้จะเป็นช่วงสั้น ๆ หากไม่กำหนด lang แยกตามส่วน เสียงของโปรแกรมอ่านหน้าจอและเครื่องหมายอัญประกาศของ CSS จะกลับไปใช้ค่าเริ่มต้นของหน้า
ข้อผิดพลาดที่พบบ่อย
ไม่กำหนด lang ให้กับ <html> (พบได้บ่อยมาก) ใช้รหัสภาษาผิด (lang="english" แทนที่จะเป็น lang="en") หรือใช้รหัสภูมิภาคทั้งที่ระบุภาษาเพียงอย่างเดียวก็เพียงพอ ใช้ตัวตรวจสอบมาตรฐาน W3C และการตรวจสอบการเข้าถึงของไลต์เฮาส์เพื่อตรวจจับปัญหาเหล่านี้ใน CI
ตรวจสอบความรู้
เหตุใดแอตทริบิวต์ lang บน <html> จึงสำคัญเป็นพิเศษสำหรับผู้ใช้โปรแกรมอ่านหน้าจอ
สรุป
ระบุภาษาของหน้าบน <html> ด้วยแท็ก BCP-47 (en, tr, ja, zh-Hant) ระบุการเปลี่ยนภาษาระหว่างหน้าด้วยแอตทริบิวต์ lang บน span หรือ section เพื่อให้โปรแกรมอ่านหน้าจอเปลี่ยนเสียงได้ CSS :lang() สามารถใช้รูปแบบตัวพิมพ์เฉพาะภาษาได้ ควรกำหนด lang เสมอ เพราะไม่เสียค่าใช้จ่ายและช่วยปรับปรุงการออกเสียงของโปรแกรมอ่านหน้าจอ การจัดทำดัชนีในเครื่องมือค้นหา และการเลือกเป้าหมายด้วย CSS ได้อย่างมาก
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “แอตทริบิวต์ lang และโปรแกรมอ่านหน้าจอ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “แอตทริบิวต์ lang และโปรแกรมอ่านหน้าจอ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “แอตทริบิวต์ lang และโปรแกรมอ่านหน้าจอ”
ประกาศภาษาของหน้าและองค์ประกอบเพื่อการออกเสียงที่ถูกต้อง คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “แอตทริบิวต์ lang และโปรแกรมอ่านหน้าจอ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แอตทริบิวต์ lang และโปรแกรมอ่านหน้าจอ
- dir=rtl สำหรับข้อความจากขวาไปซ้าย
- องค์ประกอบ bdi และ bdo
- charset และการจัดการ Unicode: อักขระพิเศษ