內容結構

數位無障礙功能最重要的一點，就是網頁的基礎結構。使用結構元素建構網站或應用程式，而非只依賴樣式，可為使用螢幕閱讀器等輔助技術 (AT) 的使用者提供重要內容。

結構元素可做為畫面上內容的大綱，但也可做為錨點，方便在內容中導覽。

使用語意式 HTML 元素時，每個元素的固有意義會傳遞至無障礙樹狀結構，並由 AT 使用，因此內容比非語意元素更有意義。在某些情況下，您可能需要新增額外的 ARIA 屬性來建立關係或改善整體使用者體驗，但在大多數情況下，可用的 100 多個 HTML 元素應該都能單獨運作。

雖然這個模組著重於數位無障礙功能最常用的結構元素，但在網站或應用程式中建構結構時，仍需考量其他元素和環境因素。這些範例只是介紹這個主題，並非涵蓋所有內容。

地標

AT 使用者會依靠結構元素，瞭解網頁的整體版面配置。在區隔大量內容區域時，您可以使用 ARIA 地標角色或較新的 HTML 地標元素，為網頁新增結構性背景資訊。

地標可確保內容位於可瀏覽的區域。建議您每個網頁至少提供一個地標。

部分資源建議結合 ARIA 和 HTML 地標，以提供更完善的 AT 涵蓋率。雖然這種冗餘情況不太可能對使用者造成問題，但請使用螢幕閱讀器測試這些模式，以確保一切正常。如有疑問，建議您預設只使用較新的 HTML 地標元素，因為瀏覽器支援非常穩健。

讓我們比較 HTML 地標元素對應的對應 ARIA 地標角色。

HTML 地標元素 ARIA 地標角色
<header> banner
<aside> 互補
<footer> contentinfo
<nav> navigation
<main> 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 標題層級可為整體網頁內容提供簡要大綱。

我們可以使用六個標題層級。標題一級 <h1> 用於網頁最重要的資訊，逐漸遞增至標題六級 <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 清單分為三種類型：

清單項目 <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>。

您也必須使用 ARIA 呈現角色或 aria-hidden 狀態，隱藏版面配置表格，以免讓 AT 使用者看到這些表格。

錯誤做法
<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>