เอกสาร

นอกจากโครงสร้างแล้ว ยังมีองค์ประกอบ 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 จะพยายามอ่านข้อความภาษาอังกฤษโดยใช้สำเนียงและจังหวะเป็นภาษาสเปน การผสมผสานในลักษณะนี้จะทำให้ผลิตภัณฑ์ดิจิทัล ใช้งานไม่ได้และผู้ใช้หงุดหงิด

ไม่ควรทำ
<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>

iFrames

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

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

วิธีที่ 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 ตัวอักษรที่ถูกต้อง