Wix CMS：無障礙最佳做法
6 分鐘
在 Wix CMS 中實施無障礙最佳做法，確保所有訪客（包括依賴輔助技術的使用者）都能順利使用網站。這些做法包括為按鈕新增無障礙名稱、為所有媒體使用有效的替代文字，以及將元件放置在具有 Aria 屬性的區段或容器中。請參考這些指南，協助每個人都能更輕鬆地瀏覽內容並進行互動。
Wix CMS 替代文字最佳做法
替代文字對於提供圖片、影片和向量形狀的內容資訊至關重要。撰寫替代文字時，請清晰且簡潔地描述媒體，就像是為了讓 AI 或螢幕助讀程式解讀一樣。請將替代文字保持在 125 個字元以內，並避免使用「圖片內容為」之類的詞彙。如需撰寫有效替代文字的詳細指南，請參閱 無障礙：準備圖片和圖庫。
建議在 Wix CMS 集合中建立一個文字欄位，作為每個媒體項目的替代文字。為了保持集合整齊，請將此欄位放在其代表的媒體欄位旁並清晰命名，例如「替代文字 [圖片／圖庫名稱]」。
對於影片元件，資料集連結面板中的替代文字屬性稱為 影片描述。對於向量圖形或形狀，請使用 替代文字連結至 選項。對於區段、條紋、欄或重複器項目（僅限 Wix 編輯器）中的背景圖片，請使用 背景替代文字連結至。
不傳達具體內容的裝飾性圖片和媒體可將替代文字留白。這能讓螢幕助讀程式略過這些內容並減少干擾。
非裝飾用圖片
將非裝飾性圖片新增至 Wix CMS 時，提供描述性替代文字至關重要。建議在 Wix CMS 集合中新增一個代表圖片替代文字的獨立「文字」欄位類型。請在替代文字中使用具體且具描述性的語言。例如，不要將替代文字寫成「一名女子」，而應使用「一名女子在花園裡種植雛菊」。
在編輯器中將圖片連結至資料集時，請點擊 替代文字連結至 欄位，並選擇您建立的替代文字欄位。這讓螢幕助讀程式能夠描述圖片及其用途，讓網站更具包容性。
裝飾用圖片
裝飾性圖片通常不傳達具體內容，因此不需要替代文字。如果圖片純粹用於裝飾，您可以在資料集中讓替代文字保持未連結狀態。這有助於螢幕助讀程式略過圖片，避免不必要的干擾。
作為可點擊按鈕使用的圖片
如果圖片連結至 資料集小部件（例如開啟動態項目頁面），其替代文字應描述該操作，而非僅描述圖片本身。例如，若點擊圖片會引導訪客前往個人檔案頁面，替代文字可設為「閱讀更多關於 Willis McSmoot」。
透過運算式，您可以將靜態文字（例如「閱讀更多關於」）與動態系列欄位值（例如「Willis McSmoot」）結合，確保每張圖片的替代文字各不相同。如此一來，訪客在使用輔助技術時即可理解圖片的用途。
若要使用運算式建立自訂替代文字：
- 將相關圖片連結至連結系列的資料集。
- 點擊 連結圖片 面板中的 替代文字連結至 下拉選單，然後選擇 運算式。
- 點擊 運算式 欄位並輸入可建立所需替代文字的函式。例如，您可以輸入以下函式，將「閱讀更多關於」與包含姓名的「標題」欄位結合：
1CONCAT("Read more about ",title)瞭解更多如何使用運算式組合多個欄位的值。
連結至「圖片」欄位類型的圖庫
對於連結至「圖片」欄位類型的圖庫，為每張圖片提供替代文字至關重要。請在 Wix CMS 集合中建立一個專門用於圖片替代文字的獨立「文字」欄位類型。將圖庫連結至資料集時，請將 替代文字連結至 下拉式選單連結至對應的替代文字欄位。這可確保螢幕助讀程式能夠提供圖庫內圖片的描述，提升無障礙程度。
瞭解更多將圖庫連結至 Wix CMS 集合項目的相關資訊。
連結至「媒體圖庫」欄位類型的圖庫
將圖庫連結至「媒體圖庫」欄位是在動態項目頁面上顯示多個項目相關圖片或影片的絕佳方式。執行此操作時，請直接在集合的「媒體圖庫」欄位中為每個媒體檔案新增替代文字。點擊集合中相關項目旁的「媒體圖庫」欄位，即可為每個媒體檔案新增替代文字。您也可以在該處輸入每個檔案的標題和描述。這讓螢幕助讀程式能夠傳達圖片和影片的內容，確保圖庫中的所有媒體內容皆符合無障礙規範。
瞭解更多將圖庫連結至「媒體圖庫」欄位的相關資訊。
按鈕的無障礙名稱
您可以為連結至 Wix CMS 的按鈕新增無障礙名稱。無障礙名稱的作用類似替代文字，但專用於按鈕。它們可協助螢幕助讀程式描述按鈕的功能或導向的地點。為按鈕新增無障礙名稱可改善網站的無障礙程度，並協助所有訪客更輕鬆地瀏覽內容。
將按鈕連結至資料集時，請使用 無障礙名稱連結至 下拉式選單，將無障礙名稱連結至集合中的「文字」欄位。此欄位應清晰且簡潔地描述按鈕的操作或目的地。
例如，與其使用「點擊此處」等通用名稱，不如使用「閱讀更多關於我們的服務」或「提交您的申請」。
如有需要，您可 使用運算式 將靜態文字與集合欄位中的金額結合。如此一來，螢幕助讀程式即可根據內容為每個按鈕提供具意義的描述。例如，您可以建立如下的無障礙名稱：
1CONCAT("Read more about ", title)（僅限 Studio 編輯器）使用「載入更多」按鈕時，將元件附加至不同區段
在 Studio 編輯器中新增「載入更多」按鈕時，請將放置在重複列表或圖庫下方的所有內容保留在獨立區段中。若將任何元件放置在與重複列表或圖庫相同的區段，且直接位於其下方，則點擊「載入更多」按鈕時，元件將會重疊。這種重疊會阻礙可見度與無障礙，進而導致訪客困惑。
若要避免此問題，請務必確保想要放置在重複列表或圖庫下方的任何元件（包括「載入更多」按鈕）都附加至獨立區段。如此一來，當使用者點擊「載入更多」按鈕時，圖庫或重複列表會適當地展開而不會產生任何重疊，提供更清晰且更友善的使用者體驗。
（僅限靜態頁面）將「下一個／上一個品項」按鈕附加至容器
在靜態頁面上，若訪客點擊 「下一個／上一個品項」按鈕 會導致連結 CMS 的元件內容發生變化，請將顯示內容的元件附加至單一容器。接著設定容器的 ARIA（無障礙豐富網際網路應用程式）屬性，以便螢幕助讀程式在訪客點擊按鈕時讀出變更後的內容。
您只需附加顯示變更內容的元件即可。「下一個／上一個品項」按鈕不需要附加至容器。
Wix 編輯器
Studio 編輯器
。
- 若尚未啟用，請先啟用編碼：
- 點擊編輯器頂部的「開發模式」。
- 點擊「開啟開發模式」。
- 啟用無障礙開發工具：
- 點擊編輯器頂部的「設定」。
- 選擇「無障礙精靈」。
- 點擊右側面板中的「無障礙開發工具」。
- 啟用「在編輯器中顯示進階無障礙設定」旁的切換開關。
- 右鍵點擊顯示 CMS 系列內容且附有元件的容器。
- 選擇「無障礙」。
- 點擊「新增屬性」。
- 點擊「屬性」下拉式選單並選擇 aria-live。
- 點擊「屬性值」下拉式選單並選擇 polite。
- 點擊「新增」。
- 準備好讓變更生效時，即可發佈網站。
將「品項計數」文字附加至容器
若在文字元件中顯示 資料集品項計數，且訪客可點擊輸入元件來更改品項計數，請將該文字附加至容器。接著設定容器的 ARIA（無障礙豐富網際網路應用程式）屬性，以便螢幕助讀程式在品項計數變更時讀出內容。
當訪客點擊篩選內容或收集內容的輸入元件時，這項設定便非常重要。每當訪客有可能更改顯示的品項計數時，請將顯示品項計數的文字附加至容器，以便螢幕助讀程式讀出變更。
Wix 編輯器
Studio 編輯器
- 新增第一個屬性：
- 點擊「新增屬性」。
- 點擊「屬性」下拉式選單並選擇 aria-atomic。
- 點擊「屬性值」下拉式選單並選擇 true。
- 點擊「新增」。
- 新增第二個屬性：
- 點擊「新增屬性」。
- 點擊「屬性」下拉式選單並選擇 aria-live。
- 點擊「屬性值」下拉式選單並選擇 polite。
- 點擊「新增」。
- 準備好讓變更生效時，即可發佈網站。
讓輸入元件符合無障礙標準
當使用 設定為篩選內容的輸入元件 時，預設情況下，篩選條件會在訪客做出選擇後立即套用。您可以透過 新增「套用篩選條件」按鈕 來更改此行為。
為了提升無障礙體驗，建議新增 「套用篩選條件」 按鈕。有了此按鈕，內容直到訪客點擊後才會進行篩選。這能提供更好的體驗，特別是當使用者想要在一次套用所有條件前先設定多個篩選條件時。
顯示資料集品項計數時：
如果訪客可以點擊會變更項目計數的輸入，請務必將顯示項目計數的文字附加至容器。請參閱 此區段上方的部分以了解更多資訊。
讓分頁列符合無障礙標準
若要讓 分頁列 更具無障礙性，請為分頁列本身及其按鈕新增無障礙名稱。這些名稱不會顯示在畫面上，但對螢幕助讀程式至關重要，可協助使用者了解如何導覽頁面。例如，您可以將分頁列命名為「頁面導覽」，並為按鈕指派清晰的名稱，如「下一頁」、「上一頁」，或根據內容進行自訂（例如「下一則限時動態」或「下一個產品」）。
提示：
在 Studio 編輯器中，若有「載入更多」按鈕，請務必將分頁列以及顯示在重複列表或圖庫下方的任何其他內容放置 在獨立區段中。
常見問題
點擊下方即可查看常見無障礙問題的答案。
如何在 Wix CMS 中命名替代文字欄位？
若重複列表的圖片混合使用裝飾性與非裝飾性圖片，該怎麼辦？
是否可為圖片新增在訪客將游標懸停於圖片上方時顯現的工具提示？
Wix CMS 表單的成功／不合格訊息是否符合無障礙標準？