無障礙：檢查並調整網站的 DOM 順序
3 分鐘
網站的 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 的選項：
- 網站是在 2024 年 11 月初之後建立。
- 先前已使用無障礙精靈整理過網站的 DOM。
- 已在網站上停用自動 DOM。
手動變更網站的 DOM 順序
若發現網站的 DOM 順序不符合邏輯，可手動調整以確保提升訪客體驗。
使用 無障礙精靈 和圖層面板即可變更 Wix 編輯器網站的 DOM。若是在 Studio 編輯器中建立網站，則可透過網站的圖層和頁面面板調整順序。
重要：
若網站的 Tab 鍵順序符合邏輯，則無需執行任何操作。在順序正確的情況下進行變更，可能會為使用螢幕助讀程式或 Tab 鍵的訪客帶來困擾。
若要變更 DOM 順序：
。
便箋：
- 僅使用 Tab 鍵瀏覽網站時，只能在互動式元件之間移動，無法瀏覽文字等靜態元件。若想在文字等靜態元件上測試螢幕助讀程式，請按照螢幕助讀程式說明中心關於如何使用鍵盤正確瀏覽網站的指示進行操作。
- 釘選元件會自動放置在 Tab 鍵順序的末尾。若希望在序列中更早被選取，建議取消釘選該元件並將其放置在頁首。
後續操作
返回 無障礙檢查清單 以繼續優化網站的無障礙功能。
網站語言與 DOM
不同語言有不同的閱讀方向（例如：英文由左至右閱讀，希伯來文由右至左閱讀）。若將網站語言更改為閱讀方向不同的語言，元件的視覺順序和 DOM 順序可能不再對齊。
建議在無障礙精靈中啟用自動 DOM 選項，以確保元件順序符合網站語言的閱讀方向。
重要：
若網站同時包含由左至右和由右至左語言的內容，建議改為手動調整 DOM 順序。
若要在精靈中啟用自動 DOM：
- 使用無障礙精靈掃描網站。
- 點擊 偵測到的問題 索引標籤。
- 選擇 網站層級。
- 點擊 整理 DOM 順序。
- 選擇 自動（建議）。
- 點擊 套用。
- （選填）檢查網站元件的視覺顯示，確保其對齊。
便箋：
- 此選項可能會變更元件的視覺顯示，因此建議檢閱變更以確保網站外觀符合預期。
- 此功能不支援所有網站組件，您可能需要手動調整其閱讀方向。
。