เอกสาร

นอกจากโครงสร้างแล้ว ยังมีองค์ประกอบ 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 เป็นภาษาที่ควรใช้

ขอแนะนำให้คุณใช้อักขระ 2 ตัว รหัสภาษา ISO สำหรับการครอบคลุม 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>

อย่าลืมว่าภาษาที่คุณเพิ่มใน Cascade ขององค์ประกอบ <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-3 แง่มุม ก่อนอื่น <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>

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

ทดสอบความรู้ความสามารถในการเข้าถึงเอกสาร

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

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