เอกสาร

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

โมดูลนี้มุ่งเน้นที่องค์ประกอบที่เฉพาะเจาะจงมากซึ่งไม่เหมาะกับโมดูลอื่นๆ แต่มีประโยชน์ต่อความเข้าใจ

ชื่อหน้า

องค์ประกอบ HTML <title> จะกำหนดเนื้อหาของหน้าเว็บหรือหน้าจอที่ผู้ใช้กำลังจะได้ใช้งาน ซึ่งอยู่ในส่วน <head> ของเอกสาร HTML และเทียบเท่ากับ <h1> หรือหัวข้อหลักของหน้า เนื้อหาชื่อจะแสดงในแท็บเบราว์เซอร์และช่วยให้ผู้ใช้ทราบว่ากำลังเข้าชมหน้าใด แต่จะไม่แสดงในเว็บไซต์หรือแอป

ในแอปหน้าเว็บเดียว (SPA) ระบบจะจัดการ <title> ในลักษณะที่แตกต่างออกไปเล็กน้อย เนื่องจากผู้ใช้ไม่ได้ไปยังหน้าต่างๆ เหมือนกับในเว็บไซต์แบบหลายหน้า สําหรับ SPA คุณสามารถเพิ่มค่าของพร็อพเพอร์ตี้ document.title ด้วยตนเองหรือใช้แพ็กเกจตัวช่วย ทั้งนี้ขึ้นอยู่กับเฟรมเวิร์ก JavaScript การประกาศชื่อหน้าเว็บที่อัปเดตให้ผู้ใช้โปรแกรมอ่านหน้าจอทราบอาจต้องใช้เวลาเพิ่มเติม

ชื่อหน้าเว็บที่สื่อความหมายดีต่อทั้งผู้ใช้และการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือค้นหา (SEO) แต่อย่าใส่คีย์เวิร์ดมากเกินไป เนื่องจากชื่อเป็นสิ่งแรกที่ประกาศเมื่อผู้ใช้ AT เข้าชมหน้าเว็บ ชื่อจึงต้องถูกต้อง ไม่ซ้ำใคร และสื่อความหมาย แต่ก็ต้องกระชับด้วย

เมื่อเขียนชื่อหน้าเว็บ แนวทางปฏิบัติแนะนำคือ "ใส่ข้อมูลหน้าใน" หรือเนื้อหาสำคัญไว้ก่อน แล้วค่อยเพิ่มหน้าหรือข้อมูลก่อนหน้าในภายหลัง วิธีนี้ช่วยให้ผู้ใช้ AT ไม่ต้องฟังข้อมูลที่ได้ยินแล้ว

ไม่ควรทำ
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
ควรทำ
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

ภาษา

ภาษาของหน้าเว็บ

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

เราขอแนะนำให้ใช้รหัสภาษา ISO แบบ 2 อักขระเพื่อให้ครอบคลุม AT มากขึ้น เนื่องจาก AT จำนวนมากไม่รองรับรหัสภาษาแบบขยาย

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

ไม่ควรทำ
<html>...</html>
ควรทำ
<html lang="en">...</html>

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

ไม่ควรทำ
<html lang="ar,en,fr,pt">...</html>
 ระบบไม่รองรับหลายภาษา
ควรทำ
<html lang="ar">...</html>
 ตั้งค่าเฉพาะภาษาหลักของหน้า ในกรณีนี้ ภาษาคืออาหรับ

ภาษาของส่วน

นอกจากนี้ คุณยังใช้แอตทริบิวต์ภาษา (lang) เพื่อสลับภาษาในเนื้อหาได้ด้วย ใช้กฎพื้นฐานเดียวกันกับแอตทริบิวต์ภาษาของหน้าเว็บแบบเต็ม ยกเว้นคุณจะเพิ่มแอตทริบิวต์นี้ลงในองค์ประกอบในหน้าที่เหมาะสมแทนในแท็ก <html>

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

