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