在打造數位無障礙環境時, 網頁結構使用以下語言建立網站或應用程式時 結構元素 光是靠樣式就能化繁為簡 這樣您就能為使用輔助功能的使用者 例如螢幕閱讀器等
結構元素是畫面內容的外框,但 也可做為錨點,方便使用者瀏覽內容
使用語意 HTML 元素時 每個元素的固有意義會傳遞至無障礙樹狀結構 相較於非語意元素,這些文字能賦予更多意義 在某些情況下,你可能需要新增額外的 ARIA 屬性才能建構 或提升整體使用者體驗,但大多數 原因是 100+ 個 HTML 元素之一 所有可用資源,應該就能自行正常運作
雖然本單元的重點是介紹最廣泛使用的架構元素, 到市面上還有許多其他元素 在網站架構或建立網站結構時要考慮的環境因素 應用程式。這些例子只是主題簡介,而不是全包式。
地標
AT 的使用者必須仰賴結構元素來取得 顯示網頁的整體版面配置區隔大量內容區域時 使用 ARIA 地標角色或新版 HTML 地標元素來新增 網頁的結構上
地標可確保內容位於可瀏覽的區域。建議每個網頁至少提供一個地標。
部分資源建議結合 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 標題層級 構成整個網頁內容的簡潔架構。
有六個標題層級可使用,標題層級的 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>