header-logo
了解如何以 Wix 建立網站和商家。
了解如何建立、管理並維護 Wix 網站。
管理訂閱、方案與請款單。
處理業務,與會員連繫。
學習如何購買、連結或轉移網站網域。
以進階功能提升效率。
尋求解決方法,了解已知問題,或聯絡我們。
placeholder-preview-image
以課程和教學加強技能。
學習網頁設計、行銷等範疇的秘訣。
學習如何提升來自搜尋引擎的自然網站流量。
以全端平台建立自訂網站。
與專家配對,幫助實現目標。
placeholder-preview-image

無障礙:準備圖片和圖庫

7 分鐘
視障訪客可能會使用螢幕助讀程式等輔助技術瀏覽網站。請透過替代文字(alt text)為圖片和圖庫新增描述,讓這些訪客也能順利存取內容。
替代文字提供網站媒體相關資訊,並協助搜尋引擎和螢幕助讀程式「閱讀」這些內容。
Wix 從何處取得資訊?

替代文字撰寫指南

編寫以無障礙為核心的替代文字時,建議留意以下幾點:
  • 選擇焦點:識別圖片中最重要的訊息或資訊,並圍繞該資訊編寫替代文字。
  • 描述具體:替代文字應清晰、充分且準確地向訪客解釋圖片內容。請確保不要在單個網站頁面上為 2 張或更多圖片使用相同的替代文字。
  • 留意背景:考慮圖片與頁面內容的關聯性。
  • 保持簡潔:建議保持替代文字簡短。僅包含相關細節,並避免冗餘或重複的資訊(例如:不需要包含「圖片」或「照片」等詞彙)。
提示:
納入網站關鍵字,同時針對 SEO 最佳化替代文字。

在編輯器中新增替代文字

替代文字可確保使用螢幕助讀程式的訪客能夠存取並理解網站內容,因此建議在上傳所有相關圖片時一併新增替代文字。
提示:
請務必發佈網站,讓替代文字正式上線。

為單張圖片新增替代文字

透過「設定」面板,在網站編輯器(Wix 編輯器、Studio 編輯器和 Wix Harmony 編輯器)中為圖片新增替代文字。
  1. 前往編輯器
  2. 點擊頁面上的圖片。
  3. 點擊 設定 圖示
  4. 圖片內容為何? 下方輸入圖片描述。
  5. 按下鍵盤上的 進入 鍵即可儲存變更。
編輯器中的圖片設定面板。替代文字欄位已填寫,且游標正懸停在其上方。

為圖庫新增替代文字

使用網站媒體管理員為圖庫圖片新增替代文字。
  1. 前往編輯器
  2. 點擊頁面上的圖庫。
  3. 點擊管理媒體變更圖片
  4. 點擊圖片以進行選擇。
  5. 在右側輸入圖片標題。
  6. (針對 Wix Pro Gallery)若希望替代文字與圖片標題不同,請在替代文字下方進行編輯。
  7. 點擊完成
媒體管理員中的專業圖庫。替代文字欄位已強調。
工具提示(Tooltips)的處理方式?
您先前可能曾在 Wix 編輯器中為圖片新增工具提示。此選項目前已不再提供,且所有現有的工具提示皆已從已上線網站中移除。

在無障礙精靈中新增替代文字

使用無障礙精靈檢查網站時,系統可能會提示您為圖片新增替代文字。您可以使用精靈中的任務為網站訪客提供簡短清晰的描述。
無障礙精靈適用於各款網站架設工具,方便改善任何正在編輯的網站無障礙功能。
提示:
新增替代文字時,可隨時點擊 套用 儲存變更。

若要在無障礙精靈中新增替代文字:

  1. 前往編輯器
  2. 點擊頂部的設定,然後選擇無障礙精靈
  3. 點擊右側無障礙精靈面板中的掃描網站
  4. 選擇偵測到的問題索引標籤。
  5. 點擊想要處理的頁面。
  6. 點擊為圖片新增替代文字並選擇相關選項:
    • (若非所有圖片都有替代文字)點擊立即開始
    • (若先前已為所有圖片新增替代文字)點擊編輯
  7. 點擊相關圖片旁的編輯圖示 ,然後在欄位中輸入文字。
  8. 點擊套用
