無障礙網頁檢測培訓課程

第三章 網頁標題與內容標題

網頁標題

說明

網頁標題的實際位置通常在瀏覽器上方，不同瀏覽器擺放的位置有所不同，例如左上角或右上角。

網頁的標題也稱為網站的標題，這裡使用網頁的標題來稱呼是因為我們希望每個頁面的標題有所不同。每個頁面可以看成一個獨立的完整體。

設計良好的網頁標題，至少可以得到以下資訊：

其中，瀏覽器名稱是系統或瀏覽器自帶的，其他則是網頁開發者可以設定的。

多數明眼人容易忽略網頁標題，但使用導讀軟體的使用者習慣聽取網頁標題來大致了解頁面主要的功能。

另一方面，網頁標題也可作為驗證剛才是否有效點擊某個連結或按鈕的一種方式。因此，網站擁有良好的網頁標題對視障者還是很重要的。

操作

NVDA 直接聽讀網頁標題的快速鍵為 NVDA + t。t 就是 title 的縮寫。

態樣

  1. 每個網頁需要有網頁標題
  2. 每個網頁僅有一個網頁標題
  3. 每個網頁的標題需隨著不同網頁內容而有所不同(不需要完全相同，也不一定要與網頁架構完全一樣)
  4. 當層級較深時，網頁標題可以只以上個層級之標題為標題
  5. 建議將變動標題放於固定標題之前以利使用導讀軟體快速聽讀資訊

原碼範例

編號 1 原始語法
原碼
<title>網頁標題範例3-1</title>
範例 1 原始語法
補充

按 NVDA + t 可聽讀網頁標題

編號 2 完整網頁標題
原碼
<title>網頁標題範例3-2 - 無障礙網頁檢測培訓課程</title>
範例 2 完整網頁標題
補充

習慣上，將變動資訊放前面更能加快使用者聽讀資訊

規範

  1. HM1240200E 提供網頁的描述性標題

實測

  1. NVDA平臺 主要標題放在最前面以加速聽讀
  2. 台北市政府警察局 網站名稱放在最前面
  3. 新光醫院掛號 該頁沒有網頁標題
  4. 台灣數位有聲書推展學會 網頁標題太長時會簡縮
  5. 教育部國語辭典簡編本 網頁標題沒有搜尋文字
  6. 雲端千眼平臺 網頁較深時，標題沒有完全跟隨

內容標題

說明

在一大段的文字中，或者一個區塊的主題，想讓他更醒目或歸納成一個清單，就會使用這個標籤。

內容標題等級從1到6，數字越小表示字體越大 。

但有些程式設計師會利用這個標籤來讓整段或一行文字變大，這是不良的設計，如此會讓導讀軟體對於理解整個網頁的架構上產生疑惑。

事實上，若單純只是想放大或加粗字體，應該使用其他標籤或css樣式語言來完成效果。

程式設計師在使用 html 的標籤應該注意標籤本身的語意而非標籤產生的效果，才不會造成誤用。

內容標題的標籤效果是讓文字變大，但這只是結果而已，實際上，這個標籤的用途是讓不同區塊的標題更清楚，闡述不同區塊內容的主題。

這是一個讓網頁架構更清楚的標籤，而非文字效果渲染的標籤。

操作

  1. 使用方向鍵瀏覽網頁內容時，可以看到標題。
  2. 標題可以不是連結或按鈕，因此使用 tab 鍵可以不用駐點。
  3. 若標題為連結或按鈕時，則以連結或按鈕規範論處，但標題部分仍以標題規範論處。
  4. NVDA 的單鍵瀏覽：標題為 h，跳躍順序為網頁本身順序，而非標題順序。
  5. NVDA 的單鍵瀏覽：第一級標題 h1 為大鍵盤數字 1，h2 為數字 2，以此類推，h6 為數字 6。

態樣

  1. 內容標題之安排，需要按照層級標題順序。
  2. 每個頁面至少要有一個 h1 標題，但不限於一個(安排邏輯正確即可)。
  3. 內容標題不能被誤用於單純放大字體。
  4. 不得利用內容標題標籤來包住整個區塊之文字。
  5. 不可以有空的內容標題標籤。

原碼範例

編號 3 原始語法
原碼
<h1>內容標題範例3-3</h1>
範例 3 原始語法
補充

第一級標題通常用於放置網頁主要內容標題或網站LOGO。

編號 4 讓標題變成連結
原碼
<h2><a href="http://www.google.com.tw">google 首頁</a></h2>
<a href="http://www.google.com.tw"><h2>google 首頁</h2></a>
範例 4 讓標題變成連結
補充

符不符合規範重點在於使用時機是否為內容標題。

編號 5 內容標題忘了加上結束標籤
原碼
<h2> 友站連結 
<br> 下列網站都是很好的網站
<br> 大家可以進入網站慢慢瀏覽資訊
<br><a href="http://www.nvda.org.tw">NVDA平臺</a>
<br><a href="http://www.google.com.tw">google 首頁</a>
範例 5 內容標題忘了加上結束標籤
補充

NVDA 會將整段內容都視為 h2 標題範圍。

規範

  1. HM1130104E 適當使用巢狀標頭呈現文件結構
  2. HM1130106E 使用具語意的標記來標出強調的文字或特殊文字
  3. GN1240104E 在每一個內容區段開頭處提供標頭組件
  4. GN2240600E 提供描述性的標頭
  5. GN3241000E 使用標頭來組織網頁

實測

  1. 渣打 只有 h2 標籤
  2. 里仁網購 內容標題 h3 跳 h5
  3. 新光醫院掛號 沒有內容標題
  4. 樂天銀行 沒有內容標題
  5. 高雄市政府教育局 多個 h1 標題與段落使用 h2 標籤
  6. 新北市環境保護局 使用了 h1-h5 標題
  7. 小天使音樂教室 內容標題跳序安排