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

หนึ่งในแง่มุมที่สำคัญที่สุดของการช่วยเหลือพิเศษทางดิจิทัลคือโครงสร้างพื้นฐานของหน้า เมื่อสร้างเว็บไซต์หรือแอปโดยใช้องค์ประกอบทางโครงสร้างแทนที่จะอาศัยสไตล์เพียงอย่างเดียว ก็ให้บริบทสำคัญต่อผู้ที่ใช้เทคโนโลยีความช่วยเหลือพิเศษ (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]
1 ต้องรวมแอตทริบิวต์ name เพื่อให้เข้าถึงได้ section ต้องมีชื่อที่เข้าถึงได้สำหรับบทบาท ARIA โดยนัยของ 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 ประเภทดังนี้

  • สั่งซื้อ <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 โครงสร้างของตารางข้อมูลเป็นสิ่งสำคัญในการถ่ายทอดข้อมูลที่เรียบง่าย และซับซ้อนให้แก่ผู้ใช้

เมื่อตารางมีโครงสร้างที่ถูกต้อง ความสัมพันธ์จะเกิดขึ้นระหว่างส่วนหัวของคอลัมน์กับแถว และข้อมูลภายในตาราง หากจัดโครงสร้างไม่ถูกต้อง ผู้ใช้จะต้องถอดรหัสความหมายและบริบทของข้อมูลในตาราง

การสร้างความสัมพันธ์ผ่านโค้ดมีวิธีการที่แตกต่างกันขึ้นอยู่กับความซับซ้อนของตาราง ขั้นตอนแรกในการทำให้ตารางเข้าถึงได้คือการมาร์กอัปเซลล์ส่วนหัวด้วย <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>