สำหรับองค์ประกอบในหน้าเว็บที่เขียนในภาษาอื่น ให้เพิ่มแอตทริบิวต์ lang นั้นลงในองค์ประกอบ Wrapper ที่เหมาะสม ซึ่งจะลบล้างการตั้งค่าภาษาระดับบนสุดจนกว่าองค์ประกอบนั้นจะปิด

ไม่ควรทำ
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        "Kas sa räägid inglise keelt?" when I met someone new.</p>
    </div>
  </body>
</html>
ควรทำ
<html lang="en">
  <body>...
    <div>
      <p>While traveling in Estonia this summer, I often asked,
        <span lang="et">"Kas sa räägid inglise keelt?"</span>
        when I met someone new.</p>
    </div>
  </body>
</html>

iframe

เอลิเมนต์ iFrame (<iframe>) ใช้เพื่อโฮสต์หน้า HTML อื่นหรือเนื้อหาของบุคคลที่สามภายในหน้า โดยพื้นฐานแล้วคือการนำหน้าเว็บอื่นมาใส่ไว้ในหน้าหลัก โดยทั่วไปแล้ว iframe จะใช้สำหรับโฆษณา วิดีโอที่ฝัง ข้อมูลวิเคราะห์เว็บ และเนื้อหาแบบอินเทอร์แอกทีฟ

ในการทําให้ <iframe> เข้าถึงได้ง่าย คุณต้องพิจารณา 2 ด้านต่อไปนี้ ขั้นแรก <iframe> แต่ละรายการที่มีเนื้อหาแตกต่างกันควรมีองค์ประกอบชื่อภายในแท็กหลัก ชื่อนี้จะให้ข้อมูลเพิ่มเติมแก่ผู้ใช้ AT เกี่ยวกับเนื้อหาภายใน <iframe>

ประการที่ 2 แนวทางปฏิบัติแนะนำคือตั้งค่าการเลื่อนเป็น "อัตโนมัติ" หรือ "ใช่" ในการตั้งค่าแท็ก <iframe> วิธีนี้ช่วยให้ผู้ที่มีปัญหาการมองเห็นเลือนรางสามารถเลื่อนดูเนื้อหาภายใน <iframe> ที่อาจมองไม่เห็น โดยควรมีความยืดหยุ่นในด้านความสูงและความกว้างด้วย<iframe>

ไม่ควรทำ
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
ควรทำ
<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการช่วยเหลือพิเศษของเอกสาร

เว็บไซต์ของคุณเป็นตำราเรียนออนไลน์หลายภาษาที่แสดงหลายภาษาในหน้าเดียว วิธีใดคือวิธีที่ดีที่สุดในการบอกเทคโนโลยีความช่วยเหลือพิเศษเกี่ยวกับภาษาของข้อความ

ไม่ต้องกังวล AT อ่านแต่ละภาษาได้อัตโนมัติ
แม้ว่า AT บางรายการอาจมีทักษะในการตรวจจับภาษา แต่คุณไม่สามารถรับประกันได้ว่า AT จะเดาได้อย่างถูกต้อง
รวมทุกภาษาไว้ในองค์ประกอบ <html> เช่น <html lang="en,lt,pl,pt">
แอตทริบิวต์ lang จะเชื่อมโยงกับภาษาได้เพียงภาษาเดียวเท่านั้น
ตั้งค่า lang หลักสำหรับ <html> และภาษาอื่นๆ ในองค์ประกอบที่มีเนื้อหาในภาษาอื่น
AT จะอาศัยแอตทริบิวต์ภาษา <html> เป็นหลักในการอ่านเอกสาร หากมีข้อความหลายภาษา โปรดเพิ่มแอตทริบิวต์ lang ลงในองค์ประกอบที่เกี่ยวข้อง (เช่น ส่วนหรือย่อหน้า) ด้วยรหัส ISO 2 ตัวอักษรที่ถูกต้อง