指南/編輯網站/網站設定/提升網站的無障礙功能

提升網站的無障礙功能

無障礙網站的設計是為了盡可能包容更多使用者,包括需要用輔助技術導覽網頁的身心障礙人士。本指引將說明如何打造無障礙網站。

網路研討會:建置無障礙網站

此影片使用英文字幕。
YouTube 提供自動翻譯功能,讓你可以用自己的語言觀看:

開啟自動翻譯字幕的方法:

  1. 播放影片。
  2. 點擊影片右下角的 ⚙️ 設定 圖示。
  3. 選擇 字幕/副本
  4. 選擇 自動翻譯
  5. 從清單中選擇你的偏好語言。

使用自動配音(測試版)的方法:

  1. 點擊 ⚙️ 設定 圖示。
  2. 選擇 音訊曲目
  3. 選擇你想收聽的語言:

ℹ️ 翻譯與配音由 Google 自動產生,可能不夠精確,且自動配音功能仍在測試階段,暫未向所有語言開放。

改善網站的無障礙功能

建置網站時,你可用一些動作來保障內容可以無障礙方式存取。

在圖片上使用替代文字

並非所有網站訪客都能看見圖片。有些視覺障礙人士會用名為螢幕閱讀器的工具導覽網頁。

為協助這些視覺障礙人士,請新增說明圖片內容的替代文字

在 WordPress 編輯器上,你可在「圖片」區塊「圖庫」區塊、「封面」區塊「媒體及文字」區塊設定中新增替代文字。

搜尋引擎編目程式會讀取替代文字來辨識圖片內容,因此替代文字也有助提升 SEO 的成效。

圖片區塊上的替代文字設定。

撰寫描述性圖片說明

插入圖片時,不妨考慮撰寫說明文字來改善訪客的閱讀體驗,無法檢視圖片的讀者尤其能從中受惠。

你可在撰寫圖片說明時發揮創意。替代文字應盡可能符合事實,說明文字則有助傳達圖片的意境

舉例來說,與其寫「兒子坐在鞦韆上」,不如改成「兒子正在玩最愛的鞦韆,他的臉龐在春光照耀下熠熠生輝,真是絕景。」

為文字新增連結時,應該盡量詳細描述連結文字。例如,「按一下這裡」跟「聯絡我」的意義大不相同。

使用適當的標題

大量在頁面和文章中使用 標題,能幫助讀者輕鬆理解你的內容,文章內容較多時更是如此。

使用標題時,你會發現每個標題分為 1 到 6 級。如果插入不正確的標題大小,系統會在頁面大綱上醒目提示,幫助你進行修改。若要檢視頁面大綱,請開啟「清單檢視」,然後選取大綱分頁:

顯示大綱工具的圖片,不正確的標題大小受到醒目提示。
大綱會醒目提示不正確的標題大小。在此範例中,H2 是最適當的尺寸。

慎選字型和顏色

請避免使用會讓網站難以閱讀的字型樣式和大小。此外,也請注意對比顏色,亦即文字深淺和背景亮度之間的對比。

偵測到不適合的顏色對比選擇時,顏色設定會顯示警告訊息:

顏色設定顯示文字和背景選取的兩種類似藍色調,以及系統產生的對比警告。
如果選擇對比不佳的顏色,編輯器會發出提醒

為多媒體內容新增逐字稿

如果網站包含影片音訊內容,不妨新增隱藏式字幕或逐字稿來說明演講內容、聲音和畫面上的動作。

建議你不要自動播放影片和音訊內容。假如一定得自動播放,則應在頁面上醒目顯示暫停或音量調整選項。

無障礙佈景主題

WordPress.com 致力保障所有佈景主題的無障礙性。不過,有些佈景主題可能包含特定功能,導致網站更為複雜,使無障礙功能的少數部分無法運作。

如果你不希望發生這種情況,請使用經過測試的佈景主題,確保無障礙功能可以使用:無障礙支援佈景主題。如果不確定要使用哪個佈景主題來打造無障礙網站,請放心選擇這裡的佈景主題。

無障礙指引

在 WordPress.com,我們致力打造包容的無障礙環境。建置新功能和佈景主題時,我們遵守網頁設計標準和最佳做法。隨著網路技術的演進,我們不斷尋找新方法來解決特定問題。

我們雖致力讓 WordPress.com 擁有無障礙特性,但網站是否符合 ADA第 508 條的特定規範,仍取決於網站擁有者的決定。我們雖提供無障礙平台,但網站是否具備無障礙功能,仍視網站擁有者與他們對本頁無障礙內容的認知而定。

你可以用 WAVE Web Accessibility 工具之類的程式,測試特定佈景主題是否符合這些準則。對於需要完全符合規範的網站,我們建議使用佈景主題示範頁面測試你選擇的佈景主題,例如 Twenty Twenty-FourTwenty Twenty-Five.

Copied to clipboard!