หนึ่งในแง่มุมที่สำคัญที่สุดของการช่วยเหลือพิเศษบนสื่อดิจิทัลคือโครงสร้างพื้นฐานของหน้าเว็บ เมื่อสร้างเว็บไซต์หรือแอปโดยใช้องค์ประกอบเชิงโครงสร้างแทนที่จะใช้เฉพาะสไตล์ คุณจะให้บริบทที่สำคัญแก่ผู้ที่ใช้เทคโนโลยีความช่วยเหลือพิเศษ (AT) เช่น โปรแกรมอ่านหน้าจอ
องค์ประกอบเชิงโครงสร้างทำหน้าที่เป็นเค้าโครงของเนื้อหาบนหน้าจอ และยังทำหน้าที่เป็นจุดยึดเพื่อให้ไปยังส่วนต่างๆ ภายในเนื้อหาได้ง่ายขึ้นด้วย
เมื่อคุณใช้องค์ประกอบ HTML ที่สื่อความหมาย ระบบจะส่งความหมายโดยธรรมชาติขององค์ประกอบแต่ละรายการไปยังต้นไม้การช่วยเหลือพิเศษและ AT จะใช้ความหมายดังกล่าว ซึ่งทำให้เนื้อหามีความหมายมากกว่าองค์ประกอบที่ไม่ใช่เชิงความหมาย อาจมีกรณีที่คุณต้องเพิ่มแอตทริบิวต์ ARIA เพิ่มเติมเพื่อสร้างความสัมพันธ์หรือเพื่อปรับปรุงประสบการณ์โดยรวมของผู้ใช้ แต่ในสถานการณ์ส่วนใหญ่ องค์ประกอบ HTML กว่า 100 รายการที่พร้อมใช้งานควรทำงานได้ดีพอสมควร
แม้ว่าโมดูลนี้จะมุ่งเน้นที่องค์ประกอบโครงสร้างที่ใช้กันอย่างแพร่หลายที่สุดซึ่งมีความสำคัญต่อการช่วยเหลือพิเศษทางดิจิทัล แต่ก็มีองค์ประกอบและปัจจัยด้านสภาพแวดล้อมเพิ่มเติมที่ควรพิจารณาเมื่อสร้างโครงสร้างในเว็บไซต์หรือแอปของคุณ ตัวอย่างเหล่านี้เป็นเพียงการแนะนำหัวข้อ ไม่ใช่ตัวอย่างทั้งหมด
จุดสังเกต
ผู้ใช้ AT อาศัยองค์ประกอบเชิงโครงสร้างเพื่อให้ข้อมูลเกี่ยวกับเลย์เอาต์โดยรวมของหน้า เมื่อแบ่งพื้นที่เนื้อหาขนาดใหญ่ออกเป็นส่วนๆ คุณสามารถใช้บทบาทจุดสังเกต ARIA หรือองค์ประกอบจุดสังเกต HTML เวอร์ชันใหม่เพื่อเพิ่มบริบทเชิงโครงสร้างลงในหน้าเว็บ
จุดสังเกตช่วยให้มั่นใจว่าเนื้อหาอยู่ในภูมิภาคที่ไปยังส่วนต่างๆ ได้ เราขอแนะนำให้คุณระบุจุดสังเกตอย่างน้อย 1 จุดต่อหน้า
แหล่งข้อมูลบางแห่งแนะนำให้ใช้จุดสังเกต ARIA และ HTML ร่วมกันเพื่อให้ครอบคลุม AT ได้ดียิ่งขึ้น แม้ว่าข้อมูลซ้ำซ้อนประเภทนี้จะไม่ก่อให้เกิดปัญหาสําหรับผู้ใช้ แต่ให้ทดสอบรูปแบบโดยใช้โปรแกรมอ่านหน้าจอเพื่อความปลอดภัย หากมีข้อสงสัย ทางที่ดีควรใช้องค์ประกอบจุดสังเกต HTML เวอร์ชันใหม่เท่านั้นโดยค่าเริ่มต้น เนื่องจากการรองรับเบราว์เซอร์มีความเสถียรมาก
มาดูการเปรียบเทียบองค์ประกอบจุดสังเกต HTML ที่แมปกับบทบาทจุดสังเกต ARIA ที่สอดคล้องกัน
องค์ประกอบจุดสังเกต HTML | บทบาทจุดสังเกต ARIA |
---|---|
<header> |
banner |
<aside> |
เสริมกัน |
<footer> |
contentinfo |
<nav>
|
navigation |
<main> |
main |
<form> 1 |
form |
<section> 1 |
region |
ต่อไปมาเปรียบเทียบตัวอย่างโครงสร้างเนื้อหาที่เข้าถึงได้
<div> <div>...</div> </div> <div> <p>Stamp collecting, also known as philately, is the study of postage stamps, stamped envelopes, postmarks, postcards, and other materials relating to postal delivery.</p> </div> <div> <p>© 2022 - Stamps R Awesome</p> </div>
<header> <nav>...</nav> </header> <main> <section aria-label="Introduction to stamp collecting"> <p>Stamp collecting, also known as philately, is the study of postage stamps, stamped envelopes, postmarks, postcards, and other materials relating to postal delivery.</p> </section> </main> <footer> <p>© 2022 - Stamps R Awesome</p> </footer>
ส่วนหัว
เมื่อใช้อย่างถูกต้อง ระดับส่วนหัว HTML จะสร้างเค้าโครงที่กระชับของเนื้อหาหน้าเว็บโดยรวม
หัวเรื่องมี 6 ระดับที่เราใช้ได้ ส่วนหัวระดับ 1 <h1>
ใช้สำหรับข้อมูลที่สําคัญที่สุดและอยู่สูงสุดของหน้า โดยระดับจะเพิ่มขึ้นไปจนถึงหัวระดับ 6 <h6>
สําหรับข้อมูลที่สําคัญน้อยที่สุดและอยู่ต่ำสุด
ลำดับของระดับส่วนหัวมีความสำคัญ คุณไม่ควรข้ามระดับส่วนหัว เช่น เริ่มต้นส่วนด้วย <h1>
แล้วตามด้วย <h5>
ทันที แต่คุณควรดำเนินการต่อไปยัง <h5>
ตามลำดับ ลําดับระดับส่วนหัวมีความสําคัญอย่างยิ่งสําหรับผู้ใช้ AT เนื่องจากเป็นวิธีหลักในการไปยังส่วนต่างๆ ของเนื้อหา
พิจารณาแยกรูปแบบ CSS ออกจากระดับส่วนหัวเพื่อช่วยให้คุณยึดตามโครงสร้างเชิงความหมายและลําดับของส่วนหัวที่เหมาะสม วิธีนี้ช่วยให้คุณใช้รูปแบบส่วนหัวได้อย่างยืดหยุ่นมากขึ้นโดยที่ยังรักษาลําดับระดับส่วนหัวไว้ คุณไม่ควรใช้เฉพาะสไตล์เพื่อสร้างส่วนหัว เนื่องจาก AT จะไม่ถือว่าส่วนหัวเหล่านี้เป็นหัวข้อ
เมื่อเราสร้างส่วนหัวปลอม ระบบจะไม่ส่งโครงสร้างที่เหมาะสมไปยังผู้ใช้ AT
หัวเรื่องยังเป็นประโยชน์ต่อผู้ที่มีความบกพร่องทางสมองและสมาธิสั้นด้วย เนื้อหาส่วนหัวต้องสื่อความหมายเพื่อช่วยให้ผู้ใช้เข้าใจว่าสิ่งใดสำคัญที่สุดในหน้า
<div> <h3>Stamps</h3> <p>Stamp collecting, also known as philately, is the study of postage stamps, stamped envelopes, postmarks, postcards, and other materials relating to postal delivery.</p> </div> <div> <h3>How do I start a stamp collection?</h3> <h2>Equipment you will need</h2> <h4>...</h4> <h2>How to acquire stamps</h2> <h4>...</h4> <h2>Organizations you can join</h2> <h4>...</h4> </div>
<header> <h1>Stamp collecting</h1> </header> <main> <section aria-label="Introduction to stamp collecting"> <h2>What is stamp collecting?</h2> <p>Stamp collecting, also known as philately, is the study of postage stamps, stamped envelopes, postmarks, postcards, and other materials relating to postal delivery.</p> </section> <section aria-label="Start a stamp collection"> <h2>How do I start a stamp collection?</h2> <h3>Required equiment</h3> <p>...</p> <h3>How to acquire stamps</h3> <p>...</p> <h3>Organizations you can join</h3> <p>...</p> </section> </main>
รายการ
รายการ HTML เป็นวิธีจัดกลุ่มรายการที่คล้ายกันตามความหมาย ซึ่งทำให้รายการเหล่านั้นมีความหมายโดยตัวของมันเอง คล้ายกับรายการของใช้ทั่วไปหรือรายการสิ่งที่ต้องทำที่ยาวไม่สิ้นสุดซึ่งคุณมักจะเพิกเฉย
รายการ HTML มี 3 ประเภท ได้แก่
องค์ประกอบรายการลิสต์ <li>
ใช้เพื่อแสดงรายการในลิสต์แบบจัดลำดับหรือไม่จัดลำดับ ส่วนองค์ประกอบคำอธิบาย <dt>
และคำจำกัดความ <dd>
จะอยู่ในรายการคำอธิบาย
เมื่อโปรแกรมอย่างถูกต้อง องค์ประกอบเหล่านี้จะแจ้งให้ผู้ใช้ AT ที่ไม่พิการทางสายตาทราบเกี่ยวกับโครงสร้างที่มองเห็นได้ของรายการ เมื่อ AT พบรายการเชิงความหมาย ก็จะบอกชื่อรายการและจำนวนรายการในรายการให้ผู้ใช้ทราบได้ ขณะที่ผู้ใช้ไปยังส่วนต่างๆ ในรายการ AT จะอ่านรายการแต่ละรายการออกเสียงและบอกหมายเลขของรายการนั้นในรายการ เช่น รายการที่ 1 จาก 5 รายการที่ 2 จาก 5 รายการ และอื่นๆ
การจัดกลุ่มรายการเป็นลิสต์ยังช่วยคนที่มีสายตาที่มีปัญหาด้านความรู้ความเข้าใจและสมาธิ รวมถึงผู้ที่มีปัญหาด้านการอ่านด้วย เนื่องจากโดยทั่วไปแล้ว เนื้อหาของลิสต์จะมีการจัดรูปแบบให้มีพื้นที่ว่างทางสายตามากขึ้นและเนื้อหาตรงประเด็น
<div> <p>How do I start a stamp collection?</p> <p>Equipment you will need</p> <div> <p>Small tongs with rounded tips</p> <p>Stamp hinges</p> <p>Stockbook or albumn</p> <p>Magnifying glass</p> <p>Stamps</p> </div> </div>
<div> <h1>How do I start a stamp collection?</h1> <h2>Equipment you will need</h2> <ol> <li>Small tongs with rounded tips</li> <li>Stamp hinges</li> <li>Stockbook or albumn</li> <li>Magnifying glass</li> <li>Stamps</li> </ol> </div>
ตาราง
ใน HTML โดยทั่วไปตารางจะใช้สำหรับจัดระเบียบข้อมูลหรือเลย์เอาต์หน้าเว็บ
คุณจะใช้องค์ประกอบโครงสร้างเชิงความหมายที่แตกต่างกัน ทั้งนี้ขึ้นอยู่กับวัตถุประสงค์ของตาราง ตารางอาจมีโครงสร้างที่ซับซ้อนมาก แต่เมื่อคุณยึดตามกฎความหมายพื้นฐาน ตารางจะเข้าถึงได้ค่อนข้างง่ายโดยไม่ต้องมีการจัดการมากนัก
เลย์เอาต์
ในช่วงแรกๆ ของอินเทอร์เน็ต ตารางเลย์เอาต์เป็นองค์ประกอบ HTML หลักที่ใช้สร้างโครงสร้างภาพ ปัจจุบันเราใช้องค์ประกอบที่สื่อความหมายและไม่สื่อความหมายผสมกัน เช่น <div>
และจุดสังเกตเพื่อสร้างเลย์เอาต์
แม้ว่ายุคการสร้างตารางเลย์เอาต์จะสิ้นสุดไปแล้ว แต่บางครั้งก็ยังคงมีการใช้ตารางเลย์เอาต์อยู่ เช่น ในอีเมล จดหมายข่าว และโฆษณาที่มีภาพ ในกรณีเหล่านี้ ตารางที่ใช้เพื่อเลย์เอาต์เท่านั้นต้องไม่ใช้องค์ประกอบเชิงโครงสร้างที่สื่อถึงความสัมพันธ์และเพิ่มบริบท เช่น <th>
หรือ <caption>
นอกจากนี้ คุณยังต้องซ่อนตารางเลย์เอาต์จากผู้ใช้ AT ด้วย ARIA บทบาทการแสดงผล หรือสถานะ aria-hidden
<table> <caption>My stamp collection</caption> <tr> <th>[Stamp Image 1]</th> <th>[Stamp Image 2]</th> <th>[Stamp Image 3]</th> </tr> </table>
<table role="presentation"> <tr> <td>[Stamp Image 1]</td> <td>[Stamp Image 2]</td> <td>[Stamp Image 3]</td> </tr> </table>
ข้อมูล
ตารางข้อมูลและองค์ประกอบทั้งหมดของตารางต้องแสดงให้ผู้ใช้ AT เห็น ต่างจากตารางเลย์เอาต์ที่ควรซ่อนจากผู้ใช้ AT โครงสร้างของตารางข้อมูลมีความสําคัญอย่างยิ่งในการสื่อข้อมูลที่ง่ายและซับซ้อนไปยังผู้ใช้
เมื่อโครงสร้างตารางถูกต้อง ความสัมพันธ์จะก่อตัวขึ้นระหว่างส่วนหัวของคอลัมน์และแถวกับข้อมูลภายในตาราง เมื่อโครงสร้างไม่ถูกต้อง ผู้ใช้จะต้องถอดรหัสความหมายและบริบทของข้อมูลในตาราง
การสร้างความสัมพันธ์ผ่านโค้ดทำได้หลายวิธี ทั้งนี้ขึ้นอยู่กับความซับซ้อนของตาราง ขั้นตอนแรกในการทําให้ตารางเข้าถึงได้คือการมาร์กอัปเซลล์ส่วนหัวด้วยองค์ประกอบ <th>
และเซลล์ข้อมูลด้วยองค์ประกอบ <td>
สำหรับตารางที่ซับซ้อนมากขึ้น คุณอาจต้องใช้องค์ประกอบตาราง HTML เพิ่มเติม เช่น <rowgroup>
, <colgroup>
, <caption>
และ scope
เพื่อสื่อความหมายและความสัมพันธ์
<table> <tr> <td>Animal</td> <td>Year</td> <td>Condition</td> </tr> <tr> <td>Bird</td> <td>1947</td> <td>Fair</td> </tr> <tr> <td>Lion</td> <td>1982</td> <td>Good</td> </tr> <tr> <td>Horse</td> <td>1978</td> <td>Mint</td> </tr> </table>
<table> <caption>My stamp collection</caption> <tr> <th>Animal</th> <th>Year</th> <th>Condition</th> </tr> <tr> <td>Bird</td> <td>1947</td> <td>Fair</td> </tr> <tr> <td>Lion</td> <td>1982</td> <td>Good</td> </tr> <tr> <td>Horse</td> <td>1978</td> <td>Mint</td> </tr> </table>