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