โครงสร้างเนื้อหา

หนึ่งในแง่มุมที่สำคัญที่สุดของการช่วยเหลือพิเศษบนสื่อดิจิทัลคือโครงสร้างพื้นฐานของหน้าเว็บ เมื่อสร้างเว็บไซต์หรือแอปโดยใช้องค์ประกอบเชิงโครงสร้างแทนที่จะใช้เฉพาะสไตล์ คุณจะให้บริบทที่สำคัญแก่ผู้ที่ใช้เทคโนโลยีความช่วยเหลือพิเศษ (AT) เช่น โปรแกรมอ่านหน้าจอ

องค์ประกอบเชิงโครงสร้างทำหน้าที่เป็นเค้าโครงของเนื้อหาบนหน้าจอ และยังทำหน้าที่เป็นจุดยึดเพื่อให้ไปยังส่วนต่างๆ ภายในเนื้อหาได้ง่ายขึ้นด้วย

เมื่อคุณใช้องค์ประกอบ HTML ที่สื่อความหมาย ระบบจะส่งความหมายโดยธรรมชาติขององค์ประกอบแต่ละรายการไปยังต้นไม้การช่วยเหลือพิเศษและ AT จะใช้ความหมายดังกล่าว ซึ่งทำให้เนื้อหามีความหมายมากกว่าองค์ประกอบที่ไม่ใช่เชิงความหมาย อาจมีกรณีที่คุณต้องเพิ่มแอตทริบิวต์ ARIA เพิ่มเติมเพื่อสร้างความสัมพันธ์หรือเพื่อปรับปรุงประสบการณ์โดยรวมของผู้ใช้ แต่ในสถานการณ์ส่วนใหญ่ องค์ประกอบ HTML กว่า 100 รายการที่พร้อมใช้งานควรทำงานได้ดีพอสมควร

แม้ว่าโมดูลนี้จะมุ่งเน้นที่องค์ประกอบโครงสร้างที่ใช้กันอย่างแพร่หลายที่สุดซึ่งมีความสำคัญต่อการช่วยเหลือพิเศษทางดิจิทัล แต่ก็มีองค์ประกอบและปัจจัยด้านสภาพแวดล้อมเพิ่มเติมที่ควรพิจารณาเมื่อสร้างโครงสร้างในเว็บไซต์หรือแอปของคุณ ตัวอย่างเหล่านี้เป็นเพียงการแนะนำหัวข้อ ไม่ใช่ตัวอย่างทั้งหมด

จุดสังเกต

ผู้ใช้ AT อาศัยองค์ประกอบเชิงโครงสร้างเพื่อให้ข้อมูลเกี่ยวกับเลย์เอาต์โดยรวมของหน้า เมื่อแบ่งพื้นที่เนื้อหาขนาดใหญ่ออกเป็นส่วนๆ คุณสามารถใช้บทบาทจุดสังเกต ARIA หรือองค์ประกอบจุดสังเกต HTML เวอร์ชันใหม่เพื่อเพิ่มบริบทเชิงโครงสร้างลงในหน้าเว็บ

จุดสังเกตช่วยให้มั่นใจว่าเนื้อหาอยู่ในภูมิภาคที่ไปยังส่วนต่างๆ ได้ เราขอแนะนำให้คุณระบุจุดสังเกตอย่างน้อย 1 จุดต่อหน้า

แหล่งข้อมูลบางแห่งแนะนำให้ใช้จุดสังเกต ARIA และ HTML ร่วมกันเพื่อให้ครอบคลุม AT ได้ดียิ่งขึ้น แม้ว่าข้อมูลซ้ำซ้อนประเภทนี้จะไม่ก่อให้เกิดปัญหาสําหรับผู้ใช้ แต่ให้ทดสอบรูปแบบโดยใช้โปรแกรมอ่านหน้าจอเพื่อความปลอดภัย หากมีข้อสงสัย ทางที่ดีควรใช้องค์ประกอบจุดสังเกต HTML เวอร์ชันใหม่เท่านั้นโดยค่าเริ่มต้น เนื่องจากการรองรับเบราว์เซอร์มีความเสถียรมาก

มาดูการเปรียบเทียบองค์ประกอบจุดสังเกต HTML ที่แมปกับบทบาทจุดสังเกต ARIA ที่สอดคล้องกัน

ต่อไปมาเปรียบเทียบตัวอย่างโครงสร้างเนื้อหาที่เข้าถึงได้

<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 ประเภท ได้แก่

• สั่งซื้อ <ol>
• ไม่เป็นระเบียบ <ul>
• คําอธิบาย <dl>

องค์ประกอบรายการลิสต์ <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>