數位協助工具

  • 9 分鐘

此處將提出需要注意的數個概念、語法和元素，使您的網頁對於擁有不同能力的所有人而言皆是無障礙的。 本單元提供基本主題的概觀。 若要完整探索有關提供無障礙網站的詳細資料，請參閱建議的資源。

HTML5 和 ARIA

HTML5 是最新版本的超文字標記語言 (HTML)。 全球資訊網協會 (W3C) 是開發 Web 標準的國際社群，即建議該語言。 能夠針對所有意圖和用途，HTML5 是全球資訊網目前的標準，且應該用來為您的網站組建基本結構。 如果您計劃建立無障礙的網站，您應該學習 HTML5 的語法和標記。

無障礙豐富網際網路應用程式 (ARIA) 是一種技術規格，可搭配 HTML5 使用，以協助使網頁和應用程式更為易用。 ARIA 不是 HTML5 的一部分，但是其屬性可和特定執行個體中的 HTML5 元素搭配使用。

如需詳細資訊，您可以深入了解 HTML 中的 ARIA \(英文\)。

標題和地標

無法看見網頁視覺效果提示的人依賴標題和標題元素來了解網頁的結構。 HTML5 有一系列的區段元素，可清楚地傳達網頁的結構：<header>、<nav>、<main> 和 <footer>。 如果正確使用，這些 HTML5 元素可協助螢幕助讀程式的使用者瀏覽網頁。

然而，如果要將協助工具的效果最大化，最佳方式是使用 HTML5 元素搭配 ARIA 角色。 ARIA 角色包括：role="banner"、role="navigation"、role="main" 和 role="contentinfo"。這些 ARIA 角色會建立地標結構，協助螢幕助讀程式的使用者可以快速且輕鬆地瀏覽至所需的網頁部分。 例如：您不需要等待螢幕助讀程式逐一敘述每個元素，而是可以立即跳到某個網頁的特定地標。

如需詳細資訊，請參閱 W3C ARIA 地標範例 \(英文\)。

頁面結構

網站也應該包含程式設計的標題或適當的標題格式設定。 如果網頁沒有標題，或使用標題元素的方式不正確，則螢幕助讀程式的使用者即難以知道自己在指定頁面上的位置。

若要避免這些問題：

  • 使用<標題>元素，以確保網頁提供資訊性和內容適當的頁面標題。
  • 確保在適當情況下使用程式設計的標題，並將其正確地設為巢狀，例如，<h3> 元素不應該接在 <h1> 元素的後面，除非兩者之間有一個 <h2> 元素。  
  • 請避免基於樣式的原因使用標題元素。

Color

如同任何數位內容一樣，建立網頁時，色彩的使用是必要的考量。 您應確保色彩不是傳達資訊、表示動作、提示回應或區別視覺效果元素的唯一視覺方法。 單獨使用色彩時，盲人或色盲者可能無法分辨需要哪些欄位、選取哪些專案等等。 確定文字和文字影像所提供的色彩對比比例至少為 4.5:1。 在線上可免費取得好幾個色彩對比分析器。 例如：您可以使用 Windows 的協助工具深入解析中的色彩對比分析器 \(英文\)，以確保無障礙的對比比例。

 本指導方針的一些例外狀況包含：

  • 大型文字：大規模文字 (18 點的標準字或 14 點的粗體字) 和大型文字影像的對比比例可以達到 3:1。
  • 附註：對於屬於非使用中使用者介面 (UI) 元件之文字或文字影像並無內容需求。 或者，對於任何人都不可見的純裝飾性文字或文字影像，或是屬於包含其他重要視覺內容的圖片一部分。
  • 商標標誌：屬於標誌或品牌名稱一部分的文字沒有最低對比需求。

People viewing large text on a computer screen.

適用於協助工具目的的大型螢幕上文字

資料表

