許多人在開發工作流程中，會使用模式樣式指南、元件程式庫或完整設計系統，以元件驅動式開發。即使您未正式使用這些工具，也可能採用類似的程序，將網站、應用程式或其他數位產品的大型設計分解成可管理的部分。
就像建造實體結構一樣，請務必一次建構一個部分。首先是地基、結構、牆壁、窗戶、屋頂，以及兩者之間的所有事物。以元件為導向的開發工具可讓我們為網站、應用程式和其他數位產品執行這項操作。
以元件為導向的開發方式有許多優點，包括將事物分解為可管理的部分，因此這些可重複使用的元件可縮短開發時間。設計師、前端和後端開發人員以及 QA 團隊可以同時作業。客戶、設計師、專案經理等也都很喜歡，因為他們可以預覽建構程序，並在網站推出後，將動態樣式指南做為參考。
不過，如果從無障礙的角度來看模式、元件和設計系統，就會產生一些疑問。如何判斷哪些模式最適合無障礙功能？您應該使用既有的模式或程式庫，還是建立新的模式或程式庫？如何判斷這些模式是否真的能幫助使用者？
由於選擇眾多，您可能會對模式、元件和設計系統感到困惑。本單元旨在提供一般資訊，說明如何評估模式、元件和設計系統的無障礙功能，並提供入門資訊，協助您做出更符合無障礙標準的選擇。
理性思考
選擇無障礙模式、元件或設計系統並非難事，但需要時間和批判性思考。事實上，沒有所謂的「完美模式」，但可能有許多選項都適用。重點在於學會根據自身情況選擇最佳選項。
在後續的測試單元中，您將進一步瞭解如何評估模式、元件和設計系統的無障礙功能。在開始之前，請先思考一些基本問題，例如：
- 是否已有既定的無障礙模式、元件或設計系統？
- 我支援哪些瀏覽器和輔助技術 (AT)？
- 是否有任何程式碼或架構限制？是否還有其他整合、因素或使用者需求需要考量？
視開發環境和使用者需求而定，您可能會遇到其他或不同的問題。建議從下列問題著手，進行無障礙評估。
已建立的資源
在從頭開始建構任何內容之前，請先盡職調查並審查現有的無障礙模式、元件和設計系統。只要稍加研究，您可能會驚訝地發現有符合需求的解決方案 (或多個解決方案)。
如需無障礙模式、元件和設計系統的實用資源，請參閱：
- 無障礙元件
- Deque University ARIA 程式庫
- Gov.UK 設計系統
- 無障礙元件
- MagentaA11y
- 美國網頁設計系統 (USWDS)，專為美國聯邦政府打造
- Smashing Magazine 提供的無障礙模式清單
對於 JavaScript 架構，下列資源預設相當容易存取，或可自訂無障礙功能：
- CSS 不足時：無障礙元件的 JavaScript 規定
- React
- Angular：Material 程式庫
- Vue：Vuetensils
但請務必注意，您絕不應直接複製/貼上程式碼，並假設程式碼會符合您的環境，且自動滿足使用者需求。所有模式、元件和設計系統都是如此，即使標示為完全無障礙也不例外。
所有資源都應視為起點。請務必測試所有項目！
支援的瀏覽器和輔助技術 (AT)
研究幾個可能適用於開發環境的基本模式、元件或完整設計系統後，即可繼續進行輔助技術支援。評估模式、元件和設計系統時，您會想著重於螢幕閱讀器這類主要的輔助技術。
螢幕閱讀器是專為特定瀏覽器設計，搭配這些瀏覽器使用時效果最佳。我們會在 AT 測試單元中更詳細地探討這個主題，但為了評估模式，瞭解這些組合的存在很有幫助，這樣您就能知道需要哪些支援。
| 螢幕閱讀器 | 作業系統 | 瀏覽器相容性 | 費用 |
|---|---|---|---|
| Job Access with Speech (JAWS) | Windows | Chrome、Firefox、Edge | 需要授權 (有 40 分鐘的免費版本) |
| Non-Visual Desktop Access (NVDA) | Windows | Chrome 和 Firefox | 免費 (需下載) |
| 講述者 | Windows | 邊緣 | 免費 (內建於 Windows 電腦) |
| 旁白 | macOS | Safari | 免費 (macOS 裝置內建) |
| Orca | Linux | Firefox | 免費 (內建於以 Gnome 為基礎的發行版本) |
| TalkBack | Android | Chrome 和 Firefox | 免費 (內建於特定 Android 作業系統 版本) |
| 旁白 | iOS | Safari | 免費 (內建於 iOS 裝置) |
瀏覽器支援通常很複雜，加入 AT 裝置和 ARIA 規格後，情況就更加棘手。
不過，這也不全是壞消息。幸好，我們有許多實用資源，例如 HTML5 無障礙功能、無障礙支援和 WCAG 的自訂控制項無障礙開發檢查清單，可協助我們進一步瞭解目前的瀏覽器和 AT 裝置支援，甚至瞭解何時應使用 ARIA。
這些資源會列出可用的各種 HTML 和 ARIA 模式子元素，包括開放原始碼社群測試。您也可以查看電腦、行動瀏覽器和 AT 裝置的模式範例。因此，這些資源有助於您更輕鬆地決定要使用哪些模式、元件和設計系統。
其他注意事項
選擇幾個無障礙基本模式或元件，並考量瀏覽器和 AT 裝置支援後，即可繼續處理模式、元件、設計系統和開發環境的更具體情境問題。
舉例來說，如果您使用內容管理系統 (CMS) 或舊版程式碼，可用的模式可能會受到限制。審查後，系統可能會迅速將多個模式選項縮減為一或兩個。
許多 JavaScript 架構都允許開發人員使用幾乎任何模式。在這種情況下，限制可能較少，您可以選擇最容易使用的模式選項。
選擇模式、元件或設計系統時，還需考量其他因素，例如：
- 成效
- 安全性
- 搜尋引擎最佳化
- 語言翻譯支援
- 第三方整合
這些因素無疑會影響你的模式選擇，但你也應該考慮建立內容和程式碼的人員。您選擇的模式必須夠穩健，才能處理編輯器或使用者原創內容可能出現的任何限制，且建構方式必須讓所有具備無障礙知識的開發人員都能使用。