內容結構

在打造數位無障礙環境時， 網頁結構使用以下語言建立網站或應用程式時 結構元素 光是靠樣式就能化繁為簡 這樣您就能為使用輔助功能的使用者 例如螢幕閱讀器等

結構元素是畫面內容的外框，但 也可做為錨點，方便使用者瀏覽內容

使用語意 HTML 元素時 每個元素的固有意義會傳遞至無障礙樹狀結構 相較於非語意元素，這些文字能賦予更多意義 在某些情況下，你可能需要新增額外的 ARIA 屬性才能建構 或提升整體使用者體驗，但大多數 原因是 100+ 個 HTML 元素之一 所有可用資源，應該就能自行正常運作

雖然本單元的重點是介紹最廣泛使用的架構元素， 到市面上還有許多其他元素 在網站架構或建立網站結構時要考慮的環境因素 應用程式。這些例子只是主題簡介，而不是全包式。

地標

AT 的使用者必須仰賴結構元素來取得 顯示網頁的整體版面配置區隔大量內容區域時 使用 ARIA 地標角色或新版 HTML 地標元素來新增 網頁的結構上

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

部分資源建議結合 ARIA 和 HTML 地標 以提供更好的 AT 涵蓋範圍雖然這種備援機制不應 以及運用螢幕閱讀器測試模式 。如有疑問時，建議您預設只使用新版 HTML 地標元素，如 瀏覽器支援 穩健成長

現在，我們比較兩個 HTML 地標元素 對應至 第一個對應的 ARIA 地標角色

，瞭解如何調查及移除這項存取權。
HTML 地標元素 ARIA 位置標記
<header> 橫幅廣告
<aside> 互補的
<footer> contentinfo
<nav> navigation
<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 標題層級 構成整個網頁內容的簡潔架構。

有六個標題層級可使用，標題層級的 1 <h1> 用於網頁最重要和最重要的資訊，逐步移至 標題第六層 <h6> 可取得最低和最不重要的資訊。

標題層級的順序相當重要。在理想情況下 標題層級例如以 <h1> 開頭，且 後面加上 <h5>。而是應該朝 <h5> 的 順序。標題層級順序對 AT 使用者來說特別重要 因為這是他們瀏覽內容的主要方式之一

為協助你遵循正確的語意結構和標題順序 請考慮將 CSS 樣式與標題層級區隔開來。這樣一來 標題樣式更有彈性，同時維持標題層級的順序。 請勿單獨使用樣式來建立標題 不會視為標題

假使標題是無效的，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 會在清單中唸出每個清單項目 這份清單中的編號：5 個項目的其中一個、第 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 的 AT 使用者也必須隱藏版面配置表格 簡報角色 或 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>