內容結構

數位無障礙工具最重要的面向之一，就是網頁的基礎結構。使用結構元素建構網站或應用程式時，不必只依賴樣式，就能幫助使用輔助技術 (AT) 等輔助技術 (AT) 的使用者提供重要背景資訊。

結構元素可做為畫面內容的外框，但也可以做為錨點，方便使用者在內容中進行瀏覽。

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

雖然本單元著重介紹在數位無障礙功能中最廣泛使用的結構元素，但在建立網站或應用程式結構時，必須考量其他元素和環境因素。這些範例僅為主題簡介，而非全包式。

地標

AT 的使用者依賴結構元素，提供網頁整體版面配置的相關資訊。要在大型內容區域中進行區塊時，您可以使用 ARIA 位置標記角色或新版 HTML 地標元素，為網頁增添結構內容。

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

部分資源建議結合 ARIA 和 HTML 地標，以提高 AT 涵蓋率。雖然這類備援功能應該不會對使用者造成問題，但請使用螢幕閱讀器測試模式。如果仍有疑問，建議您預設只使用新版 HTML 地標元素，因為瀏覽器支援功能相當可靠。

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

HTML 位置標記元素 ARIA 位置標記角色
<header> 橫幅
<aside> 互補
<footer> 內容資訊
<nav> navigation
<main> 主要
<form> 1 表單
<section> 1 region
1 必須含有 name 屬性才能存取。section 必須具有存取名稱，才能讓 region 的隱式 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 標題層級應簡要地概述整體網頁內容。

我們可使用六個標題層級。標題層級 1 <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 會大聲讀出每個清單項目，並分辨清單中的哪個數字：第一項、第 2 個項目、第 2 個項目，依此類推。

由於清單內容的樣式通常都會有較醒目的空白字元，因此將項目分門別類也有助於觀測視障和注意力障礙的使用者。

錯誤做法
<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 隱藏狀態 的 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>