許多人會在開發工作流程程序中，使用模式樣式指南、元件程式庫或完整設計系統來使用元件驅動的開發。即使您並未正式使用這些工具，仍有可能採取類似的程序，將大型網站、應用程式或其他數位產品分類成易於管理。
就像建構實體結構一樣，一次建構一個容器也十分重要。第一，是基礎、結構、牆、窗戶、屋頂等所有資訊元件導向的開發工具支援網站、應用程式和其他數位產品。
元件導向開發的優點包括將內容細分為可管理元件，因此能減少這些可重複使用的元件開發時間。設計人員、前端和後端開發人員，以及品質確保 (QA) 可搭配運作。客戶、設計人員、產品經理等都適用，因為他們可以預覽建構程序，並在網站推出後將生活風格指南當做參考依據。
不過，以無障礙設計的角度來看，模式、元件和設計系統時，可能會出現一些問題。如何知道哪些模式最適合無障礙功能？您應該使用已建立的模式/程式庫，還是建立新的模式/程式庫？您要如何得知這些模式是否確實對您的使用者有幫助？
由於可用的選擇眾多，很容易對這個主題感到困惑。本單元旨在提供一般資訊，說明如何評估適用於無障礙功能的模式、元件和設計系統，並提供相關入門資訊，協助您做出更便利的選擇。
批判性思考
選擇無障礙模式、元件或設計系統並非火箭科學，但需要時間和批判性思考。其實沒有「一種完美的模式」，但可能有很多選項可行。重點在於瞭解如何依據自己的情況選擇最合適的選項。
在後續測試模組中，您將進一步瞭解評估模式、元件，以及設計無障礙功能系統的相關技巧和方法。但在進入這個階段之前，您必須放鬆思考一些基本問題，例如：
- 是否已有現成的無障礙圖案、元件或設計系統？
- 我支援哪些瀏覽器和輔助技術 (AT)？
- 我是否必須考慮是否有任何程式碼/架構限制，或有其他整合/因素/使用者需要考量？
視您的開發環境和使用者需求而定，您可能會遇到其他或不同的問題。進行無障礙評估時，不妨以這些問題做為起點。
現有資源
建構全新項目之前，請先執行盡職調查，並檢視現有的項目，包括可存取的模式、元件和設計系統。只要稍微研究一下，您也許會出乎意料，找到符合您需求的解決方案或多種解決方案。
以下列舉一些有關無障礙模式、元件和設計系統的實用資源：
對於 JavaScript 架構，您可以立即存取下列資源，或是易於自訂的無障礙功能：
- CSS 不足時：可存取元件的 JavaScript 規定
- 回應
- Angular：Material 程式庫
- Vue 卡：Vuetensils
然而，要做到這一點也不足以備感壓力：您不應只複製/貼上程式碼，並假設程式碼可滿足您的環境並自動滿足使用者需求。即使標示為完全可存取，所有模式、元件和設計系統都是如此。
所有資源都應視為起點。請務必測試所有內容！
瀏覽器和輔助技術 (AT) 支援
研究完幾個可能適用於開發環境的基本模式、元件或完整設計系統後，您就可以開始進行輔助技術支援。評估模式、元件和設計系統時，您需要著重於其中一個 AT 主要類型。
螢幕閱讀器是以特定瀏覽器為設計基礎，搭配這些瀏覽器使用時效果最佳。我們會在 AT 測試的單元中詳細說明這個主題，但基於模式評估目的，瞭解這些組合會很有幫助，有助您瞭解支援各方面的需求。
| 螢幕閱讀器 | 作業系統 | 瀏覽器相容性 | 費用 |
|---|---|---|---|
| 透過 Speech 存取工作 (JAWS) | Windows | Chrome、Firefox、Edge | 需要授權 (40 分鐘的免費版本存在) |
| 非視覺化電腦存取權 (NVDA) | Windows | Chrome 和 Firefox | 免費 (必須下載) |
| 講述者 | Windows | Edge | 免費 (已內建於 Windows 機器中) |
| VoiceOver | macOS | Safari | 免費 (內建於 macOS 機器) |
| 奧爾卡 | Linux | Firefox | 免費 (已內建於 Gnome 發行版本) |
| TalkBack | Android | Chrome 和 Firefox | 免費 (內建於特定 Android 作業系統版本) |
| VoiceOver | iOS | Safari | 免費 (內建於 iOS 裝置) |
支援瀏覽器通常相當複雜，而且如果同時加入 AT 裝置和 ARIA 規格，運作上會更加困難。
但並非全部都是壞消息。幸好，有 HTML5 無障礙工具、無障礙支援和 WCAG 的自訂控制項無障礙開發檢查清單等實用資源，可協助我們進一步瞭解現有瀏覽器和 AT 裝置支援，甚至事先使用 ARIA。
這些資源列出各種可用的 HTML 和 ARIA 模式子元素，包括開放原始碼社群測試。您也可以參考一些適用於桌上型電腦和行動瀏覽器/AT 裝置的模式範例。因此，在您想要使用的模式、元件和設計系統方面，這些資源可協助您做出更易於存取的決策。
其他考量
選擇一些可用的基礎模式或元件，並結合瀏覽器和 AT 裝置支援後，您就可以繼續討論與模式、元件、設計系統和開發環境相關的特定情境問題。
舉例來說，如果您使用的是管理系統 (CMS) 或擁有舊版程式碼，可使用的模式可能會有一些限制。經過審查後，許多模式選擇可能很快就會變成一到兩個選項。
許多 JavaScript 架構都允許開發人員使用絕大多數的模式。在這種情況下，您可以減少的限制數量，也可以選擇最容易存取的模式選項。
選擇模式、元件或設計系統時，還需要考量其他事項，例如：
- 效能
- 安全性
- 搜尋引擎最佳化
- 語言翻譯支援
- 與第三方服務相互整合
這些因素無疑是決定模式選擇的因素，但您也應該考量建立內容與程式碼本身的人。您選擇的模式必須夠強，足以處理編輯器或使用者原創內容的任何潛在限制，且所有無障礙知識的開發人員都能使用。
隨堂測驗
測驗你的模式相關知識
使用者可以隨時存取無障礙元件嗎？