資料表對某些輔助技術 (AT) 應用程式 (例如：螢幕助讀程式) 而言可能會造成困難。 為了讓資料表盡可能的易於使用，當您在自己的網站中使用表格時，請務必採取下列步驟：

  • 使用原生 HTML 資料表元素 (table、thead、tbody、tr、th 和 td)。
  • 正確識別資料表標題 (使用 th 元素)。
  • 使用複雜表格 (一個以上的標題列)，請確保標題和正確的資料相關聯。
  • 您可以使用範圍屬性來識別某資料格是否為資料列、資料行、資料列或資料行群組的標題 (使用資料列、資料行、資料列群組或資料行群組的值)。
  • 將 id 屬性新增至任何用為其他資料格標題的資料格，並在每一個資料格中使用 headers 屬性參照適當的 id 值。

Data table and its corresponding native HTML table elements.

如果未採取這些步驟，使用輔助技術的人員可能難以瞭解您網站上的資料表。

表單逾時和意見反應

如果無法清楚識別錯誤訊息，使用輔助技術的人員可能無法在網站上正確完成表單。 定時回應可能會防止使用輔助技術的人員完成表單或使用 Web 應用程式。

驗證之後，您可以透過下列方式明確指出錯誤訊息：

  • 使用一致的方法來指出錯誤訊息。
  • 識別錯誤的欄位。
  • 識別表單開頭的錯誤欄位。
  • 識別每個欄位的標籤中的錯誤欄位。

您必須盡可能提供替代輸入的建議。 不過，當這樣做會破壞表單用途時，這種方法即非必要。 例如，當表單是測試的一部分時，替代輸入的建議可能會提供線索或答案，而問題可能不適用。

應針對法律或金融交易提供錯誤防護。 其中一個選項是讓使用者在進行最終提交之前，先檢閱他們的輸入。

使用螢幕助讀程式人員可藉由檢視網頁的連結清單來流覽網頁。

如果網頁上的數個連結具有相同的名稱，但指向不同的 URL，人們可能會感到困惑。 確定連結名稱有意義、唯一和具描述性，無論是否在內容中。

避免使用在內容外顯示的泛型非描述性連結名稱，例如在 [其他資源] 清單中。 使用螢幕助讀程式的人沒有任何內容或瞭解連結是什麼，或為什麼有連結。 以下範例會顯示具有泛型、非無障礙連結名稱的清單，以及具有無障礙的描述性連結名稱的清單。

無障礙的連結範例：

Web page with a series of three descriptive link names.

描述性連結名稱系列

非無障礙的連結範例：

Web page with a series of three generic, non-descriptive link names

泛型、不具描述性的連結名稱系列

圖像

視障者無法看見影像，並需要依賴網站開發人員和內容建立者提供網頁內容的描述。

人員視力低下的人可能很難讀取文字影像，因為它在放大時會像素化。 當對比不夠強或影像太小時，就會發生其他的困難。

為影像 (例如：相片和按鈕) 提供簡短、特定且含有資訊的替代文字。  

非無障礙的影像範例：

<img src="MSFTlogo.jpg" alt="logo" />

無障礙的影像範例：

<img src="MSFTlogo.jpg" alt="Microsoft logo" />

雖然非無障礙的範例將影像描述為標誌，但並未指定標誌的類型，因此對於依賴替代文字的使用者而言並無幫助。 在無障礙的範例中新增限定詞之後，使用者便能精確地知道是什麼標誌。

另一個要考慮的非文字元素是裝飾性影像。 例如：如果網頁包含具風格的框線，即不需要在替代文字中詳細描述。 新增空白的替代屬性，即可在程式碼中指出其為裝飾性的。

Example of nontext elements requiring and not requiring descriptive alternative text attributes.

影像和裝飾性框線的範例

非無障礙的範例：

<img src="border.gif" />

無障礙的範例：

<img src="border.gif" alt="" />

無障礙的範例不包含任何文字。 不過事實上卻會包含alt屬性，但不會顯示任何文字，向螢幕助讀程式的使用者指出影像為裝飾性，且不包含重要的資訊。

如需更多關於改善協助工具的詳細資訊，請至下方網址進一步探索 W3C 非無障礙首頁的前後示範 \(英文\)。