圖案、元件和設計系統

許多人會在開發工作流程程序中,使用模式樣式指南、元件程式庫或完整設計系統來使用元件驅動的開發。即使您並未正式使用這些工具,仍有可能採取類似的程序,將大型網站、應用程式或其他數位產品分類成易於管理。

就像建構實體結構一樣,一次建構一個容器也十分重要。第一,是基礎、結構、牆、窗戶、屋頂等所有資訊元件導向的開發工具支援網站、應用程式和其他數位產品。

元件導向開發的優點包括將內容細分為可管理元件,因此能減少這些可重複使用的元件開發時間。設計人員、前端和後端開發人員,以及品質確保 (QA) 可搭配運作。客戶、設計人員、產品經理等都適用,因為他們可以預覽建構程序,並在網站推出後將生活風格指南當做參考依據。

不過,以無障礙設計的角度來看,模式、元件和設計系統時,可能會出現一些問題。如何知道哪些模式最適合無障礙功能?您應該使用已建立的模式/程式庫,還是建立新的模式/程式庫?您要如何得知這些模式是否確實對您的使用者有幫助?

由於可用的選擇眾多,很容易對這個主題感到困惑。本單元旨在提供一般資訊,說明如何評估適用於無障礙功能的模式、元件和設計系統,並提供相關入門資訊,協助您做出更便利的選擇。

批判性思考

選擇無障礙模式、元件或設計系統並非火箭科學,但需要時間和批判性思考。其實沒有「一種完美的模式」,但可能有很多選項可行。重點在於瞭解如何依據自己的情況選擇最合適的選項。

在後續測試模組中,您將進一步瞭解評估模式、元件,以及設計無障礙功能系統的相關技巧和方法。但在進入這個階段之前,您必須放鬆思考一些基本問題,例如:

  • 是否已有現成的無障礙圖案、元件或設計系統?
  • 我支援哪些瀏覽器和輔助技術 (AT)?
  • 我是否必須考慮是否有任何程式碼/架構限制,或有其他整合/因素/使用者需要考量?

視您的開發環境和使用者需求而定,您可能會遇到其他或不同的問題。進行無障礙評估時,不妨以這些問題做為起點。

現有資源

建構全新項目之前,請先執行盡職調查,並檢視現有的項目,包括可存取的模式、元件和設計系統。只要稍微研究一下,您也許會出乎意料,找到符合您需求的解決方案或多種解決方案。

以下列舉一些有關無障礙模式、元件和設計系統的實用資源:

對於 JavaScript 架構,您可以立即存取下列資源,或是易於自訂的無障礙功能:

然而,要做到這一點也不足以備感壓力:您不應只複製/貼上程式碼,並假設程式碼可滿足您的環境並自動滿足使用者需求。即使標示為完全可存取,所有模式、元件和設計系統都是如此。

所有資源都應視為起點。請務必測試所有內容!

瀏覽器和輔助技術 (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 架構都允許開發人員使用絕大多數的模式。在這種情況下,您可以減少的限制數量,也可以選擇最容易存取的模式選項。

選擇模式、元件或設計系統時,還需要考量其他事項,例如:

  • 效能
  • 安全性
  • 搜尋引擎最佳化
  • 語言翻譯支援
  • 與第三方服務相互整合

這些因素無疑是決定模式選擇的因素,但您也應該考量建立內容與程式碼本身的人。您選擇的模式必須夠強,足以處理編輯器或使用者原創內容的任何潛在限制,且所有無障礙知識的開發人員都能使用。

隨堂測驗

測驗你的模式相關知識

使用者可以隨時存取無障礙元件嗎?

不,請務必先測試元件。
可以。這些元件可以直接使用,您無須進行額外操作。