跳到主要內容
  • 字級
:::|

1.3.1 HM1130104E 適當使用巢狀標題呈現文件結構

稽核評量碼

HM1130104E

對應成功準則

1.3.1

對應認證等級

A

對應國際技術碼

H42

類別

HTML

訊息

適當使用巢狀標頭呈現文件結構

英文訊息

H42: Using h1-h6 to identify headings

ARIA12: Using role=heading to identify headings

ARIA20: Using the region role to identify a region of the page

H97: Grouping related links using the nav element

規則說明

在HTML和XHTML任何有使用巢狀標頭時(巢狀標頭通常用來呈現網頁中的章節的層次結構,例如將每個段落標頭,如下列範例中水果、蘋果等設為不同階層的標題)讓文章看起來有段落層次的結構,皆須遵守此指引。

檢測說明

範例1:使用H1到H6編寫網頁內容的標題順序

  1. 使用Google Chrome瀏覽器開啟檔案。
    開啟檔案
  2. 按滑鼠右鍵,點選檢視網頁原始碼。
    檢視原始碼
  3. 對照呈現的網頁受巢狀標題<h1> <h2> <h3>顯示層級結構。
    檢視原始碼設定

 

範例2:使用role="heading" 實現簡易標題

網頁呈現

範例二網頁呈現圖片

原始碼

<div role="heading">全球新聞</div>
... a list of global news with editorial comment....

<div role="heading">當地新聞</div>
... a list of local news, with editorial comment ...

說明