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