หนึ่งในแง่มุมที่สำคัญที่สุดของการช่วยเหลือพิเศษทางดิจิทัลคือโครงสร้างพื้นฐานของหน้า เมื่อสร้างเว็บไซต์หรือแอปโดยใช้องค์ประกอบทางโครงสร้างแทนที่จะอาศัยสไตล์เพียงอย่างเดียว ก็ให้บริบทสำคัญต่อผู้ที่ใช้เทคโนโลยีความช่วยเหลือพิเศษ (AT) เช่น โปรแกรมอ่านหน้าจอ
องค์ประกอบโครงสร้างทำหน้าที่เป็นโครงร่างของเนื้อหาในหน้าจอ แต่ยังทำหน้าที่เป็นจุดยึดเพื่อช่วยให้ไปยังส่วนต่างๆ ของเนื้อหาได้ง่ายขึ้นด้วย
เมื่อคุณใช้องค์ประกอบ HTML เชิงความหมาย ระบบจะส่งความหมายโดยธรรมชาติของแต่ละองค์ประกอบไปยังแผนผังการช่วยเหลือพิเศษและใช้โดย AT ซึ่งให้ความหมายต่อเนื้อหามากกว่าองค์ประกอบที่ไม่ใช่ความหมาย อาจมีบางกรณีที่คุณจำเป็นต้องเพิ่มแอตทริบิวต์ ARIA เพิ่มเติมเพื่อสร้างความสัมพันธ์หรือเพื่อปรับปรุงประสบการณ์ของผู้ใช้โดยรวม แต่ในสถานการณ์ส่วนมาก หนึ่งในองค์ประกอบ HTML มากกว่า 100 รายการที่มีอยู่ควรทำงานได้ค่อนข้างดีในตัวเอง
แม้ว่าโมดูลนี้จะมุ่งเน้นที่องค์ประกอบทางโครงสร้างที่ใช้กันอย่างแพร่หลายที่สุดและสำคัญต่อการเข้าถึงทางดิจิทัล แต่ก็มีองค์ประกอบและปัจจัยด้านสิ่งแวดล้อมเพิ่มเติมที่ควรพิจารณาเมื่อสร้างโครงสร้างในเว็บไซต์หรือแอป ตัวอย่างเหล่านี้เป็นข้อมูลเบื้องต้นเกี่ยวกับหัวข้อนี้มากกว่าที่จะครอบคลุมทั้งหมด
จุดสังเกต
ผู้ใช้ของ AT จะใช้องค์ประกอบโครงสร้างเพื่อให้ข้อมูลเกี่ยวกับเลย์เอาต์โดยรวมของหน้าเว็บ เมื่อแบ่งส่วนเนื้อหาขนาดใหญ่ออก คุณจะใช้บทบาทจุดสังเกต ARIA หรือองค์ประกอบจุดสังเกต HTML ที่ใหม่กว่าเพื่อเพิ่มบริบทโครงสร้างให้กับหน้าเว็บได้
จุดสังเกตช่วยให้มั่นใจได้ว่าเนื้อหาจะอยู่ในพื้นที่ที่นำทางได้ เราขอแนะนำให้ระบุจุดสังเกตอย่างน้อย 1 รายการต่อหน้า
แหล่งข้อมูลบางส่วนแนะนำให้รวมจุดสังเกต ARIA และ HTML เข้าด้วยกันเพื่อให้การครอบคลุม AT ที่ดียิ่งขึ้น แม้ว่าความซ้ำซ้อนประเภทนี้จะไม่ทำให้เกิดปัญหาสำหรับผู้ใช้ แต่ให้ทดสอบรูปแบบโดยใช้โปรแกรมอ่านหน้าจอเพื่อความมั่นใจ หากไม่แน่ใจ เราขอแนะนำให้ใช้เฉพาะองค์ประกอบจุดสังเกต HTML ที่ใหม่กว่าเท่านั้น เนื่องจากการรองรับเบราว์เซอร์นั้นมีประสิทธิภาพมาก
มาเปรียบเทียบองค์ประกอบจุดสังเกตของ HTML ตามที่แมปกับบทบาทจุดสังเกต ARIA ของคู่กัน
องค์ประกอบจุดสังเกตของ HTML | บทบาทจุดสังเกต ARIA |
---|---|
<header> |
แบนเนอร์ |
<aside> |
ส่วนเสริม |
<footer> |
ข้อมูลเนื้อหา |
<nav>
|
การนำทาง |
<main> |
หลัก |
<form> 1 |
แบบฟอร์ม |
<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 โครงสร้างของตารางข้อมูลเป็นสิ่งสำคัญในการถ่ายทอดข้อมูลที่เรียบง่าย และซับซ้อนให้แก่ผู้ใช้
เมื่อตารางมีโครงสร้างที่ถูกต้อง ความสัมพันธ์จะเกิดขึ้นระหว่างส่วนหัวของคอลัมน์กับแถว และข้อมูลภายในตาราง หากจัดโครงสร้างไม่ถูกต้อง ผู้ใช้จะต้องถอดรหัสความหมายและบริบทของข้อมูลในตาราง
การสร้างความสัมพันธ์ผ่านโค้ดมีวิธีการที่แตกต่างกันขึ้นอยู่กับความซับซ้อนของตาราง ขั้นตอนแรกในการทำให้ตารางเข้าถึงได้คือการมาร์กอัปเซลล์ส่วนหัวด้วย <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>