นอกจากโครงสร้างแล้ว ยังมีองค์ประกอบ 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>
และเพิ่มภาษาเพิ่มเติมในองค์ประกอบที่มีเนื้อหาในภาษาอื่น<html>
ตัวอย่างเช่น <html lang="en,lt,pl,pt">