已開啟圖片的替代文字卡。游標正點擊包含描述的文字欄位。

使用 AI 產生替代文字

圖片很多嗎?您可以使用無障礙精靈中的 AI 工具產生替代文字。選擇要為特定圖片還是頁面上的每張圖片產生替代文字。
重要:
  • 我們無法保證 AI 產生的替代文字完全準確。因此,建議檢查每張圖片產生的文字,並根據需要進行編輯。
  • AI 替代文字工具不支援 SVG 或 GIF 圖片。您需要手動為這些檔案編寫替代文字。

若要使用 AI 產生替代文字:

  1. 前往編輯器
  2. 點擊頂部的設定,然後選擇無障礙精靈
  3. 點擊右側無障礙精靈面板中的掃描網站
  4. 選擇偵測到的問題索引標籤。
  5. 點擊想要處理的頁面。
  6. 點擊為圖片新增替代文字並選擇相關選項:
    • (若非所有圖片都有替代文字)點擊立即開始
    • (若先前已為所有圖片新增替代文字)點擊編輯
  7. 選擇要為單張圖片產生文字,還是批次產生:
    • 為單張圖片產生替代文字:
      1. 點擊相關圖片旁的編輯圖示 
      2. 點擊產生
    • 為所有頁面圖片批次產生替代文字:點擊產生
  8. 檢查產生的文字/進行任何必要的變更。
  9. 點擊套用
游標正懸停在替代文字的「產生」按鈕上方。
便箋:
  • 進行批次編輯時,工具不會為標記為裝飾用或已包含替代文字的圖片產生替代文字。
  • 有時 AI 工具可能無法為頁面上的圖片產生替代文字。您可根據需要點擊再試一次

將圖片標記為裝飾性

裝飾性圖片是指對網站內容沒有貢獻的圖片,因為它們僅用於美學或裝飾目的。
若網站上的圖片僅供裝飾且與內容無關,則無需新增替代文字。您可以在無障礙精靈中將圖片標記為「裝飾用」,以確保搜尋引擎和螢幕助讀程式自動略過該圖片。

將圖片標記為裝飾性:

  1. 前往編輯器
  2. 點擊頂部的設定,然後選擇無障礙精靈
  3. 點擊右側無障礙精靈面板中的掃描網站
  4. 選擇偵測到的問題索引標籤。
  5. 點擊想要處理的頁面。
  6. 點擊為圖片新增替代文字並選擇相關選項:
    • (若非所有圖片都有替代文字)點擊立即開始
    • (若先前已為所有圖片新增替代文字)點擊編輯
  7. 點擊相關圖片旁的編輯圖示 
  8. 勾選此圖片為裝飾性圖片,不需要替代文字旁的核取方塊。
  9. 點擊套用
畫面截圖顯示在無障礙精靈中勾選裝飾性圖片選項。
溫馨提示:
您應為任何包含連結的圖片新增替代文字,且不要將其標記為裝飾用。

顯示網站圖片中的文字

這指的是包含拍攝或新增文字的圖片。
搜尋引擎或螢幕助讀程式無法「閱讀」圖片中的文字。然而,若該圖片為必要項目且文字與網站內容相關,則可將其新增至圖片描述中。
若文字與內容無關或對網站內容沒有貢獻,則無需將其新增至圖片描述中。
選擇下方選項以瞭解更多關於應新增及不應新增至圖片描述的圖片文字資訊。

顯示網站圖片中的文字內容

純文字圖片僅包含文字,沒有其他拍攝的元件。範例包括字型圖片,或僅包含文字的標誌。
由於圖片文字並非「真實」的文字元件,因此無法被搜尋引擎或螢幕助讀程式讀取。建議盡可能避免使用此類圖片,並將其替換為真實的文字元件,以提升網站的 SEO 和無障礙功能。
後續步驟:
返回 無障礙檢查清單 繼續提升網站的無障礙程度。