開始使用 Wix以 Wix 建立網站和商家。歡迎使用我們的 AI 工具來建立網站、自訂範本或雇用專業人員,樹立網上形象。
建立網站了解如何以 Wix 工具建立並管理網站。您也可在此找到更多關於 AI 工具、網站訪客隱私權和無障礙的資訊。
帳戶與帳單檢閱帳戶設定,設定訂閱與方案,查看請款單。
使用 Wix 行動應用程式歡迎使用 Wix 行動應用程式,隨時隨地處理業務,並以專屬應用程式吸引網站會員互動。
連結網域以逐步指南了解如何購買、連結或轉移網站網域,並學習如何確保網站資料安全。
Studio、夥伴與 Enterprise善用 Studio 或 Enterprise 帳戶,以進階功能提升效率。
需要協助?尋找網站與技術支援,了解已知問題,或聯絡我們要求協助。
placeholder-preview-image
Wix Learn以課程和教學加強技能。
Wix 部落格學習網頁設計、行銷等範疇的秘訣。
SEO 學習中心學習如何提升來自搜尋引擎的自然網站流量。
網站開發以全端平台建立自訂網站。
placeholder-preview-image

無障礙:檢查並調整網站的 DOM 順序

網站的 DOM 順序是螢幕助讀程式和 Tab 鍵在頁面上強調或「閱讀」內容的順序。該順序應遵循邏輯,以確保訪客在網站上獲得最佳體驗,並能順利瀏覽和享受內容。
重要:
本篇文章旨在說明如何優化在 Wix 編輯器和 Studio 編輯器中建立的網站 DOM 順序。如需了解 Wix Harmony 編輯器的 DOM 順序操作資訊,請點擊此處。

網站上的 DOM 順序

網站 DOM 是網站頁面上元件的載入和閱讀順序。Wix 會根據元件的視覺順序自動設定 DOM 順序。在開發無障礙工具時,我們會使用以下螢幕助讀程式測試產品:
  • Windows + Firefox 或 Chrome:NVDA(免費閱讀器)
  • iOS + Safari:Voiceover(內建閱讀器)
這代表我們在建立網站的自動 DOM 順序時,已將上述應用程式的功能納入考量。

DOM 順序的重要性

部分網站訪客可能會使用螢幕助讀程式和其他輔助技術來瀏覽網站。這些技術透過掃描網站內容並向訪客朗讀,來協助有視覺障礙或相關狀況的訪客。
使用螢幕助讀程式的訪客以及受行動不便影響的訪客,可能會使用 Tab 鍵瀏覽網站內容。因此,網站 DOM 順序對於使用螢幕助讀程式或 Tab 鍵的訪客非常重要,因為他們需要能夠以邏輯順序瀏覽網站。
例如,網站選單應排在第一位,接著是頁首中的其餘元件,然後是頁面標題、頁面內容等。若 DOM 順序不正確,可能會導致螢幕助讀程式或 Tab 鍵略過或跳過頁面內容。
想要測試網站的 DOM 順序嗎?
您可在網站的已上線版本使用鍵盤的 Tab 金鑰或螢幕助讀程式,測試 Wix 網站的自動 DOM 順序。

無障礙精靈中的自動 DOM

在 Studio 編輯器中開啟無障礙精靈時,可能會看到自動整理 DOM 順序的選項。建議選擇此選項,以確保精靈的掃描和產生的任務正確無誤。
編輯器中已開啟精靈面板。自動整理 DOM 的核取方塊已強調顯示。
沒看到此核取方塊?
若符合以下情況,則不會出現整理網站 DOM 的選項:
  • 網站是在 2024 年 11 月初之後建立。
  • 先前已使用無障礙精靈整理過網站的 DOM。
  • 已在網站上停用自動 DOM。

手動變更網站的 DOM 順序

若發現網站的 DOM 順序不符合邏輯,可手動調整以確保提升訪客體驗。
使用 無障礙精靈 和圖層面板即可變更 Wix 編輯器網站的 DOM。若是在 Studio 編輯器中建立網站,則可透過網站的圖層和頁面面板調整順序。
重要:
若網站的 Tab 鍵順序符合邏輯,則無需執行任何操作。在順序正確的情況下進行變更,可能會為使用螢幕助讀程式或 Tab 鍵的訪客帶來困擾。

若要變更 DOM 順序:

由於 Wix 會自動為網站設定 DOM 順序,您必須在 無障礙精靈 中將其停用。接著即可視需求在網站的圖層面板中手動調整元件的 DOM 順序。

若要手動整理 DOM 順序:

  1. 前往編輯器。
  2. 點擊頂部的 設定 並選擇 無障礙精靈。
  3. 在右側精靈中選擇 掃描網站。
  4. 點擊 偵測到的問題 索引標籤。
  5. 選擇 網站層級。
  6. 點擊 整理 DOM 順序。
  7. 選擇 手動。
  8. 點擊 套用。
精靈中的 DOM 設定。已選擇手動,且游標正點擊「套用」。
  1. 選擇編輯器左下角的圖層 。
  2. 檢查清單並刪除任何多餘的元件。這包括在網站上沒有用途且可能混淆螢幕助讀程式使用者的重複元件。
  3. 將剩餘元件拖放至所需的順序。
網站的圖層面板。正在將專業圖庫拖曳至另一個位置。
後續步驟:
開啟行動版編輯器並重複相同步驟。
便箋:
  • 僅使用 Tab 鍵瀏覽網站時,只能在互動式元件之間移動,無法瀏覽文字等靜態元件。若想在文字等靜態元件上測試螢幕助讀程式,請按照螢幕助讀程式說明中心關於如何使用鍵盤正確瀏覽網站的指示進行操作。
  • 釘選元件會自動放置在 Tab 鍵順序的末尾。若希望在序列中更早被選取,建議取消釘選該元件並將其放置在頁首。
後續操作
返回 無障礙檢查清單 以繼續優化網站的無障礙功能。

網站語言與 DOM

不同語言有不同的閱讀方向(例如:英文由左至右閱讀,希伯來文由右至左閱讀)。若將網站語言更改為閱讀方向不同的語言,元件的視覺順序和 DOM 順序可能不再對齊。
建議在無障礙精靈中啟用自動 DOM 選項,以確保元件順序符合網站語言的閱讀方向。
重要:
若網站同時包含由左至右和由右至左語言的內容,建議改為手動調整 DOM 順序。

若要在精靈中啟用自動 DOM:

  1. 使用無障礙精靈掃描網站。
  2. 點擊 偵測到的問題 索引標籤。
  3. 選擇 網站層級。
  4. 點擊 整理 DOM 順序。
  5. 選擇 自動(建議)。
  6. 點擊 套用。
  7. (選填)檢查網站元件的視覺顯示,確保其對齊。
便箋:
  • 此選項可能會變更元件的視覺顯示,因此建議檢閱變更以確保網站外觀符合預期。
  • 此功能不支援所有網站組件,您可能需要手動調整其閱讀方向。
精靈中的「整理 DOM 順序」下拉式選單已開啟。游標正點擊「自動」。
改變主意了?
您可從編輯器恢復自動 DOM 順序:
  • Wix 編輯器: 點擊 編輯器頂端列 的 復原 圖示 。
    請留意: 此選項僅適用於最後一個操作為自動重新整理 DOM 的情況。
  • Studio 編輯器: 從網站歷史紀錄恢復先前的網站版本。