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

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

<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>